When I save PNG images for the web in Photoshop, its getting blurred on edges. I want to use these PNGs in mobile websites:
Any solution to this?
-
1note that some mobile browsers and apps will scale your image behind the scenes. Check to make sure the browser isn't stretching the image.– horatioApr 2, 2014 at 18:51
-
1To 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.– JohnApr 2, 2014 at 21:52
Add a comment
|
4 Answers
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.– noobApr 3, 2014 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.– JohnApr 3, 2014 at 13:17
The image is currently 37x25 try saving it to an aspect ratio or canvas of even numbers. Like 42x28
How are you clipping the said images? If using the lasso, make sure there is not a feather value set in the top toolbar.
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.
