Images in Emails: A How-To Guide
As with any digital property, it is crucial that your emails are well-designed if you want people to engage. For years, the way to do this was to create a layout in Photoshop, and then slap it into an HTML document as one image. By default, many email clients render emails without displaying the images. This can be a major problem if the bulk of your content is image-dependent (especially calls-to-action). This doesn’t mean you should avoid images entirely when designing your emails, however. Research has shown that emails containing images have a 42% higher click through rate than those without. Here are four considerations to keep in mind for when you use images in your HTML emails.
1. Create bulletproof buttons for CTAs.
Bulletproof buttons are a great way to make sure your calls-to-action display, regardless of the email client or image settings. “Bulletproof” means these buttons should render roughly the same across all clients and browsers, and any variation should degrade gracefully. There are a few approaches to creating bulletproof buttons. If you’d rather not get into coding, Button.cm offers an easy to use builder that allows you to define text, size, colors, borders, and even radius. On the other hand, if you are curious about what goes into this technique, Litmus offers a great tutorial.. No matter what method you choose, bulletproof buttons are a far better option than including your CTA within an image.
2. Use alt text. Always.
While having text within an image isnt’ ideal, it’s not the end of the world. You can utilize alt text to ensure that, even if your images do not display, backup text will display in its place. As a best practice, this should be done to add descriptors to images even if they don’t contain any text at all. This may provide incentive for the user to turn images on, and it provides an accessibility solution for your readers who may be using a screen reader. If you are concerned with how the alt text will display with the rest of your designed email, you can style your alt text to give it extra visual appeal. This can go a long way towards getting your message across, regardless of how the email client displays it.
3. Mind your image file sizes.
As more and more emails are opened on mobile devices with unpredictable download speeds, it is vital to keep your image file sizes in check. Best practice: use an image only as large as you are going to display. So, resize those images in Photoshop rather than relying on some inline HTML changes. If your file size is too large it can increase the time it takes to render on mobile, or worse, get rejected by the receiving email server for surpassing file size restrictions.
4. Don’t forget the text to image ratio.
For some time, it was thought that having too many images without ample text would cause your emails to get caught in SPAM traps. The folks at Email on Acid decided to put this theory to the test. They discovered that, as long the email had 500 or more characters, the text to image ratio does not effect deliverability. It’s rare that a marketing email would contain fewer than 500 characters, but still, this is a good thing to consider when drafting your content.
So there you have it; your guide to using images in emails. They are a crucial design element for increasing engagement, but be sure to have your bases covered for instances in which they don’t display.
Looking for more information on email marketing? Check out our eBook: How to Optimize your Email Marketing Campaign