What You Need to Know About Email Image Blocking
One of the largest problems that campaigns face is email image blocking.
Usually due to their email client’s default setting or a personal preference, images are blocked automatically for many subscribers, leading to campaigns that lack the ability to immediately communicate and make an impact, even looking broken. Talk about a bad first impression!
As a result, it’s extremely important to optimize your emails for images-off viewing — especially considering that 43% of Gmail users read email without turning images on. With this information in hand, it’s more important than ever to make sure your emails are legible and actionable, especially when images can’t be seen.
As with everything email-related, there aren’t standard settings across the board for image blocking. Check out “The Ultimate Guide to Email Image Blocking” for a list of default image block settings for the most popular desktop, mobile, and webmail clients.
How can you prepare for email blocking?
With so many email clients blocking images by default, email designers have to be prepared. Luckily, there are a number of strategies to help combat image blocking anyone can implement.
ALT text + styled ALT text
ALT text (which is short for alternative text) is one of the best ways to get around clients that block images by default. Since many email clients support ALT, it’s a fantastic way to provide some context for subscribers when images are disabled. As an added benefit, ALT text makes your emails more accessible to visually impaired subscribers that use screen readers.
Luckily, adding ALT attributes is extremely easy — all it takes is adding an attribute to the image tag.
You can even take your ALT text to the next level by adding a bit of inline CSS to change the font, color, size, style, and weight. This technique, known as styled ALT text, is a great option for maintaining branding and adding some fun to your images-off view.
Bulletproof buttons
While the copy and design of your campaign can go a long way towards getting users to interact with your email, the most important part aspect is often the call-to-action, or CTA. CTAs should be viewable even when images are disabled. There’s no special treatment for image-based buttons — they are blocked like any other image, preventing users from taking action and converting from your email.
While text links are an option, bulletproof buttons allow you to have a bit more fun.
Bulletproof buttons consist of live text combined with a background color, styled to look like an image-based button. While there are numerous options for creating this type of button (Campaign Monitor’s free bulletproof button tool is a great option) we prefer to use simple HTML and inline styles, which holds up well across most email clients.
Here’s an example that uses this technique.
Balance your imagery and text
While some industries (retail, travel) prefer to use image-based emails to maintain branding and deliver a pretty design, we don’t recommend it for an entire email. Image-based emails don’t take into consideration file sizes for mobile recipients, accessibility for the visually impaired, or the HTML-to-text ratio that some spam filters apply with their algorithms — it also doesn’t leave much room for images-off optimization. For example, check out this email:
Doesn’t really do much, does it? Just a blank screen.
We recommend ditching the image-based email and opting for a proper balance of live text and imagery instead. It ensures that your emails are accessible, eliminates the HTML-to-text ratio spam issue, and allows for the email to be legible and easy to interact with regardless of whether images are present or not.
Background colors
Adding background colors throughout your email, particularly behind images, allows for hierarchy and, to an extent, design to be present in an images-off environment. For example, in this email from ExactTarget, they use an orange background color behind the banner at the top. While it’s not nearly as attractive, the images disabled version has a similar hierarchy due to the use of background colors.
While there are several ways to code background colors, we recommend using the HTML bgcolor attribute with a 6-digit HEX code.
Mosaics & pixel art
If you’re feeling really ambitious, you can get pretty fancy with your images-off optimization through the use of mosaics or pixel art that are created using image slicing and background colors. PizzaExpress is the perfect example of a company that uses this technique like this:
With careful planning, background colors and lots of nested tables, the striped-shirt chef tossing a pizza is still visible, although perhaps slightly pixelated and robotic-looking!
While this type of image blocking optimization doesn’t replicate the original image, it does give subscribers a very good idea of what the image will be if downloaded.
In summary…
With so many email clients blocking images by default, and some subscribers choosing those settings on their own, image blocking is unavoidable. It’s up to you to make your emails stand out regardless of whether images are enabled or not. Luckily, you can earn a competitive edge in the inbox by using techniques like ALT text and background colors so your email can remain legible and actionable in all circumstances.
Additional resources
- Click, Tap, and Touch: A Guide to CTA Best Practices
- Campaign Monitor’s guide to image blocking
- The Ultimate Guide to Styled ALT Text
- A Guide to Rendering Differences in Microsoft Outlook Clients
- The Best Way to Code Background Colors for HTML Email
Want more great tips for your next email marketing campaign? Subscribe to Litmus Weekly, a weekly digest of the latest and greatest from #emailgeeks around the world.
This post originally appeared on the Litmus Blog.
