Designing and calculating image sizes for multiple mobile densities
June 20 2013
Considering there are so many devices with different pixel densities out there, designing and scaling assets for your iOS and Android apps can be confusing.
The quality or sharpness of the image you see on your device's display is down to it's density. Apple iOS devices refer to density as PPI (pixels per inch) and Android in DPI (dots per inch). The higher your density is, the more pixels are crammed into each square inch of your display, resulting in a higher quality, sharper image.
Back in the days before the iPhone 4, and the 3rd generation iPad, all iOS displays had a screen density that's now refered to as non-retina. The first iPad mini is also a non-retina display, but I image that when the next is released they will cram a retina display in there. The latest generation of Apple devices, including the MacBook Pro, have twice the density of their predecessors. This density is refered to as retina. Android phones and tablets span a range of densities, from ldpi all the way up to xhdpi, which is actually a higher density than retina.
There are 5 densities in all:
- ldpi (Android) - 75%
- mdpi (Android) / non-retina (iOS) - 100%
- hdpi (Android) - 150%
- retina (iOS) - 200%
- xhdpi (Android) - 225%
The lower densities will slowly become redundant over the years, meaning that you eventually won't have to cater for them.
Show me the money!
To help you work out the dimensions of your image files, I built this handy tool (based upon the teehan+lax converter, but with added ldpi) to help you out. The Quantum Density Converter allows you to input the width and height for any density, and instantly see the dimensions you would have to scale the graphic to for each of the other densities. You can even toggle between decimal and rounded numbers.
I would recommend you create your assets at xhdpi resolution and then down scale them accordingly.