0

I am saving icons as PNG files to be used in an app. But when zooming or reducing the images they look pixelated. How to save images in PNG format so they remain crisp and smooth?

  • Can you add more details please? What's the image size? How much are you rediucing the image? Show an example also if you can. – Adrian Jason Nizzetto Feb 28 '17 at 11:15
2

In addition to Lucian’s great answer:

Different platforms have different native formats they can use for user interface design in apps. PNGs are the most common UI asset format, and yes, they are bitmaps (zoom in and you’ll see pixels). As Lucian says, that’s fine, as long as they’re being displayed at the correct size.

iOS, Android and other mobile platforms require images at the pixel densities used. This means each element you need an image for, will actually require a set of images at different scales.

iOS

iOS can use PNGs and PDFs natively for UI images. Please note that PDFs are just converted to PNGs by Xcode (they’re not rendered at runtime). If you’d like to use vector assets on iOS, a good option is creating Core Graphics path code, using PaintCode or similar.

https://www.paintcodeapp.com

SVGs can be used on iOS, but not natively (a third party library is required to parse and render them).

Android

Android can use PNGs and WebP for bitmap images, and Android Vector Drawables for vector images. Vector Drawables are very similar to SVGs (a subset of SVG, in a different container). Vector Drawables are great, if you can use them.

https://developer.android.com/training/material/drawables.html

Shipping bitmap assets in your app is totally fine, and actually the most common method used.

0

In theory

  • PNG is a raster format (not vector), which means pixels will always be visible eventually depending on your zoom level. PNG files are only crisp and smooth at their intended size, not when zoomed in. You can save a larger PNG via resize percentage in Save for Web, then scale it done in your code, but there will always be a limit with raster formats.
  • Saving as SVG (vector format) is an alternative for a completely smooth non-pixelated quality.

In practice

  • It depends on what you need to use the images for. If planning to use for an app, research this by googling "app design svg vs png".
  • I am making icons for an app using material design guidelines. I designed a logo in 1080*1920 size. Is it compulsary to always save images in svg format? – user87505 Feb 28 '17 at 12:51
  • You mean like a mobile app I assume? Android, iPhone? Why don't you specify these things when posting? :) I don't do apps so don't know the exact technical requirements. You need to check if your app can work with SVG. If it does, then SVG is definitely smoother than PNG. – Lucian Feb 28 '17 at 13:05
  • Thank You Lucian. I am sorry but from next time i will make sure to completely specify all the necessary details and sorry for your inconvenience. – user87505 Mar 1 '17 at 6:48
  • No worries. If you feel this answer helped in any way, try clicking the up arrow and/or the check icon next to my answer above. Thanks – Lucian Mar 1 '17 at 6:55

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.