If there is one rule of thumb when it comes to coding HTML email, it is to remember that coding an email is not like coding a website. There are many attributes that, while they seem pretty obvious they should work, they actually do not. One of these attributes is a background image.
Background images in HTML email templates have long been acknowledged as inconsistent in their rendering across email clients. While modern email clients (such as those on iOS devices) may display them correctly, more traditional desktop email clients, like Outlook, offer absolutely very little support. Modern web clients like Gmail have recently implemented background image support, ‘background-position’ is still not supported. Hotmail, in the meantime, offers very limited support on this.
Many users feel that background images are important features, there are a few factors that should be taken into consideration before using a background image in an email:
- Remember that many email clients offer a “preview pane,” which may not render the image correctly. This could cause your background image to look distorted.
- Your campaign should include an equal image-to-text ratio. CakeMail offers a testing tool called SpamAssassin, which will help you analyze your image-to-text ratio. Here are a few things to aim for:
- A maximum of 40% image coverage
- A minimum 60% text coverage
- More than 3 images in the page – if any at all.
- Not all images touching
- At least 400 characters of text
As per anti-spam law, all emails must contain some form of text (even if it a simple “hello”). Image-only emails will not display properly and are almost certain to be flagged as spam.
- Always assume that the majority of your readers will use an email client that will strip out your background image. Here are a few design tips in case that happens:
- Give your table a background color that matches the background image as close as possible.
- Make sure there is enough contrast between your text and the background image/color in case the background image is stripped out.
If you would like more information on background image support across all email clients, take a look at The Email Standards Project homepage.
