This is 120px X 283px dimension, PNG image.

enter image description here

When using it in website the same image dimension is set through css but in the browser view it is showing like a saw like this

enter image description here

Is it possible to draw without any little curve?

Is there a file format or method I can save with that will reduce the aliasing on the line?

  • you mention "the same image dimension" are you creating the line with pure .css or are you calling the image with .css? If you are using an image what is the format of the image and how did you create the image? – DᴀʀᴛʜVᴀᴅᴇʀ Aug 15 '13 at 5:46
  • background: url("imagepath"); width: 120px; height: 283px; – Bhojendra Rauniyar Aug 15 '13 at 5:48
  • what is "imagepath" (.png, .jpg, .gif, .bmp, .svg, etc. etc.) Please edit your question with how you created "imagepath". – DᴀʀᴛʜVᴀᴅᴇʀ Aug 15 '13 at 5:50
  • 1
    if you're worried about the quality of the line why not code it with .css? – DᴀʀᴛʜVᴀᴅᴇʀ Aug 15 '13 at 14:31
  • @Matt_2.0 Thank you for your suggestion, but I'm unusual to use this in css exactly the same. – Bhojendra Rauniyar Aug 16 '13 at 3:43

This is a product of using diagonal lines on a grid (which is essentially what a PNG is: a grid of pixels).

Here's a diagonal line on a grid. Each of the squares represents a pixel, greatly enlarged here. Some pixels need to be only partially coloured.

Diagonal line on grid

It's not possible to colour a pixel like this. It needs to be all one colour. Without anti-aliasing, the pixel is either the foreground or background colour:

Pixellated diagonal line

The black line on that image represents the ideal edge. Whether the underlying pixel turns out foreground or background depends on which side of the ideal line most of the pixel lies. You can see that the ideal line needs to be shown as blocks. These are called jaggies.

One way some packages help with this is to anti-alias the edge, which means producing a gradient of colour rather than the simple binary. From the top image, the resultant colour depends on the percentage of the pixel inside the shape. If a pixel is 25% inside and 75% outside, its resultant colour is 75% along the colour gradient from outside to inside.

Anti-aliased diagonal

This provides a visually smoother edge.

It does look as though your troublesome image is already anti-aliased (I'm sure Photoshop will do that; I used Paint Shop Pro here), in which case it's probably as good as it will get. There is a trade-off between number of graduations [four here] and sharpness of line.

However: in your image, the anti-aliasing is going from red to white, and not to grey (the background colour). If you can set it to anti-alias correctly between the two colours which should be adjacent, you should find the result is better.

| improve this answer | |

Saving it to PNG-24 is the best you can do.

By the way, please check my example, this is a transparent PNG-24 image below.

Line types

  1. The first 3 lines are created in Illustrator and placed to Photoshop as Smart Objects. This is a lossless method, the line is drawn every time from the source, which is a vector based line.
  2. The 4th was a rectangle I rotated to this angle. Please note, every time you rotate a pixel based layer, it will reduce the sharpness. This means a very little bit loss of quiality as you can see.
  3. The 5th is painted with a 100% hard brush.

So the point is, it really matters, how you create an object, when the quality is this important for you.

The other thing is connected to the first answer, as you can see the first 3 lines, the first looks like a bit better, and the third is worse than the second. This is because narrow angles produce lot of pixels having a bit of opacity, and this makes it a little blurry.

| improve this answer | |

Use PNG-24 instead of PNG-8 to save your file. The jagged edges won't be a problem. A pattern when saved with PNG-8 appears like this when zoomed. Jagged edges

When the same pattern is saved with PNG-24 it appears like this: Smooth

The difference is that PNG-8 can save upto 256 colors while PNG-24 can save a million colors( I hope you can calculate the exact number by the use of number 24 ;) )

The images are at the same scale and the difference is visible.

Obviously the size for PNG-24 is large compared to that of PNG-8.

| improve this answer | |
  • Doesn't that also mean larger file sizes? – Dom Aug 15 '13 at 20:04
  • Why does the PNG-8 anti-aliasing use white? – Andrew Leach Aug 15 '13 at 20:04
  • @dominic yes it means larger file sizes because more information is being stored. – Anish Shah Aug 15 '13 at 20:09
  • But my example doesn't. It grades between red and grey. Perhaps the answer is not to use Photoshop. – Andrew Leach Aug 15 '13 at 20:13

Yes, there is a way you can get rid of this Anti-aliasing with this lines. But you'll just have to make this lines as paths with the Pen Tool (probably redraw). And then //Right Click> Make selection> Uncheck the Anti-Alised box.

After creating the selection, do a simple fill with red color (Alt+Backspace).

I'd like to know if that's what you meant.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.