Saving Images in png format in Photoshop makes it blurry when used in websites


Question

When I save PNG images for the web in Photoshop, its getting blurred on edges. I want to use these PNGs in mobile websites:

enter image description here

Any solution to this?

1
2
4/2/2014 10:25:00 PM

If you are using shapes/vectors, try and line them up to the nearest pixel. PS will use antialiasing to round it off, so if your shape/vector lines are sub-pixel, it will make a semi-transparent pixel on the edge to represent that 'half way in between 2 pixels'.

This is also a common issue when down sizing an image. It helps to keep the original size as a multiple of the smaller. Make it x2 or x4 to get cleaner edges when downsizing.

4
4/2/2014 3:27:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^