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:

• Blocked images
• Size
• File type
• GIFs
• Text-to-image ratio
• Absolute addresses
• Image maps
• Placement and preheaders
• Alt text
• Buttons
• Background images
• Retina-ready images
• Optimizing
• Stakeholder education

Images in HTML emails: challenges

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.

• Deliverability issues. If you send an image-only email, most spam filters will keep it out of inboxes. You shouldn’t send image-only emails for many other reasons (which we’ll cover below), but if someone asks you to go this route, wave the spam flag!
• Accessibility issues. Images are a black hole for screen readers, translators, and voice assistants. If you put key information in images but neglect to put it in your text, you’re losing audience share. (Alt text is a workaround, but voice assistants don’t usually recognize it.)
• Usability issues. The search function in email clients also won’t see text in an image. So when you send a compelling piece of content and the recipient goes searching for it in their inbox later, they may well come up empty if the key words appear only in images. 
• Performance issues. The longer an image takes to load, the more likely someone will just hit delete. Large images can load slowly (or even stop loading) even if a recipient has a fast internet connection. And if a person is reading your email on their phone, your images might not just load slowly—they also gobble up data in customers’ data plans.
• Display issues. If not coded properly (with attention to how different email clients handle images), your graphics can easily display poorly or mangle your layout—and your carefully designed email lands in the inbox with a depressing thud. 
• Conversion issues. Images are powerful only if customers can actually see them—and the chances that images will be blocked are pretty high. Many clients default to displaying emails with images off, and plenty of folks don’t bother to turn them on. This is an especially pernicious issue for B2B emails, as corporate firewalls are often configured to block images automatically.

Images in HTML emails: solutions

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. 

First, plan for blocked images

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.

• Put your load-bearing information in the email text, even if it’s going to be in an image as well  
• Every time you add an image, consider what will happen to your email when it appears as a blank rectangle—did you lose something crucial? If so, you need to get that info into your text
• Never send image-only emails. As tempting as it is to have the design control afforded by creating one big image, you’re guaranteeing that a portion (possibly a big portion) of your audience will see zilch
• Images often do the heavy lifting when it comes to context, brand identity, and emotional appeal, so make sure those things are reflected in your text as well
• Take extra care when planning B2B emails, since image blocking is even more likely. If a corporate firewall gobbles up your images, does your email still have what it takes to make an impact?
• Create your layout with blank rectangles for the images first, and review it for effectiveness before you add images. And when taking a last look, view the email with images on and with them off
• Here’s an example of an email that works well even if the images are blocked—this is what you’re going for!

Size images right

Pay attention to both the image size and the file size. 

• Width: 600px is the most reliable dimension; it works well on screens with 360×640 resolution (which is the most popular screen resolution across both mobile and desktop), and will play well with other resolutions as well
• Length: you have a lot of leeway here, since email clients are unlikely to get funky with the length of your images. That said, pay attention to how a longer image affects its load time 
• File size: Because images are downloaded when the recipient opens your email, they don’t affect the total size of your HTML code. What they do affect is load time; anything over 1MB is likely to slow things down, especially for your customers on older mobile networks or slower home internet

Use the best file type for your content

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: 

• JPEGs: they’re great for photos and very colorful images, but the downsampling makes images with lots of text or sharp edges get fuzzy
• PNGs: lossless compression makes for crisp text and logos, but resultant larger file sizes can make for slower loading
• SVGs: these vector graphics look great on any screen with a small file size, but they’re only supported in Apple Mail and on iOS devices 

Get around GIF problems

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:

• Make sure the first frame of your GIF conveys what’s most important (the CTA, a product image, etc) and accept that people using Outlook will just see that 
• Use Microsoft-specific conditional code to serve a static image of your choosing for Outlook, while sending everyone else the GIF

Maintain good text-to-image ratio

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. 

Use absolute addresses

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 customer.io/img.jpg:

<img src="https://customer.io/img.jpg">

not

<img src="/img.jpg">

Avoid image maps

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:

• You can only show a single alt tag, which won’t include the links
• They don’t work with responsive images
• They break if the email client autoscales images
• Link tracking may not work

Beware images at the top

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).

Use alt text

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:

• Use unique alt text for every image, even if they look similar. Otherwise your customers are in for a pretty annoying experience as the screen reader says the same thing over and over with every image 
• Keep it concise. Your picture isn’t worth a thousand words, and the effectiveness of alt text plummets if people are listening to a novel. Also keep in mind that email clients include the alt text when images are blocked—a great opportunity to get your message across even without images on!—but it’s limited to the size of the image container.
• Use an empty attribute for images that don’t add information, like divider lines, spacer images, or abstract hero graphics. That will look like <img src="https://..." alt="">
• Style your alt text so that recipients who can’t see images have a better experience. Here’s a guide from Email on Acid 

Images for buttons: hard no

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. 

Leverage background images with live text

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.

Consider retina-ready 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:

• There’s huge variation in the size of mobile displays (from a little iPhone 5S to an iPad), so it’s tricky to nail the correct image size to leverage a retina display on all devices
• Some clients—especially Outlook—can throw a wrench into the works, so you have to spend extra time coding for that contingency
• Retina-ready images have a larger file size, so you risk slow load times and eating up a lot of your customers’ data

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. 

Optimize your images for every device

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.

• Analyze your data to see the clients and devices your audience is actually using (Litmus offers excellent inbox reporting for this purpose). This is especially important in B2B, where trends in each industry can vary wildly from more general usage trends. Believe it or not, some industries still see over 85% of emails opened on desktop—so it would be a waste of time to build complex mobile versions for those audiences
• Assuming a good portion of your recipients are opening emails on mobile, consider using image swapping to serve a different image for mobile and desktop devices so you can optimize for each experience. Here are instructions on that from Email on Acid
• Adjust images based on device type to optimize your images across different mobile devices. You can do this using media queries to either re-size images or just replace them; again, Email on Acid has step-by-step instructions
• Don’t reinvent the wheel if you don’t have to. There are lots of great tools that will optimize images for you. Here are a few of our faves:
  • ImageOptim
  • Photoshop
  • TinyPng

Show stakeholders the way

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:

• Show them exactly what emails look like with images disabled—and walk through the reader’s experience when images are blocked
• Test the email across three different clients—including one that’s particularly finicky—to show the range of customer experiences 
• Run an A/B test to compare the use of images containing text versus background images with live text, and let the results guide your 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.