Gestion des images dans les clients de messagerie

De nombreux clients bloquent les images par défaut jusqu’à ce que l’utilisateur clique sur « afficher les images ». Outlook, Gmail (pour les expéditeurs inconnus) et la plupart des clients mobiles utilisant une connexion facturée au volume affichent plutôt un espace réservé. Concevez en partant du principe que les images peuvent ne pas apparaître.

N’intégrez jamais le contenu essentiel (titres, libellés de CTA, prix) dans des images. Utilisez du texte HTML mis en forme avec du CSS en ligne afin que le message reste visible même lorsque les images sont bloquées, que les lecteurs d’écran puissent le lire et que les inversions du mode sombre s’y adaptent correctement.

Chaque <img> doit comporter un attribut alt descriptif. Lorsque les images sont bloquées, le texte alternatif apparaît dans la zone réservée : un texte alt bien rédigé comble le vide visuel en transmettant le message que l’image aurait dû communiquer.

Sans dimensions explicites, l’espace réservé se réduit et la mise en page se déplace lorsque l’image se charge. Définissez les deux attributs ainsi que le style en ligne correspondant afin que la cellule réserve l’espace nécessaire, que l’image soit finalement chargée ou non.

Outlook insère un petit espace sous les images en ligne. Appliquez style="display:block" à chaque <img> pour supprimer cet espace et garantir un rythme vertical cohérent dans tous les clients.

Les anciens clients ajoutent une bordure bleue autour de <a><img></a>. Définissez border="0" dans l’attribut de l’image et style="border:0" en ligne afin que les images liées s’affichent proprement dans les appels à l’action.

Les clients de messagerie ne connaissent pas la notion de « cette page ». Le src de chaque image doit être une URL https:// absolue pointant vers un CDN accessible au public. Les chemins locaux, les chemins relatifs et les URL http:// (contenu mixte) ne se chargent pas, souvent sans produire de message d’erreur.

Utilisez un hébergeur d’images rapide et réparti géographiquement. Certains clients récupèrent les images par l’intermédiaire de serveurs mandataires (Gmail), qui ajoutent leur propre couche de mise en cache : les CDN de première partie évitent de charger les images depuis une origine lente et garantissent un chargement cohérent selon les régions.

Pour les arrière-plans principaux, associez background-image en CSS à un bgcolor correspondant à la teinte dominante. Si l’image est bloquée, la cellule affiche tout de même une couleur adaptée et le texte superposé au bgcolor reste lisible : vous évitez ainsi la catastrophe du texte blanc sur un bloc blanc.

Affichez les images à une résolution 2x, puis réduisez-les avec l’attribut width afin qu’elles restent nettes sur les écrans à haute densité de pixels (DPI élevé) : une source de 600x600 affichée avec width="300" height="300" paraît nette sur Retina. Le coût est une consommation de bande passante accrue : gardez donc des fichiers légers grâce à une compression équivalente à celle de WebP.

Les GIF animés fonctionnent dans la plupart des clients, à l’exception d’Outlook, qui n’affiche que la première image. Concevez cette première image pour qu’elle reste compréhensible seule : le titre, le CTA ou la valeur essentielle doit être lisible même sans le reste de l’animation.

Considérez les images comme une amélioration, et non comme le message lui-même. Utilisez des URL https absolues, définissez width/height/display:block/border:0, rédigez un texte alt pertinent, hébergez les images sur un CDN rapide, associez les arrière-plans à des solutions de repli bgcolor, concevez les images en 2x pour Retina et rappelez-vous qu’Outlook fige les GIF sur leur première image.