Comment les webmails bloquent les images

Certains webmails et applications mail bloquent l’affichage des images par défaut. Campaign Monitor et Litmus ont déjà des articles très complets expliquant quand cela arrive. Mais je me suis toujours demandé comment les webmails bloquent les images des e-mails quand ils ne les affichent pas par défaut. Je me suis intéressé principalement au blocage des images appelées depuis une balise <img>. Et j’ai identifié deux écoles.

Tout d’abord, il y a les webmails qui suppriment totalement l’attribut src de la balise <img>. C’est le cas par exemple de Gmail, Yahoo, AOL, Free (Zimbra) et le webmail mobile de La Poste. Parmi eux, certains vont ajouter un autre attribut contenant la valeur de l’attribut src original. Par exemple, sur le webmail mobile de La Poste, le code suivant…

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

… sera transformé en :

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

Free utilise un attribut nommé dfsrc. Et AOL, quant à lui, utilise un étonnant attribut nommé removedimage__7e53c284-b78b-1234-79c5-196085671d9b__src (où le code utilisé dans l’attribut est propre à chaque e-mail).

La deuxième école, ce sont les webmails qui conservent l’attribut src, mais viennent en modifier le contenu en y indiquant le chemin d’une image vide. C’est le cas de Outlook.com et du webmail desktop de La Poste. Ainsi l’exemple précédent sera transformé par Outlook.com en :

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

La Poste, quant à elle, utilise une image d’un pixel sur un pixel en PNG transparent (1×1-trans.png). Je suis assez mitigé vis-à-vis de cette pratique car cela signifie que sur ces clients, les textes alternatifs ne seront jamais affichés. Et pire, l’image utilisée par Outlook.com est grise opaque (i_safe.gif), ce qui masquera les couleurs de fond que vous aurez pu sciemment ajouter pour palier au blocage des images.

Ces différences sont très importantes à avoir en tête quand on travaille sur le rendu d’un e-mail avec les images bloquées, car les navigateurs réagissent différemment selon ces deux cas. Mais cela fera l’objet d’un prochain article !