Le bon affichage des images dans une campagne d’emailing est l’un des principaux challenges de ce type d’opération marketing. Un message qui s’affiche mal peut potentiellement ruiner une opération, aussi bien construite soit-elle. Il est également devenu plus courant pour les abonnés d’utiliser leur appareil mobile pour consulter leurs emails. Lorsqu’un email uniquement composé d’images ne se télécharge pas complètement, le destinataire ne voit qu’une suite de cadres vides, comme sur la capture en tête d’article.
Pourquoi les images ne s’affichent-elles pas dans mes emails ?
Deux cas de figure. Côté lecteur (Gmail, Outlook…) : un réglage bloque le téléchargement des images externes, la connexion est lente, ou l’expéditeur n’est pas dans les contacts approuvés ; il suffit en général de cliquer sur « Afficher les images » ou d’autoriser l’expéditeur dans les paramètres. Côté expéditeur d’emailing : une partie des destinataires ne verra jamais vos visuels, il faut donc concevoir des emails lisibles sans images (texte ALT stylé, boutons en HTML, vrai ratio texte/image).
Il est donc toujours pertinent de s’assurer que vos emails soient lisibles et exploitables, surtout lorsque les images ne sont pas visibles.
Ce qui a changé : proxys d’images, protection de la vie privée et mode sombre
Le paysage du blocage d’images a beaucoup évolué :
- Gmail affiche les images par défaut depuis fin 2013, mais les sert via son propre proxy (googleusercontent.com). L’utilisateur peut toujours activer « Demander confirmation avant d’afficher des images externes » dans ses paramètres, et Gmail désactive les images dans les messages jugés suspects ou classés en spam.
- Apple Mail précharge les images via un proxy lorsque l’utilisateur active la protection de la confidentialité (Mail Privacy Protection, introduite avec iOS 15). Conséquence pour les marketeurs : des taux d’ouverture gonflés et une localisation masquée, mais des images généralement visibles.
- Outlook (application Windows classique) continue de bloquer les images externes par défaut pour les expéditeurs inconnus : le texte ALT y reste indispensable, surtout en B2B.
- Le mode sombre ajoute un nouveau défi : certains clients inversent les couleurs et peuvent rendre illisibles les logos sombres sur fond transparent. Prévoyez des visuels testés sur fond clair et sombre.
La conséquence pratique ne change pas : une partie de vos destinataires lira toujours vos emails sans images, que ce soit par choix, par réglage d’entreprise ou à cause d’une connexion lente. Les techniques de cet article restent donc d’actualité.
Les paramètres par défaut des services d’email les plus populaires
Il n’existe pas de paramètres standard pour le blocage des images. Ci-dessous, nous avons décrit les paramètres de blocage des images par défaut pour les clients de bureau, webmail et mobiles les plus populaires. En outre, nous avons inclus la prise en charge du texte ALT et du texte ALT stylé. Ces attributs HTML sont un must-have dans le monde du courrier électronique. Lorsque les images sont désactivées le texte rempli dans l’attribut ALT (qui est l’abréviation de texte alternatif) est souvent visible à la place de l’image.
Navigateur de bureau
| Email Client | Images bloquées par défaut | Rend le texte ALT | Rend le texte ALT customisé |
| Apple Mail |
 |
 *
