High-definition Images

High pixel density displays are ubiquitous among newer devices, both mobile and not. There’s no denying that these new displays are gorgeous, but they’re not without fault: high-density displays can make images look fuzzy.

The reason is an increase in display PPI, or Pixels Per Inch, the measurement of the number of pixels spread across an inch of screen space. As displays get better and better, this number climbs higher. This increase has doubled the CSS pixel ratio of these displays from 1 to 2, as quirksmode explains here, so that a high-density display now has double the resolution of an older one; in the case of a traditional cell phone screen, you go from a resolution of 480×320 to one of 960×640 instead, on the same 3.5 inches of screen.

The increased definition makes the small images that are common across the web — icons, logos, etc. — look fuzzy and unfocused:

There are several solutions for websites, and a pretty simple one that works well for email; by doubling the size of an image, then constraining its width with the height and width attributes on the img tag, you can serve an image that maintains its sharpness when viewed on new device screens:

    <img src="img/photo_800x800.jpg" height="400" width="400" />

Code-wise, this is a very simple solution, but there are some drawbacks that need to be considered. First, this method has to be implemented by hand on each high-definition image, which can be a tedious task dependent on how many images are present. Second - and more important - because images need to (at least) double in size, there’s increased file size to contend with.

Total file size can increase rapidly in emails with multiple images, and it’s important to keep in mind that some readers on mobile devices have to shoulder the cost for that data. It’s important to strike a balance between the aesthetic fidelity of your email and its total data cost.