How webmails block images

Email clients block images. Campaign Monitor and Litmus already have detailed articles explaining when that happens. But I always wondered how that happens. That is, how do webmails block images when they don’t display them by default? So I made a few tests focusing on images displayed with <img> tags. And I mostly identified two cases.

Removing the src attribute

First, there are webmails who completely remove the src attribute from the <img> element. This is how Gmail, Yahoo, AOL, the new Outlook.com (and Office 365), the french webmail of Free (Zimbra) and the mobile webmail of La Poste proceed. Among these, some will add another attribute containing the value of the original src attribute. For example, on the mobile webmail of La Poste, the following code…

<img src="http://i.imgur.com/NBHG9fv.jpg" alt="" />

… will be transformed into:

<img data-src="http://i.imgur.com/NBHG9fv.jpg" alt="" />

The webmail of Free (Zimbra) uses an attribute named “dfsrc”. And AOL uses an astounding attribute named “removedimage__7e53c284-b78b-1234–79c5–196085671d9b__src” (where the code used in the attribute is different for every email).

Gmail, Yahoo and Outlook.com remove the src attribute without any replacement.

Replacing the image

On the other hand, there are webmails that keep the src attribute, but modify its value to indicate the path of a dummy image. This is how the old Outlook.com and the desktop webmail of La Poste proceed. Thus, the previous example would be transformed by the old Outlook.com into:

<img src="https://a.gfx.ms/i_safe.gif" onclick="onClickUnsafeLink(event);" alt="" />

The image used by the old Outlook.com is a 14x16 pixels grey GIF. La Poste uses a 1x1 pixel transparent PNG.

I feel dubitative about this technique as this means that on these clients, alternative texts will never appear when images are blocked. And even worse, the use of an opaque image on the old Outlook.com means that background colors you’d have knowingly added won’t be visible either.

The same email with images blocked on Gmail and the old Outlook.com. Gmail removes src attributes, while the old Outlook.com replaces blocked images with a grey GIF.

There’s one more case I only noticed on Yandex.Mail. This webmail completely removes the <img> tag.

All those differences are very important to keep in mind when working on the render of an email with images blocked because browsers rendering engines behave differently depending on these cases. But this will be the subject of a future article!

This post was originally published on my blog in french in July 2015.