Email Marketing and Blocking Images (Part 2)

How to solve problems with images in emails.

Evgeny Fedosov

Chief Executive Officer, Co-founder

Feb 01, 2021

Email Marketing and Blocking Images (Part 2)

It's time to continue our conversation about blocking images in e-mails. Next, we will talk about how to minimize the consequences of the fact that many email services block images in newsletters, turning your beautiful template you created into something incomprehensible and unreadable.

ALT-text and ALT-text style

As I wrote in the first part of the article on the topic of blocking images, using ALT-text is one of the best ways to bypass those services that block the display of images by default. A sufficient number of email services support the use of ALT-text and this is a great way to provide email recipients with more information when images are blocked. In addition, it is a good tool to help get the necessary information from email subscribers with low vision who use screen readers.

Here are two examples. After testing the same email in the email preview system Email2Go, we can see how it will look for users. The first picture shows an email with ALT-text, the second one without ALT-text.

Email with ALT-text Email with ALT-text
Email without ALT-text Email without ALT-text

Adding ALT-text will not be difficult. You just need to add an attribute to the image tag:

<img alt="insert your alt text here" src="image.jpg" width="250" height="250" />

Don't forget to add ALT-text to all images in your email. Exceptions can only be bulleted items or images intended for visual design. In these cases, you can leave the ALT attribute empty:

<img alt="" src="image.jpg" width="250" height="250" />

Keep in mind that you need to specify the width and height of the fields where ATL-text will be located when the images are disabled. You can make ATL-text even better by using CSS and changing the font, color, style, or saturation:

<img style="font-size: 15px; color: #ffffff; font-style: italic; font-weight: bold; height: 250px; width: 250px;" alt="insert your alt text here" src="image.jpg" width="250" height="250" />

Bulletproof Buttons

The CTA (Call to Action) is the most important part of the email. No matter how we improve our design or come up with ingenious texts, it is the CTA that gives the recipient of the letter the opportunity to learn more about the product or service. This is why the CTA should be viewable, even if the images are blocked. Buttons made on the basis of images—in the case of automatic blocking—are not processed, which leads to the user not performing any actions and no increase in the conversion rate. The only way out is to use bulletproof buttons. They consist of a text layer combined with a background color, stylized as a button with an image.

Email2Go bulletproof button example Email2Go bulletproof button example

Example of code for creating such a button:

<table border="0" cellspacing="0" cellpadding="0" width="80%">
  <tr>
    <td bgcolor="#0b534a" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="https://email2go.io" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none;">Waiting for you on  Email2Go</a></td>
  </tr>
</table>

More information about bulletproof buttons can be found in this article by Sergei Crawford.

Balance of Images and Text

Some people prefer to use emails based only on images. I strongly do not recommend doing this. Instead, you should use the right balance between the text and the number of images. This guarantees your emails:

  • availability
  • no problems with spam due to the ratio of the HTML code and the actual test
  • legibility and ease of perception, regardless of whether the recipient's images are blocked or not
Perfect emails are born here Create your email with our free modern code editor with unique features
and test them on dozens of different devises and mail apps
START NOW Left corner Right corner

Conclusions

Since many email services disable images by default, and some subscribers do it themselves, it is impossible to avoid blocking images. The decision on how exactly your emails will counteract this is up to you. Fortunately, you can gain a competitive advantage in mailing lists by using techniques such as ALT-text.

Also, do not forget about one thing that is always so necessary for email marketing—testing the template you created! Email2Go will help you see what form of the email your recipient will receive (including users whose images are blocked). Plus, it will also help you fix any shortcomings and errors.