There are a lot of different design techniques you can use in an email campaign. Although animated GIFs, typography, and responsive design are almost commonplace these days, there is one design technique that is often overlooked or misunderstood: background images. What are background images? And how can they be used to help improve an email campaign?
In this guide to background images in HTML email however, there is no guarantee that any of these methods are consistent and will definitely change with new releases of email clients – so as a result is strongly not recommended. It does require extensive HTML expertise and if you have that available you will have to be prepared for running a full programming exercise.
What are background images
Background images are easy to define but, like a lot of things in HTML email, they can be complicated to actually implement. Background images are images that are applied to the background of an element in an email. Instead of being a main focal point of the email, like a hero image, they are more often subtle and complementary to the other content in the campaign.
The major benefit of using background images is that they allow you to place additional HTML content on top of them. Unlike other images, where only the image itself can exist in that space, background images provide layering possibilities, so that you can have additional images, text, or calls-to-action existing within that same space.
A major (and good) side effect of using background images over regular images is that any of the HTML content on top of the background image remains accessible even when images are disabled. Using live HTML text on top of a background image, instead of including that text as part of the image, ensures that your message is still readable by subscribers when images aren’t displayed. It’s a key technique for making better, more accessible HTML emails.
Background images also allow for a wealth of design possibilities that can help set your campaigns apart from the competition. By layering background images and other HTML content, you open up a world of possibilities.
Designing background images
Before you start coding a background image, you first need to design one (or a few). When designing background images, simpler is usually better. Background images are often an addition to other content, not a replacement for it. So you want those background images to enhance rather than distract from the main content in your campaign.
Graphic elements like gradients, patterns, and textures are excellent candidates for background images. They add visual interest to the email without overpowering the rest of the content.
Background Images on mobile
You can also achieve some interesting effects by targeting desktop and mobile devices and adapting background images for those devices.
One thing to keep in mind when designing background images for mobile—especially on high DPI displays—is that you can easily run into issues with really large images. Nearly half of all email opens happen on a mobile device, but larger, retina-friendly images, can often slow down email load times and cut into users’ data plans. You should always optimize your images for mobile.
Additionally, when background images shrink down for mobile devices, you can lose context for your background image if that image contains some vital piece of information. That’s one reason why you should always keep the most important information in an email as live HTML text, which can be better manipulated on mobile and stays visible even when images are disabled. There are a few CSS properties that can be used on background images to help prevent issues on mobile, but they aren’t supported everywhere, so it’s a good idea to design your background images with mobile in mind from the start.
