Email marketing is a tricky task. You never really know how your emails will look in someone’s inbox.
Browsers and email clients have little in common, and most suppress images by default.
Given this widespread practice it’s tempting to forgo email images altogether.
But abandoning images can result in sterile, unexciting content that won’t help keep you in someone’s inbox.
Instead, use these best practices to incorporate images into your email marketing confidently, know that they’ll show up whenever possible and that even if they don’t your email will look great.
Best Practice 1: Use Email Images Sparingly
It may seem like a no-brainer for a guide to using images in your email marketing to tell you that you need to use images, but it’s something that needs to be confirmed.
Because so many browsers and email clients suppress images by default, there is a temptation for email marketers to just leave out the images entirely.
Going image free may be tempting, but it will lead to soulless, unappealing emails that can hurt your brand and click through rate.
Litmus provides this good example of a travel site, HelloTravel, that over-optimized for the no-images view:
This is how the email looks whether images are on or off.
That’s kind of cool, because the email marketer knows precisely how their email will look in everybody’s inbox. But it’s also a problem because if any site needs to use beautiful imagery, it’s a travel site.
Words just can’t convey the same emotional power as pictures of the places they’re promoting in their email.
So, keep at least one strong image in your email, just make sure that you’re happy with how the email looks without it.
Best Practice 2: Include (and Style) Alt Text for All Email Images
Again, a basic reminder: when images don’t show, alt text shows instead. That means each and every image in your email needs descriptive alt text in place.
Basic alt text looks like this:
<img src=”logo.jpg” width=”350” height=”150” alt=”MarketerGizmo”>
It displays as basic text in someone’s email:
Most marketers throw in a short description like the one above and move on. But there are dozens of ways you can style and write these snippets to make them more effective.
<img src=”logo.jpg” width=”350” height=”150” alt=”MarketerGizmo” style=”font-family: Arial; color: #39abcb; font-style: bold; font-size:26px;” >
The difference is night and day:
Note that all the styling needs to be done with in-line CSS, meaning you apply the styles directly in the line of HTML where you include the image. This ensures that the styles will be applied correctly in practically all browsers and email clients.
Before you send emails, make sure to test them with images on and off, so you can tell how the styles you’ve added to your alt text looks with the rest of your content.
Best Practice 3: Create Bulletproof Buttons for Calls to Action
A “bulletproof button” is one that’s created with HTML and CSS, rather than inserted as image. This means that it will display whether images are on or off, and therefore that your call to action will be visible 100% of the time.
DeveloperDrive gives this example:
<td align=”center” width=”300″ bgcolor=”#cf142b” style=”background: #cf142b; padding-top: 6px; padding-right: 10px; padding-bottom: 6px; padding-left: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #fff; font-weight: bold; text-decoration: none; font-family: Helvetica, Arial, sans-serif; display: block;”><a href=”http://www.marketergizmo.com”style=”color: #fff; text-decoration: none;”>MarketerGizmo</a></td>
It displays a button like this:
That button will be visible all the time, because it doesn’t rely on the recipient to enable images. Pretty handy.
Once again, styles like size, color, and font choice are being applied in-line, inside the HTML rather than being called from external CSS classes. This is crucial for the button to display as you designed it.
Best Practice 4: Use Throwback HTML
If, like me, your HTML skills haven’t advanced much beyond your Intro to Computer Science class, email marketing is right up your street.
Nested tables are the safest way to arrange your email content, and that includes images. Setting background colors of table cells, also not a best practice in normal HTML, is a good way to keep some style in your emails without images.
Nested table code gets messy really fast (which is why it’s fallen out of favor in every other location except for emails), but if you keep a careful eye on it you’ll be fine.
A nice way to make sure you’re not missing any tags (like </td> or </tr>) is to immediately put in the closing tag when add the opening one. For example, as soon as you start a table row (<tr>), type it’s end (</tr>) right beneath it. Then add the row’s contents between the tags.
Nervous about creating nested tables for your email images? Check out the W3C School’s HTML Tables Tutorials. They offer good examples as well as a live HTML editor where you can experiment without breaking your own email code.
You can play around with background colors at W3C as well, but this HTML attribute is not nearly as complicated as nested tables.
The HTML looks like this:
And simply puts a red color behind a table cell, like this:
Best Practice 5: Absolute URLs for Email Images
Finally, make sure that you’re using absolute rather than relative URLs to call your email images.
Relative URLs don’t specifically reference the protocol (http:// or https://) or domain (www.marketergizmo.com) where an image is from.
Example: <img src=”images/emails/marketergizmologo.png/”>
This can be a problem for email clients that can’t determine the domain from which the image should be pulled.
Instead, an absolute URL includes all the information about where an image is hosted.
Example: <img src=”http://www.marketergizmo.com/images/emails/marketergizmologo.png/”>
This format will make sure that when your email marketing gets the chance to show off its images, they will actually load.
Conclusion: Emails Need Images, and Images Need Careful Attention
For subscribers who choose to enable the images within your email marketing, show them something awesome for their pains.
For those who are looking at an image-free version, take the time to provide nicely styled alt text for your images.
Using alt text, nested tables, and background colors (all with in-line CSS), will help you hit send without the worry that your message will get lost in translation.