High pixel density displays are becoming more and more common, with Apple’s Retina display available on the iPhone 4S, iPad 3, and now the MacBook Pro, and also showing up in devices such as the Samsung Galaxy Nexus. There’s no denying that these new-era displays are gorgeous, but they’re not without fault: high-density displays can make your email ugly.

The reason for that ugliness is an increase in 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 (quirksmode explains here), so that a high-density display now has double the resolution of an older one; in the case of an iPhone 4s 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 we all use 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 either CSS or the width attribute on the img tag, you can serve an image that maintains its sharpness when viewed on new device screens. This solution is simple, and it works consistently across multiple email clients. For an example of this technique, I’ll use our blog’s update email:

The MailChimp Blog email

The email has six small images that get fuzzified. In the header, there’s the MailChimp logo along with the forward and blog icons; in the footer it’s the unsubscribe, forward, and blog icons. Icons in both sections are 24×24 pixels, and the logo is 150×40. At these sizes, and viewed on a Retina display, we get this:

Fuzzy images on a high-density display

Since the CSS pixel ratio of newer displays is doubled, we can double the size of the images to 48×48 and 300×80. On the code side, constrain the images to the original sizes used in the template, and that can be done using the width attribute on the img element:

     <img src="icon_header_blog_48x48.png" width="24" /> 

Simple enough. Apply this technique to each of the small images, and we end up with with a much clearer view:

Images optimized for high-density displays

We could be finished right here, but there’s one issue to be aware of: when you zoom in on the email, you’ll find the same blurring issue we started with, just less severe than it was at first. Depending on the level of zoom the device allows, you’ll see a bit of blurring on a wide variety of image sizes.

I found that the icons in our blog email blurred a bit all the way up to 256×256 pixels on the iPhone 4S Retina display. A 256×256 icon is pretty large, and the file size grows accordingly. That leads to the question of where to stop with the image size. While it’s nice to be able to get rid of the blurring across any display and at any zoom level, you’re adding more to the overall data load burden that your reader has to shoulder. File size may not necessarily matter when they’re at home, on cable internet, but it could be a concern if they’re on a low-tier data plan from their mobile carrier.

With an email that isn’t particularly image-heavy, you may want to chance going for a sharp image at deep zoom levels. If your email is like the MailChimp Blog update, however, you may want to stick to the bare minimum of doubling or tripling the image size, then using media queries to eliminate the need to zoom.