3 Best Practices for Optimizing Images In Email Design

At first glance, not much seems to have changed in the last few years when it comes to using images in email. Email standards have not made much progress, and although services change and design sense advances, HTML still works pretty much the same… right? This is practically a law of nature now.

But there have been important changes in just the last few years that are critical to understand (and implement!) in order to get the most out of your email design and user engagement. While not even close to exhaustive, the following are just a few first steps and considerations on the way to optimizing the use of images in email design.

Email Design Tip #1 – Optimize for High Pixel Density Displays

In 2010, Apple released its new Retina display on the iPhone 4. The 326 pixels-per-inch display effectively makes it impossible to discern individual pixels at a normal viewing distance, and that number has only continued to grow – the iPhone 6S Plus has 401 ppi, and nearly every flagship android smartphone coming out this year will have 500+ ppi. With the ever-growing trend toward higher pixel density monitors and mobile devices, the importance of sharp, crisp images is more important than ever.

A normal image displayed at its native size will appear blurry on these high density displays due to the image covering roughly twice the number of pixels without any increase in its clarity. Armed with this information, the prevailing technique is to save the image at twice the resolution needed and then hardcode the height and width at the intended size.

In this zoomed-in example, the left image is displayed at its native 400px width, the right image, sized at 800px width, is resized in the code to 400px. With just a little bit of magnification the clarity of the oversized image becomes clear:

A quick caveat about email clients. If you specifically need to plan delivery to Lotus Notes 6.5 and 7, the width resize will get disregarded completely. Additionally, most versions of Outlook will also disregard dimensions defined solely by CSS, but this can be remedied by defining height and width using HTML attributes in addition to inline CSS.

So instead of only using a style tag:

Give the image a width attribute as well:

For a more advanced method of handling these differences of display size and pixel density, read more about a neat image swapping technique from the folks over at Email On Acid.

Email Design Tip #2 – Design with Blocked-Images In Mind

We’ve spent all this time optimizing our images and code for the devices and email clients used by our subscribers – but what do we do when practically half of all emails are read without images enabled?

“Half” is alarming hyperbole, but not by much – Litmus has already shown that 43% of emails were delivered to inboxes that block or restrict images automatically (prior to Gmail enabling automatic image downloading). While it is not fair to extrapolate this number for all users of all email clients, it does give helpful insight into the large number of your own subscribers who will not view your email with images enabled.

The key to combatting this is what’s known as “Defensive Design,” and it means that you’ll want to give almost as much time to your images-off appearance as you do for the images-on appearance (at least make it more than an afterthought). Gmail switched to downloading images automatically back in 2014, but many email clients still block images automatically, and many users explicitly choose not to receive images in their email. This equates to a pretty simple formula – when email messages are designed exclusively around images, engagement suffers. In essence, try not to rely solely on images for your ROI – that is a losing battle.

One of the most important takeaways from this is to refrain from imprisoning the email’s primary copy and/or call-to-action within an image. Make your primary copy part of the main body text, instead of relegating it to your ALT text or no text at all, and thereby remain in control of how it is presented to recipients. ALT text (more on this below) is still very important for overall engagement, but the key here is to choose your battles and to give yourself as much control as possible over the most important aspects of the message.

Email Design Tip #3 – Image-less emails can still be beautiful (or at the very least, engaging)!

Preparing an email with a simple and clean layout will allow you to communicate your theme and call-to-action regardless of whether or not a recipient views it with images enabled – but it does take some extra work. The two primary choices to be made concerning this problem are 1) employing background colors beneath images/cells in order to maintain brand design language, and 2) using ALT text (and where available, styling that ALT text).

Of course the area beneath or surrounding an image can be filled by giving the table cell or the larger container a background color, but an image itself can be given a CSS background color so that it fills only the exact area of the image. Within the <img> tag, using style=”background-color: #87212E”, change this:

Into this:

That’s a step in the right direction but it doesn’t give us everything we want, so using styled ALT text will continue to punch-up this blocked-image design. Styled ALT text is still even hit-and-miss depending on the email client or web browser, but it serves as just one more way to present a clean and clear message for the greatest number of people. Specifically, Outlook renders ALT text but will not style it (except for Outlook for Mac); and Internet Explorer will not render ALT text for most of the major browser clients including AOL, Gmail, Outlook.com, and Yahoo.

Nonetheless, a bit of tweaking to the img CSS style, using regular font attributes including family, size, and color, can give results that look like this:

As mentioned above, this is all part of what is known as “Defensive Design,” and it is how we are going to navigate the Wild West of email client rendering engines. With so many mitigating factors – desktop, mobile, and browser clients, each using their own rendering engines – email design certainly does not have a one-size-fits-all solution. But with careful planning, building, and testing, you can be sure you’re getting the best return possible on your email campaigns.