HTML Email Images

Images in HTML emails can be really useful at helping to convey the message you are trying to put across, they turn an ordinary plain email into something that can stand out in an already crowded inbox, we all want our email subscribers to act on the message we are sending and images can help to do that, whether it be a ‘20% discount’ type of banner or an image of a location or attraction.

Images off in email clients

The only draw back with using lots of images in your emails is that many email clients are set to ‘images off’ as default, or if you are receiving an email from someone not in your contacts list images are blocked.

This normally would not be a problem, if for instance just your email header wasn’t shown, or perhaps a few small images throughout the copy did not appear. However it does become an issue if the bulk of your email message is made up of one or two big images and little or no text.

For example, below is an email I received to my Yahoo email account recently. By default my images are turned off, so this is how the email displayed when I opened it.

After getting me to open the email with an incentive driven subject line I’m left feeling slightly let down that the email does not contain what it promised.

Let’s see what it looks like with the images on

Quite a bit of a difference I think you’ll agree.

Now this might not seem like a big deal – there is after all a nice button at the top offering me the chance to view the images, but lots and lots of people are worried about their privacy (which is why email clients block images in the first place),  and do not fully understand that it’s probably ok to view the images. So at best your email gets deleted, at worst it gets classed as junk or spam as both Hotmail and Yahoo make that button nice and prominent in their interfaces.

Never send image only emails

So as a rule, never send your email entirely as one image, a good balance of text and images will mean that your message still gets through even if the images are blocked, like in the example below

Email with balance of copy and images

Although a big chunk of the images are blocked I can still understand what they want me to do, I am still able to see that website address and understand what the offer is.

Many ESP have services available that let you check how your email renders in a host of different clients. It’s worth running your campaigns through these every now and again (there is normally a cost involved) to check how your email looks. Of course you could always set up some test accounts and set them up with images off by default and see how your email renders

It’s also worth noting that emails with images off can screw with your open rates. HTML emails place an invisible tracking image (usually about 1 pixel by 1 pixel) that when called from the web server helps your ESP know that the email has been opened,  if images are blocked the image does not get called and an open not registered. (that’s why you can’t tell the open rates of plain text only emails)

Hosting Email Images

Make sure that you host the images on a web server. You can’t embed or attach the images as if you were sending the email to a friend. All image paths should be absolute e.g. http://www.mywebsite.co.uk/image/myimage.jpg and not image/myimage.jpg

So to recap:

• Never send an email entirely made up of images.
• Many email clients block images in email be default – especially from non contacts.
• A balance of text and images usually works best
• Test your email in different email clients with images on and images off
• If your ESP provides a service to test how your email renders in different email clients, use it regularly to test your creative
• Remember that blocked images can mess with your open rate metrics
• Always host the images on a web server, never embed or attach, use absolute paths