Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
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 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 at 21:52

4 Answers 4

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.

share|improve this answer
    
I am using vector files from illustrator then changing to png. I made the png x2 . Now its looking fine. –  noob Apr 3 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 at 13:17

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

share|improve this answer
    
This has nothing to do with the problem. –  Nit Apr 2 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.

share|improve this answer
    
I am using vector files from illustrator then changing to png –  noob Apr 3 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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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