Understanding Retina Images in HTML Email

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.

Apple refers to their high-DPI displays as Retina displays since, in theory, the DPI is so high that the human eye can no longer distinguish between individual pixels on the screen. While ‘Retina display’ is an Apple brand name, the term ‘retina’ is often used to describe high-DPI displays from other manufacturers. Likewise, retina is commonly used to refer to images optimized for high-DPI displays, which you’ll learn about below.

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?

Good question!

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="logo@2x.png" 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.

You can even use retina images as background images. Although the implementation is slightly more complex, the principles are the same. 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.

SOME CONSIDERATIONS

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.

Fortunately, there are two techniques to help avoid bloated file sizes in retina images.

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!

Want more great tips for your next email marketing campaign? Subscribe to Litmus Weekly, a weekly digest of the latest and greatest from #emailgeeks around the world.

This post originally appeared on the Litmus Blog.