: Photoshop: how to save crisp and smooth PNG files for app design 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

@Twilah924

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.
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.
developer.android.com/training/material/drawables.html
Shipping bitmap assets in your app is totally fine, and actually the most common method used.

Vote Up Vote Down

@Ann6370331

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

Vote Up Vote Down