6 bonnes pratiques pour optimiser la visibilité des images de vos campagnes emails
Apprenez à améliorer la visibilité des images dans vos emails grâce à des astuces sur la taille, le format et les tests de rendu.
Pour que les images de vos emails s’affichent bien partout, gardez chaque image sous 100 Ko (200 Ko au maximum), choisissez le bon format (JPEG, PNG ou GIF), indiquez toujours leurs dimensions et un texte alternatif, hébergez-les sur votre propre domaine et testez le rendu, avec et sans images.
Les images rendent vos campagnes emailing plus attractives, à condition de les optimiser : certaines messageries, notamment des versions d’Outlook et des messageries d’entreprise, les bloquent par défaut, et une image trop lourde ralentit l’affichage. Voici 6 bonnes pratiques pour des images réellement visibles et efficaces.
☰ Sommaire
1. Maîtriser le poids et la taille des images
Premier point de vigilance : le poids. Une image trop compressée perd en qualité et paraît pixelisée. À l’inverse, une image haute définition de plusieurs mégaoctets est bien trop lourde pour un email : elle ralentit l’affichage, surtout sur mobile. Visez moins de 100 Ko par image, et jamais plus de 200 Ko, pour un message complet de moins de 500 Ko. Les scores de taille de Campaign vous signalent les images trop lourdes dès la conception.
Redimensionnez vos images à leur taille d’affichage (600 pixels de large au maximum pour un email sur une colonne). Pour les écrans haute résolution, vous pouvez enregistrer l’image en double résolution, bien compressée, et l’afficher à la moitié de sa largeur.
Astuce : si vous devez intégrer une très grande image, découpez-la en plusieurs parties pour accélérer son chargement. Moins d’images et des images plus légères, c’est aussi un email plus éco-conçu.
2. Choisir le bon format et respecter le ratio texte/image
Choisissez le format selon le type de visuel :
- JPEG pour les photos ;
- PNG pour les logos, pictogrammes et visuels avec transparence ;
- GIF pour les animations légères (sur Outlook, seule la première image de l’animation s’affiche : rendez-la explicite).
Évitez le WebP, que toutes les versions d’Outlook n’affichent pas encore. Indiquez toujours les dimensions réelles de vos images (attribut « width ») pour qu’elles ne soient pas déformées. Enfin, ne misez pas tout sur les visuels : gardez au moins 60 % de texte pour que votre message reste lisible lorsque les images ne s’affichent pas.
3. Héberger les images sur votre domaine
Pour favoriser la délivrabilité de vos emails, harmonisez les noms de domaine présents dans vos messages, y compris dans les liens qui appellent vos images. Hébergez vos images et documents sur un domaine cohérent avec celui de votre adresse d’expédition, de vos liens et de votre authentification. Des domaines disparates ou peu fiables sont un signal négatif pour les filtres anti-spam.
4. Ajouter un texte alternatif à chaque image
Certaines versions d’Outlook, des messageries d’entreprise et de nombreux utilisateurs bloquent l’affichage des images. Pour ces destinataires, renseignez systématiquement l’attribut alt de chaque balise img : il affiche un texte à la place de l’image. Pour les images cliquables, privilégiez une formulation orientée action (« Découvrir la collection »). C’est aussi une exigence des bonnes pratiques d’accessibilité numérique, indispensable pour les lecteurs d’écran (voir notre article sur la vocalisation des emails).
5. Associer illustrations et boutons d’action
N’encombrez pas votre email d’images, au risque de brouiller le message. Votre objectif est de faire cliquer vos contacts et de les amener à l’action attendue : rien de tel que des boutons d’appel à l’action en texte HTML, avec un libellé explicite (« Réservez votre place », « Découvrir l’offre », « Je m’inscris »…). Contrairement à un bouton intégré dans une image, ils restent visibles même lorsque les images sont bloquées.
6. Tester le rendu sur toutes les messageries
Un email ne s’affiche pas de la même façon d’une messagerie à l’autre. Réalisez régulièrement des tests de rendu, avec et sans images, sur ordinateur et sur mobile, et en mode sombre : un logo sur fond transparent peut y devenir invisible. Corrigez les éventuelles anomalies avant l’envoi.
La création d’un modèle de message réutilisable (template) est aussi conseillée : il garantit un affichage homogène d’une campagne à l’autre et vous fait gagner du temps.
Vous souhaitez soigner la qualité de vos emails avec un modèle prêt à l’emploi ?