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
    note that some mobile browsers and apps will scale your image behind the scenes. Check to make sure the browser isn't stretching the image. – horatio Apr 2 '14 at 18:51
  • 1
    To elaborate on horatio's comment, always set your image width and height exactly the same as your image dimensions. If you want to do retina support, set it exactly half so that there is less interpretation required by the browser. This is hard if you are doing fluid images, but for an icon this shouldn't be the case. – John Apr 2 '14 at 21:52

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.

  • I am using vector files from illustrator then changing to png. I made the png x2 . Now its looking fine. – noob Apr 3 '14 at 7:00
  • For images that small, you don't have many pixels to work with. It really helps to zoom in close and nudge your curve/vectors a bit. Lining them up with a pixel grid edges will get the best, cleanest possible result. – John Apr 3 '14 at 13:17

The image is currently 37x25 try saving it to an aspect ratio or canvas of even numbers. Like 42x28

  • This has nothing to do with the problem. – Etheryte Apr 2 '14 at 21:01

How are you clipping the said images? If using the lasso, make sure there is not a feather value set in the top toolbar.

  • I am using vector files from illustrator then changing to png – noob Apr 3 '14 at 6:58

maybe the resolution of your png file is too high for a mobile website. Try to reduce the resolution to the size that you use in your website. Otherwise convert it into a .svg file because its better quallity on phone's. I hope this will help you out.

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.