Understanding Retina Images in HTML Email0
Apart from the onslaught of screen sizes, the mobile revolution introduces another interesting challenge for email designers: high-DPI displays. These displays, often referred to as Retina displays (a term coined by the Apple marketing machine), have the power to both enhance any email campaign—or give your subscribers a less-than-stellar email experience.
In this post, we’ll take a look at exactly how high-DPI displays work and what that means for email designers and marketers. After seeing how to implement retina images in your own campaigns, we’ll wrap up by discussing some important considerations for anyone working with retina images.
A Bit of History
Back in 2010, Apple released the iPhone 4. Among other hardware improvements, the iPhone 4 featured what Apple called a Retina display. Apple’s Retina display was one of the first high-DPI, or high dots per inch, displays mass-produced for consumers.
On device screens, DPI refers to the number of pixels a manufacturer can fit into an inch of screen. The higher the DPI, the more detailed and clear images and text on that screen appear.
Although Apple was the first to introduce the Retina display to a mainstream audience, it wasn’t long before other device manufacturers hopped on board. While most companies started with smaller devices like phones, retina screens can now be found on tablets, laptops, and even desktop computers like Apple’s massive 27-inch Retina 5k iMac.
The Need for Retina Images
Learning more about hardware and DPI is all well-and-good, but you may find yourself asking:
What the hell does this have to do with email marketing, Jason?
As marketers, it’s our job to present our brands in the best light possible. While subject lines, copy, and cadence all play an important part in looking good to subscribers, visuals draw people to an email campaign first. After opening an email, our eyes move to the design and imagery before we start reading any copy or tapping calls-to-action.
If you’re not accounting for high-DPI displays, you run the risk of looking careless to subscribers. Because of the way high-DPI displays work, non-optimized images end up looking blurry and pixelated on retina screens. Here’s an example:
As users grow accustomed to retina screens, they expect text and images to appear crisp and clear. If you’re not optimizing your images for high-DPI screens, those users see a degraded email design, which can lead to equally degraded trust in your brand.
Using Retina Images in Email
How exactly can you optimize images for retina screens? The answer, it turns out, is quite simple.
Roughly speaking, high-DPI displays have twice as many pixels per inch than their traditional counterparts. Therefore, if we want our images to look good on those screens, they need to be twice as large so that, when they’re scaled down in the email, there are more pixels for retina screens to display.
Let’s look at an example.
In our emails, we include the Litmus logo at the top. Using HTML, it’s sized so that it displays at 130 by 48 pixels. If we created and saved the logo image at that size, subscribers would see a blurry mess on retina screens:
To keep the logo crisp, we simply create an image at a larger size. In this case, the image file is 276 pixels by 102 pixels, but anything that’s at least double the intended display size works. Then, in our HTML, we use the original, intended display size in the width and height attributes to scale the larger image down:
<img alt="Litmus" src="firstname.lastname@example.org" width="130" height="48" style="font-family: sans-serif; color: #ffffff; font-size: 20px; display: block; border: 0px;" border="0">
On high DPI displays, we get beautiful, crisp, retina images.
Using Retina Images in Outlook
Some versions of Microsoft Outlook still display the retina images at their full size, despite the explicit sizes set by the width and height attributes. To get around this, you can include a max-width rule in the style attribute of the image.
In the example below, we use the width attribute (no height attribute) and the max-width to get retina images working across all email clients.
<img alt="Litmus" src="email@example.com" width="600" style="width: 100%; max-width: 600px; font-family: sans-serif; color: #ffffff; font-size: 20px; display: block; border: 0px;" border="0">
You’ll notice the inclusion of a width style set to 100%. This is a handy trick for making images responsive across different screen sizes. On larger screens, the max-width rule will kick in to constrain the image size, while on smaller screens they will fill 100% of the screen—or container—width.
Can Background Images Be Retina?
Yes, you can use retina images as background images. Although the implementation is slightly more complex, the principles are the same.
The main thing to note is that it won’t work everywhere (but what really does in email?). For retina background images, you should use the background CSS property instead of the background HTML attribute on something like a table cell.
<td style="background:url(img-x2.jpg) center/cover;background-image:url(img-x2.jpg);background-size:100%;background-size:cover;">
The background is set using both the shorthand property and using individual CSS background properties to account for some quirks in Gmail and Android clients. It’s a bit complicated to get into here, but this Community discussion has a great overview of the techniques available to designers looking for gorgeous background images on high-DPI displays.
While doubling the size of your images helps ensure that they display beautifully on retina screens, this technique is not without its drawbacks.
Mobile data plans are expensive and—depending on your location and network connection—slow. As we increase the dimensions of an image, the file size increases, too. That increased size cuts into a subscriber’s data plan and can cause an email to load slowly. Both issues are a big problem and create a less-than friendly user experience.
So keep in mind that not every campaign needs retina images. If you’re using a lot of images in your campaign, or images that are really large, using standard, non-retina images may help provide a better user experience since the images will be quick to download and display in your campaign.
If you do need to use retina images, there are two techniques to help avoid bloated file sizes.
The first—and more complicated—is to use something called compressive images. These are images that are saved at huge dimensions, but very low quality settings.
Most image editing programs allow you to set the quality at which images are saved. In Photoshop, for example, you can adjust the quality of a JPEG using a simple slider:
To create a compressive image, design the image at something around four times the intended size and save it at an extremely low quality setting. While the image looks terrible when viewed at full-size, after it’s scaled down to its intended size in an email, the artifacts shrink down and go unnoticed. And the low quality settings ensure that your file size is kept to a minimum.
The second way to keep file sizes in check is to use a dedicated program to further compress your images after saving them. Applications—many of them free—exist for every operating system that allow you to process and compress images after they are created.
Some of our favorites include ImageOptim, JPEGmini, TinyPNG, Compressor.io, Kraken, and Pied Piper. In most cases, you simply drag and drop—or upload—your images to the program and they compress them. Then, you can upload those optimized images to your ESP or server to include in your retina-ready campaigns.
It’s a Retina World
If recent stats are an indicator, email marketers will continue to see subscribers shift their reading habits to mobile devices. Combined with the trend of manufacturers outfitting devices with high DPI displays, the need for retina images in email campaigns is clear.
As long as you consider file sizes, including retina images is a relatively easy way to upgrade any campaign and put your best foot forward. Stop worrying about blurry graphics and get started with retina images today!
Test your image file-size + load time
With Litmus Checklist you can test your images for file-size, load time, and broken links. Plus, instantly see how your campaigns look in 50+ email clients.