0

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?

Improve this question
4
  • 1
    Hmm... isnt that the point, you simply need bigger images? – joojaa Apr 20 '17 at 11:03
  • what size do they need to be on the application? are you using the correct dp resolution? – Luciano Apr 20 '17 at 16:22
  • Please provide more detail and check for typos. Is it possible that you have 50x50 inch png at ? dpi resolution for starters? If you only have 50x50 pixels and still want to reduce(?), you go from bad to really bad. What size do you want or need? Are you creating the app yourself? What does the documentation prescribe for icons? And how do your starting pngs look? Are they even crisp and smooth or are you asking for mirracles? I have had good results from vectorizing even low-res bitmaps; but that is not your question... – Martin Zaske Apr 20 '17 at 18:59
  • @MartinZaske DPI does not matter just pixels – joojaa Apr 20 '17 at 21:05
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.

Improve this answer
0

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).

Improve this answer
0

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.

Improve this answer
-3

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.

Improve this answer
1
  • err it will still be blurred though. You should have a big image then make it smaller isntead ;) – joojaa Apr 20 '17 at 12:36

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.