|
*
|
| Outlook (versions récentes, Windows & Mac) |
|
|
|
| Outlook for Mac (versions récentes, désormais intégrées à Microsoft 365 pour la plupart des utilisateurs) |
|
|
|
| Thunderbird |
|
* |
*
|
* Les images sont activées par défaut, mais ont été désactivées manuellement à des fins de test.
À noter que tous les clients Outlook affichent les images pour les expéditeurs approuvés. Si vos abonnés ajoutent votre e-mail à leur carnet d’adresses, les images s’afficheront automatiquement.
Webmail
Les fournisseurs de Webmail ont tous leur propre approche lorsqu’il s’agit de bloquer l’image, ainsi que la prise en charge du texte ALT stylé.
| Email Client |
Images bloquées par défaut |
Rend le texte ALT |
Rend le texte ALT customisé |
| AOL Mail (Chrome) |
|
|
|
| AOL Mail (Firefox) |
|
|
|
| AOL Mail (Edge) |
|
|
|
| Gmail (Chrome) |
|
*
|
*
|
| Gmail (Firefox) |
|
*
|
*
|
| Gmail (Edge) |
|
*
|
|
| Google Workspace (Gmail, Chrome) |
|
*
|
*
|
| Outlook.com (Chrome) | Parfois |
|
|
| Outlook.com (Firefox) | Parfois |
|
|
| Outlook.com (Edge) | Parfois |
|
|
| Microsoft 365 (Outlook, Chrome ou Edge) | Parfois |
|
|
| Yahoo! Mail (Chrome) |
|
|
|
| Yahoo! Mail (Firefox) |
|
|
|
| Yahoo! Mail (Edge) |
|
|
|
| GMX (Chrome) |
|
**
|
**
|
| Web.de (Chrome) |
|
**
|
**
|
| Freenet.de (Chrome) |
|
*
|
*
|
| Mail.ru (Chrome) |
|
*
|
*
|
| Orange.fr (Chrome) |
|
|
|
| SFR.fr (Chrome) |
|
|
|
* Les images sont activées par défaut, mais ont été désactivées manuellement à des fins de test.
** Les images sont activées par défaut et ne peuvent pas être désactivées. Cependant, dans GMX et Web.De, tous les messages du dossier Spam ont des images désactivées. Et, lorsque c’est le cas, les images sont réduites et le texte ALT n’est pas supporté.
Bien que tous les fournisseurs de messagerie Web prennent en charge le texte ALT, la prise en charge du texte ALT customisé dans les messagerie Webmail dépend du navigateur utilisé. Vous pouvez rendre le texte ALT customisé dans les versions actuelles de Chrome, Firefox et Edge. Concentrez vos tests sur Edge, Chrome, Firefox et Safari, les navigateurs couramment utilisés aujourd’hui.
AOL Mail / images désactivées (Chrome)
Outlook.com présente des choses bizarres lorsqu’il s’agit de bloquer une image. Plutôt que de bloquer toutes les images par défaut, Outlook.com prétend bloquer le contenu venant des expéditeurs suspects. Cependant, il n’est pas clair comment ils déterminent qui est «suspect» par rapport à qui est «approuvé». Les utilisateurs ont également la possibilité de bloquer les images pour toute personne qui ne figure pas dans la liste des expéditeurs approuvés dans leurs paramètres Outlook.com. Outlook.com traite ces deux types de filtrage de contenu différemment: en bloquant les images (mais en affichant du texte ALT) pour les expéditeurs suspects tout en utilisant des cases grises pour masquer les images des utilisateurs dont les paramètres de blocage du contenu sont encore plus stricts.
Gmail ne bloque plus les images par défaut depuis plusieurs années, ce qui facilite l’affichage des emails et le suivi des ouvertures. Cependant, la mise en cache des images par le proxy de Gmail peut parfois entraîner des problèmes d’affichage ou de suivi. Et un email trop chargé en visuels augmente aussi le risque de finir dans l’onglet Promotions de Gmail.
Mobile
Les clients mobiles ont un excellent support pour le texte ALT et le texte ALT de style, ce qui est une excellente nouvelle pour les concepteurs !
| Email Client | Images bloquées par défaut | Rend le texte ALT | Rend le texte ALT customisé |
| Android Email (client natif ou applications populaires comme Gmail et Outlook) |
|
|
|
| AOL Mail (Navigateur Android) |
|
|
|
| AOL Mail (Navigateur Iphone) |
|
|
|
| Gmail (navigateur Android) |
|
*
|
*
|
| Gmail (navigateur Iphone) |
|
*
|
*
|
| Gmail app (Android) |
|
*
|
*
|
| Gmail app (iOS) |
|
*
|
*
|
| iOS (client natif, versions récentes) |
|
*
|
*
|
| Outlook.com (navigateur mobile) | Parfois |
|
|
| Yahoo! app (Android) |
|
|
|
| Yahoo! app (iOS) |
|
|
|
| Yahoo! Mail (navigateur mobile) |
|
Parfois | Parfois |
* Les images sont activées par défaut, mais ont été désactivées manuellement à des fins de test.
Quelques « bizarreries » subsistent. Un texte ALT trop long pour tenir dans les dimensions réservées à l’image peut être tronqué, voire ne pas s’afficher du tout : restez concis. Outlook.com bloque également les images par défaut dans les navigateurs Android et iPhone, en suivant le même modèle de blocage des images que Outlook.com sur les navigateurs de bureau. Enfin, certains utilisateurs Yahoo! qui lisent leurs e-mails dans le navigateur Android peuvent rencontrer une tactique de blocage d’image spécifique. Le courrier bloque toutes les images, les couleurs d’arrière-plan, les liens, etc. et ne restitue que le texte en version HTML. Oui, vous avez bien entendu, seulement la version HTML (pas la version texte).
Lorsque les abonnés cliquent sur le message « Afficher le message HTML complet », l’e-mail s’ouvre et, bien que le texte ALT customisé et le reste des attributs CSS et HTML se chargent, les images ne le font pas.
En raison du comportement étrange du bloqueur d’images sur Yahoo, un bon équilibre entre le texte, les images et le texte ALT, aiderait à résoudre ce problème.
Comment « combattre » le blocage d’images ?
Une partie de vos destinataires lira toujours vos emails sans images : les concepteurs d’email doivent être préparés. Heureusement, il existe un certain nombre de stratégies pour aider à lutter contre le blocage des images.
Texte ALT + Texte ALT customisé
Mentionné précédemment, l’utilisation du texte ALT est l’un des meilleurs moyens de contourner les messageries qui bloquent les images par défaut. Étant donné que de nombreux clients de messagerie prennent en charge l’attribut ALT, il s’agit d’un moyen fantastique de fournir un contexte aux abonnés lorsque les images sont désactivées. En outre, le texte ALT rend vos emails plus accessibles aux abonnés malvoyants qui utilisent des lecteurs d’écran.
Pas de texte ALT
Texte ALT non customisé
Heureusement, l’ajout de texte ALT est extrêmement simple: il suffit d’ajouter un attribut à la balise image:
Toutes les images présentes sur votre email ont besoin de l’attribut ALT pour améliorer l’accessibilité à votre message. Cependant, toutes les images ne nécessitent pas de texte ALT. Par exemple, des images avec des puces ou des images utilisées uniquement à des fins de conception visuelle. Dans ces cas-là, l’attribut ALT peut rester vide.
Il est important d’inclure des valeurs de hauteur et de largeur afin de créer une zone d’espace réservé pour le texte ALT dans lequel les images doivent être désactivées. Vous pouvez même amené votre texte ALT au niveau suivant en y ajoutant du CSS en ligne pour changer la police, la couleur, la taille, le style et le poids.
Cette technique, connue sous le nom de texte ALT customisé, est une excellente option pour maintenir l’image de marque et ajouter un peu de peps à vos images.
Les boutons
Bien que la conception de votre campagne puisse faire beaucoup pour inciter les utilisateurs à interagir avec votre message, la partie la plus importante est souvent l’incitation à l’action, ou CTA. Les CTA doivent être visibles même lorsque les images sont désactivées. Il n’y a pas de traitement spécial pour les boutons basés sur l’image: ils sont bloqués comme n’importe quelle autre image, ce qui empêche les utilisateurs d’agir à partir de votre courrier électronique. Alors que les liens texte sont une option, les boutons vous permettent d’avoir un peu plus de plaisir et de rester en ligne avec votre image de marque. Les boutons se composent de texte combiné avec une couleur d’arrière-plan afin de ressembler à un bouton basé sur une image. Bien qu’il existe de nombreux générateurs de boutons compatibles email (comme ceux proposés par des solutions modernes telles que Stripo, BeeFree, Litmus ou encore des plateformes d’emailing intégrant directement ces fonctionnalités), il est recommandé d’utiliser des styles HTML robustes, largement adoptés et testés pour la compatibilité avec la majorité des clients de messagerie.
Voici un exemple d’une récente campagne d’emailing qui utilise cette technique. Vous pouvez consulter le lien Scope pour voir le code en action.
Ce que vous ne voyez pas
Ce que vous voyez
L’équilibre entre image et texte
Alors que certaines industries (commerce de détail, voyages) préfèrent utiliser des emails basés sur des images pour maintenir l’image de marque et offrir un joli design, nous ne le recommandons pas pour un email entier. Les emails basés uniquement sur des images ne tiennent pas compte de la taille des fichiers pour les destinataires mobiles, de l’accessibilité ou du rapport HTML / texte que certains filtres anti-spam appliquent avec leurs algorithmes. Par exemple, consultez cet e-mail de JCrew.com:
L’email est apparu entièrement vide lorsque je l’ai ouvert pour la première fois. En effet, le design est uniquement composé d’images. En outre, le texte ALT répétitif empêche les utilisateurs de différencier les sections du corps de l’email. Nous vous recommandons d’abandonner l’email basé uniquement sur les images et d’opter pour un bon équilibre de texte et d’images, dans un gabarit adapté aux contraintes des clients mail (voir notre guide sur le format idéal d’un email). Cela garantit que vos emails soient accessibles, élimine le problème de spam lié au rapport HTML / texte et permet à l’email d’être lisible et d’interagir facilement. L’email de HelloTravel est un bon exemple. Ils utilisent beaucoup de texte ainsi que des boutons afin de lutter contre le blocage des images:
Ce que vous ne voyez pas
Ce que vous voyez
C’est certainement un cas extrême puisque HelloTravel n’utilise aucune image – ils utilisent du texte, des couleurs d’arrière-plan et des boutons – mais l’email reste presque le même quand les images sont désactivées.
Couleurs d’arrière-plan
L’ajout de couleurs d’arrière-plan dans l’ensemble de votre email, en particulier derrière les images, permet à la hiérarchie et à la conception d’être présente dans un environnement sans images. Par exemple, dans cet e-mail de Salesforce Marketing Cloud, une couleur d’arrière-plan orange est utilisée derrière la bannière en haut. Bien que ce ne soit pas aussi attrayant, la version avec images désactivées a une hiérarchie similaire en raison de l’utilisation de couleurs d’arrière-plan.
Ce que vous ne voyez pas
Ce que vous voyez
Bien qu’il existe plusieurs façons de coder les couleurs d’arrière-plan, l’utilisation du CSS en ligne (style="background-color:#xxxxxx;") reste la méthode la plus compatible et la plus largement adoptée dans les emails modernes.
Mosaïque et Pixel Art
Si vous vous sentez vraiment ambitieux, vous pouvez vous faire une idée de l’optimisation de vos images grâce à l’utilisation de mosaïques ou de pixel art créés à l’aide du découpage d’image et des couleurs d’arrière-plan. PizzaExpress est l’exemple parfait d’une marque qui utilise cette technique:
Ce que vous ne voyez pas
Avec une planification minutieuse, des couleurs de fond et beaucoup de formes imbriquées, le chef avec une chemise à rayures jetant une pizza est encore visible, bien que peut-être légèrement pixélisé et robotique. Bien que ce type d’optimisation de blocage d’image ne reproduise pas l’image originale, cela donne aux abonnés une très bonne idée de ce que sera l’image si elle est téléchargée, ainsi que du contexte et du contenu de l’e-mail. Cette technique fonctionne mieux lorsqu’il n’y a pas de texte ALT visible sur certaines images, ce qui peut avoir un impact sur l’accessibilité. Donc, il est important de peser les avantages et les inconvénients à utiliser cette technique pour votre public.
Conclusion
Même si Gmail et Apple Mail affichent désormais la plupart des images par défaut, le blocage reste une réalité : Outlook en entreprise, réglages de confidentialité, dossiers spam et connexions lentes. Heureusement, vous pouvez gagner un avantage concurrentiel dans la boîte de réception de vos prospects en utilisant des techniques comme le texte ALT et les couleurs d’arrière-plan afin que votre courriel puisse rester lisible et exploitable en toutes circonstances.
Pour aller plus loin :
