Images in HTML Email

• By Jess Brown | Sep 13, 2018

Here are some tidbits of knowledge for putting images in your HTML email.

Each email client (the program used to read the email) requires the user to choose their settings for whether or not to automatically download the images. This is for security and cannot be overridden.

Live text should not overlap images. Many email clients have a very hard time getting background images with text on top to show up. You can get around this by putting the text in the image before it's exported, but that can cause problems/extra work if you need localization/translation for your email.

Background images in general are not a reliable way to add images to email, since many clients don't support them. The only time I use them are for putting patterns in the background—since it doesn't affect the viewer whether it's there or not, it acts more of a nice detail for those who can see it. Those who can't simply get the solid fallback color.

<table ... style="background: #174A7F url('http://revamp-design.com/68/kt/pyramid-pattern-blue.png') repeat;">

Choose a "fallback" color so that at least that area will have a color when the image fails to load or the user's settings are set to not load the images. Alt text styling can also add meaning to broken images. Put your styles inline on the image tag:

<img ... style="background-color: #158bae;">

Each image needs to be hosted on an external server for everyone to view it reliably.

<img src="http://revamp-design.com/images/logo_dark.png" style="background-color: #158bae;">