Images in emails can be your best friend and your worst enemy. On the one hand, they engage the audience with compelling visuals, amplify your brand identity, and compel clicks. But on the other hand, they can stab you in the back with unexpected problems and extra complications. Follow these best practices to ensure your message shows up effectively in customers’ inboxes.
First things first: start a solid approach to coding HTML emails in mind (here’s a primer on that). Without those standards in place, all the care you take with your images is liable to fall apart.
Once you have a clear approach for coding your email, you’ll want to consider some key aspects of coding for images. Because email often relies so heavily on images, missteps here can cost you audience share, erode your brand identity, and torpedo your engagement metrics. Below, we’ll cover the challenges images can present and smart strategies for overcoming them:
Images can make or break your emails—quite literally! If you don’t address potential problems when coding your email, your beautifully designed graphics could wreak havoc on performance. Here are the most common issues you might encounter when using images in HTML emails.
Okay, you know the hurdles you’ll face with the images in your emails. Now here are the techniques you need to leap over them.
You can be certain that images will be blocked for some of your audience, so plan for them from the get-go so that blocked images don’t block your message. That means you need to ensure your key message, value prop, and call to action come through clearly without an image in sight.
Pay attention to both the image size and the file size.
There are pros and cons to every file type; the trick is to choose the one that works best for each individual image. Use this guide from Litmus to dig into the details—here’s the tl:dr:
As long as you keep the dimensions on point and the file size manageable, there are no downsides to using GIFs, and they’re a fun way to enliven your emails with animation. But Outlook doesn’t play nice with them—it will only display the first frame of the GIF as a static image. You have a couple options for a workaround:
Here’s another reason to avoid image-only emails: spam filters give anything with too many images a major side-eye. So when incorporating images into your HTML emails, aim for a text-to-image ratio of 60/40. This should keep you out of the spam folder—and it’s also a good guideline for ensuring you’ve got the key messages in text so they’ll come through if images are blocked.
Be sure to give the complete domain address, directory, and filename for every image in your email—just about every email client requires it. Since it can be easier to use local image references when testing, double-check that you’ve changed them to absolute addresses before sending. Here’s an example of what it should look like in your HTML for an image stored at
While email clients generally support image maps (an image where you can click on different areas to go to different links), in practice they’re prone to causing all kinds of headaches. You have to slice your image into parts, put them into different table cells, then get them to line up properly in every email client—no small feat, and one that will take a lot of extra time and run the risk of breaking up. A few other downsides:
If you use an image as the first piece of content in your email, the inbox experience may suffer. Email clients pull the first piece of content for the inbox preview—and if it’s an image, that preview will be blank. The smart solution is to use preheader text (which is a good practice for improving engagement anyway).
Designing for accessibility ensures you engage everyone in your audience—and alt text is crucial for that. People who use screen readers (which includes those with visual impairments as well as some folks who have certain cognitive challenges or who simply prefer audio content) or an auto-translator rely on alt text to get the information you put in your image. Here are tips for creating awesome alt text:
<img src="https://..." alt="">
You want your buttons to be irresistible—but you must resist the urge to use images for buttons! When your images are blocked (as you know they will be at times), your buttons will go from irresistible to invisible.
You can make compelling buttons with a lot of other techniques instead. The simplest method (which is supported in just about every email client) is a padding-based button. You just pad the table cell, then style the button with HTML attributes and inline CSS.
There are a few other methods that have various pros and cons; head over to Litmus for a breakdown of other options.
Background images are one of the best tools for building emails with compelling graphics that don’t lose effectiveness when those images are blocked. Background images are applied to the background of an email element, so you can place other HTML content on top—like text and calls to action.
It’s a cool design element and, importantly, your text remains readable even if images are blocked. Bonus: you can use an animated GIF as a background image, so you get the engagement of animation without the problems of CSS animations.
There are multiple approaches to coding background images in your HTML email, and, as with anything else, email client support is mixed. The Litmus Ultimate Guide to Background Images in Email will get you started with examples of different ways to use background images, instructions for five ways to implement them, and a breakdown of which email clients support which techniques.
However you go about incorporating background images, be sure to include a fallback color (one that provides enough contrast for your HTML text to be readable!) for clients that don’t support the background images.
If your phone or iPad has a retina display, you know how crisp and bright images can look. Creating retina-ready images might be worth it if a large portion of your audience has retina displays—but it also takes some extra work on your end.
The basic idea is pretty straightforward: retina displays use multiple pixels in an image to create one display pixel. So you can create an image that’s twice the resolution at which it will be displayed, and a retina display will use the additional data to show a more detailed image.
While optimizing your images for retina displays can make your emails look better for some people, there are a few downsides to consider:
So how do you decide if retina-ready images are worth it? Check two boxes: your images are highly detailed and/or colorful and a large percentage of your emails are opened on devices with retina displays. If that lines up for you, Email on Acid has simple instructions for optimizing your images and making them compatible with Outlook desktop clients.
Once your email goes out into the wild, there are so many factors affecting the display that are out of your control—the email client, the device, each individual’s settings. So take the opportunity to control for what you can by optimizing your images so they perform the way you intend.
When you’re tasked with translating an email design into actual workable code, you often have to educate stakeholders whose requests don’t line up with the reality of HTML email development. Here are three useful approaches for getting others on board with image best practices:
Images are powerful, but they’re a double-edged sword. Implement them well, and they can be the backbone of high-performing campaigns. But they also have the power to tank your email’s deliverability and performance if handled incorrectly. As always, test your emails thoroughly—in multiple clients—before sending. And always consider images in the larger context of how you design and code your HTML emails to ensure the experience you’re delivering sticks the landing.