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.
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="" />
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.
There’s one more case I only noticed on Yandex.Mail. This webmail completely removes the
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.