What is DPI? A Complete Guide for Android & iOS Image Assets

What Is DPI?

DPI stands for dots per inch — a measure of how many physical pixels are packed into one inch of a display. The higher the DPI, the more pixels per inch, and therefore the sharper and more detailed the screen looks at normal viewing distance.

Modern smartphones range from about 160 DPI (low-density budget devices) all the way up to 640 DPI or beyond (flagship Retina / AMOLED screens). If you supply only one image file for all screen sizes, it will either look blurry on high-density screens or waste download bandwidth on low-density ones.

The solution is to bundle multiple copies of every image asset, each scaled appropriately for its target density bucket. Both Android and iOS have well-defined systems for this.

Android Density Buckets

Android groups screen densities into named buckets and expects assets to be placed in matching resource directories. The system automatically selects the closest density match at runtime.

When you design a 24 × 24 dp icon, the dp (density-independent pixel) unit ensures it appears the same physical size on every device. At mdpi, 1 dp = 1 px, so the icon file is 24 × 24 px. At xxxhdpi, 1 dp = 4 px, so you need a 96 × 96 px file.

iOS and the @2x / @3x System

Apple takes a slightly different approach. Rather than named density buckets, iOS uses filename suffixes to select the correct asset. The base file (e.g., icon.png) is used on 1× non-Retina screens, while icon@2x.png targets standard Retina screens (163–326 PPI) and icon@3x.png targets high-density Retina HD displays (401–460 PPI).

In practice, every iPhone released since 2014 uses either @2x or @3x, so you should always supply both. Non-Retina assets are only needed for older iPads or when targeting very broad compatibility.

Flutter and React Native

Flutter uses the same concept under a different name: device pixel ratio. Assets are placed in numbered subdirectories:

assets/
  images/
    logo.png          ← 1x baseline
    2.0x/
      logo.png        ← @2x
    3.0x/
      logo.png        ← @3x
    4.0x/
      logo.png        ← @4x (xxxhdpi equivalent)

React Native follows the same iOS-style naming convention: image@2x.png and image@3x.png. Metro bundler automatically picks the correct file for the running device.

How to Generate All Densities at Once

Manually resizing the same image five or six times for every asset update is tedious and error-prone. App Image Kit automates this workflow:

1. Drop in your highest-resolution base image (ideally at xxxhdpi / @3x size).
2. Adjust background colour, position, and filters in the visual editor.
3. Click Export ZIP. The tool generates all five density variants instantly.
4. Unzip and copy the files into your project's resource folders.

Because all processing happens in the browser, no image data leaves your machine. It works on macOS, Windows, and Linux — no installation required.

Common Mistakes to Avoid

Summary

DPI density is a fundamental concept for any mobile developer. Supplying the correct image assets for each density bucket ensures your UI looks crisp on every screen — from an entry-level phone to the latest flagship. Use a tool like App Image Kit to automate the process and focus on building your app instead of manually resizing files.