Advertisement


How to Remove Jagged Edge (Aliasing) on a Straight Diagonal Line


Question

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?

2013/08/15
1
3
8/15/2013 2:13:00 PM

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.

2013/08/15
6
8/15/2013 2:07:00 PM