The most important thing to remember about images in email is that they won’t be visible by default for many subscribers. If you start your design with this in mind, it forces you to keep things simple and ensure no important content is suppressed by image blocking. Therefore it’s good practice to avoid Image-Based Emails.
Image-based emails are often practiced as a simple, easy method of delivering a pretty design irrespective of the rendering circus among the array of common email-clients. When we consider image blocking as part of the rendering equation, it’s easy to see how an image-based email could be completely destroyed with a single preference. Furthermore, this doesn’t take into consideration file sizes for mobile/dial-up recipients, accessibility for those visually impaired or the HTML-to-text ratio that spam filters apply.
Avoid spacer images
While the combination of spacer images and nested tables was popular on the web ten years ago, image blocking in many email clients has ruled it out as a reliable technique today. Most clients replace images with an empty placeholder in the same dimensions, others strip the image altogether. Given image blocking is on by default in most email clients, this can lead to a poor first impression for many of your subscribers. Stick to fixed cell widths to keep your formatting in place with or without images.
Always include the dimensions of your image
If you forget to set the dimensions for each image, a number of clients will invent their own sizes when images are blocked and break your layout. Also, ensure that any images are correctly sized before adding them to your email. Some email clients will ignore the dimensions specified in code and rely on the true dimensions of your image.
Provide fallback colors for background images
Outlook 2007 has no support for background images (aside from this hack to get full page background images working). If you want to use a background image in your design, always provide a background color the email client can fall back on. This solves both the image blocking and Outlook 2007 problem simultaneously.
Don’t forget alt text
Lack of standards support means email clients have long destroyed the chances of a semantic and accessible HTML email. Even still, providing alt text is important from an image blocking perspective. Even with images suppressed by default, many email clients will display the provided alt text instead. Just remember that some email clients like Outlook 2007, Outlook.com and Apple Mail don’t support alt text at all when images are blocked.
In summary, we should be giving serious consideration to image-blocking and what we can do about it. It’s natural and reasonable why people disable them, but with the right approach we can improve the experience for our subscribers.