The following tips will help frontend designers create graphics that work on Android and iOS platforms as well as on other displays/devices that have differing pixel densities.

The difference between pixel density, PTs and DPs

Pixel density denotes how many pixels fit into a physical amount of space — typically an inch. In the past the standard pixel density of a computer monitor was 72 pixels per inch. But over the years the standard increased to 115-160 pixel per inch. Then Apple’s retina display ushered in a new age in display resolution.

By doubling pixel density, the retina display renders much crisper, clearer graphics. However, frontend designers must now double the graphics’ dimensions. Where 100 x 100 px images once sufficed, 200 x 200 px images were now required to fill the same display area with the same crispness and clarity.

So Apple introduced a pixel-density-independent unit of measurement called “points” (pt) for iOS. Pt refers to display area rather than density. If the designer sets the height of a button at 44pt, individual devices multiply pt by the pixel density: 1x for non-retina, 2x for retina, and 3x for the iPhone Plus display

To confuse things further, Android instituted a different measurement unit for high dpi/ppi screens called “density-independent pixel” (DiP or still shorter: dp). The idea is the same as Apple’s, but “dp” is, of course, not an exact equivalent to “pt.”

Learn how this relates to SVG

To serve crisp and clear graphics on devices and platforms using different pixel ratios, frontend designers work with “scalable vector graphics” (SVG). As the name suggests, the format is based on a vector. Hence, it can be resized without blurring as pixel-based graphics often do. Designer can create a graphic with the dimensions of non-retina displays (1x), and then scale it to higher pixel densities when exporting the shape. Adobe Illustrator enables scaling, but Sketch and Inkscape are two vector-based software alternatives.

The Adobe Illustrator dialogue boxes, used for exporting and scaling graphics, look like this:

Export Options for PNGs

Why it Matters

SVG is an indispensable tool for frontend designers who want to serve crisp and clear images on every device across all platforms. Stay tuned for my more detailed article on this topic to appear this Fall/ Winter!