How to make crips and smooth icons from downloaded png?

Question

That is probably repeated question but I want to make all png icons look crisp and smooth in android application. How can I do this in Photoshop?

I have 50*50 px png images that I want to make them look good in mobile.But when I reduce png image using transform command/or using image re-sampling with bicubic sharper technique, still reduced image looks blurry on mobile for some reason and it is pixelated.

How to downsample png so that it looks good in mobile app and at all sizes? Do I really need vector format or it is good only with png?

Answer 1

No you do not need vector form for images to look good on other devices. However you need a bigger original image or it will be either upscaled or tiny in a device that has very high pixel density.

See browsers in high density machine have a problem. If they show images at 1 pixel to 1 pixel ratio then all images for legacy websites would be hideously small. So what they do is they override your image size and interpolate more pixels. Now most of these browsers will show the image at exactly the size you specify if you override the image to use in css or with a meta attribute in the header to let the browser know what to do. This may not help as the image will be very small on these devices compared t devices that dont have so dense pixel density.

In reality most likely you just want a separate icon for these devices with more pixels for those screens. And really the only way to do that is t redraw the icon.

But your use case s a bit opaque in the question, its hard to say. anything definitive.

NOTE: PPI/DPI is just a red herring in the story. All that matters is that you have enough pixels. And explain the browser that you are a modern site.

Answer 2

blurryness might come from images not being pixel perfect, meaning that there are some of the confinements of your icon lie in between a pixel, rather than filling it completely. This may also come from scaling, which can make pixel-perfect icons blurry when the scale factor does not result in a size where confinements lie on pixel edges.

This site from adobe might shed some light on what I am talking about: https://helpx.adobe.com/illustrator/how-to/pixel-perfect.html

As long as the original icon-design was made pixel perfect, it should not matter if you use a vector file or png (as long as you do not enlarge it, but shrink it down).

Answer 3

You may want to try the Image Trace tool in Illustrator and play around with the settings until you get the desired detail for your icons, then go ahead and resize. Vector is the most reliable way to make sure your designs still look crisp at any scale.

Answer 4

First you make a small size image like 48*48 px with 72ppi resolution.

when you resize image don't change it's height and width.only change resolution.if you change your resolution 72 ppi to 144ppi then image size automatic increase and it will be 2x means 96*96px and image quality will be high(without pixelate) because image quality depend on resolution, not height and width.