Images dans les newsletters : guide pratique

Donnez un rôle précis à chaque image

Une photo de produit peut présenter un nouvel article. Une photo d’événement aide à se représenter le lieu ou l’activité. Un schéma peut expliquer un changement plus clairement qu’un paragraphe. Choisissez l’image selon ce qu’elle aide le lecteur à comprendre dans cet e-mail précis.

Demandez-vous ce qui manquerait si vous la supprimiez. Si elle est seulement décorative, une image plus petite ou aucune image peut laisser davantage de place au message. Si elle montre un détail important du produit, choisissez une vue où ce détail reste visible sur téléphone.

Ce guide concerne les images affichées dans le contenu d’une newsletter. Pour les photos envoyées comme pièces jointes téléchargeables, consultez notre guide de compression des images pour les e-mails.

Gardez les informations essentielles en dehors de l’image

Écrivez le titre, les informations importantes et le lien principal sous forme de texte dans l’éditeur de newsletter, par exemple celui de Moosend. Pour une promotion, indiquez la réduction, les conditions et la date de fin ; pour un événement, la date, le lieu et le lien de réservation. Une image promotionnelle peut compléter ces informations, mais ne devrait pas être leur seul support.

Choisissez le texte alternatif selon le rôle de l’image :

• Une photo qui apporte une information utile : décrivez le détail nécessaire au lecteur, comme la forme visible ou une caractéristique du produit.
• Une image purement décorative : laissez le texte alternatif vide si elle n’ajoute aucune information et n’est pas un lien. Le guide du W3C sur les images décoratives explique pourquoi des descriptions inutiles peuvent gêner les personnes utilisant un lecteur d’écran.
• Une image qui constitue tout le contenu d’un lien : nommez la destination ou l’action, par exemple « Voir le mug bleu », plutôt que de décrire uniquement son apparence. Consultez le guide du W3C sur les images fonctionnelles.

Le texte alternatif ne remplace pas le texte principal de l’e-mail : certaines applications ne l’affichent pas dans toutes les situations. Mailchimp explique ces limites. Notre guide des textes alternatifs propose d’autres exemples.

Adaptez l’image au modèle d’e-mail

Commencez par les dimensions recommandées pour le bloc d’image de votre modèle. Une photo occupant toute la largeur de la colonne et une petite fiche produit nécessitent des fichiers différents. Recadrez une copie pour l’espace prévu sans étirer le sujet, avec l’outil de recadrage si nécessaire.

Distinguez la largeur affichée dans l’e-mail des dimensions du fichier en pixels. Si une photo s’affiche sur 600 pixels de large, vous pouvez comparer des fichiers de 600 et 1200 pixels, en affichant les deux sur 600 pixels. Le fichier plus large fournit davantage de pixels pour un écran haute résolution ; il ne doit pas élargir l’e-mail. Il exige aussi un original suffisamment grand et peut augmenter le volume à télécharger. Ces dimensions sont des exemples : suivez les conseils de votre modèle et comparez les e-mails reçus. Les recommandations de Mailchimp varient selon le modèle et le bloc de contenu.

Vérifiez à la fois que votre service de newsletter accepte le fichier et que l’e-mail reçu l’affiche dans les applications testées. Un fichier importé correctement n’est pas nécessairement bien affiché chez les destinataires. JPEG est un bon point de départ pour les photos ; PNG convient à la transparence et aux éléments graphiques. Mailchimp recommande JPG, PNG ou GIF dans son guide des images pour les modèles d’e-mail. Vérifiez les consignes de votre service avant de réutiliser un fichier exporté pour un site web.

Si vous utilisez un GIF animé, la première image doit être compréhensible même sans l’animation. Certains destinataires peuvent ne voir qu’elle ; le guide de Microsoft sur les animations explique comment les réglages d’animation peuvent produire ce résultat dans Outlook. Ne placez pas une étape nécessaire ou une offre uniquement dans les images suivantes.

Vérifiez les détails des images ainsi que le poids total de leurs fichiers. Plusieurs grandes images peuvent ralentir le chargement de l’e-mail. Notre guide de réduction du poids des fichiers explique comment préparer des copies plus légères.

Exemple : annoncer un nouveau produit

Imaginez une boutique d’articles pour la maison qui annonce un nouveau mug bleu en céramique. Les versions suivantes utilisent la même photo du produit :

Dans la seconde version, recadrez la photo pour que le mug et son anse restent visibles sur téléphone. Si la photo est un lien distinct vers le produit, donnez-lui un texte alternatif adapté et vérifiez sa destination en plus de celle du lien textuel.

Testez l’e-mail tel que le destinataire le voit

L’aperçu de l’éditeur aide à organiser le contenu, mais les applications de messagerie peuvent afficher le même message différemment. Envoyez un e-mail de test depuis votre service de newsletter et ouvrez l’e-mail reçu sur ordinateur et sur téléphone. Incluez si possible les applications utilisées par votre public, comme Gmail, Outlook ou Apple Mail. Le guide de Mailchimp sur l’aperçu et les tests explique pourquoi les deux sont nécessaires.

• Vérifiez le sujet principal de l’image et le recadrage. Les visages, produits et détails importants restent-ils visibles sans déformation ni élargissement de la mise en page ?
• Examinez l’image à sa taille d’affichage. Est-elle compréhensible sans zoom ? Ajoutez aussi les indications nécessaires ou les explications de schémas dans le texte de l’e-mail.
• Essayez les modes clair et sombre lorsqu’ils sont disponibles. Un logo sombre sur fond transparent peut devenir difficile à voir sur un fond sombre. Essayez une version avec un contour contrasté ou un fond uni adapté intégré à l’image, puis vérifiez les deux modes. Le guide de Mailchimp sur le mode sombre traite du contraste des logos et des différences entre applications.
• Consultez le message avec les images bloquées si l’application le permet. Lisez ce qui reste, vérifiez les textes alternatifs et assurez-vous que le lien principal est disponible.
• Ouvrez les liens. Vérifiez séparément les images cliquables et les boutons : leurs destinations peuvent être différentes.

Si une image manque, cherchez la cause

Effectuez ces vérifications dans l’ordre. Outlook classique peut bloquer les images externes, comme l’explique le guide de téléchargement de Microsoft. Gmail peut masquer les images de messages jugés suspects ; consultez les paramètres d’images de Gmail.

1. Vérifiez le chargement des images dans le test reçu. Si l’application propose d’afficher ou de télécharger les images, autorisez-le pour votre propre message de test. Si elles apparaissent, c’est l’application qui les bloquait. La compression ne contourne pas ce réglage.
2. Retrouvez l’image concernée dans l’éditeur de newsletter. Ouvrez son bloc et vérifiez que le bon fichier de la bibliothèque est sélectionné. S’il manque, importez à nouveau une copie conservée et sélectionnez le nouveau fichier. Pour une image hébergée ailleurs, vérifiez l’adresse utilisée par le bloc.
3. Vérifiez l’accès à un fichier externe. Ouvrez l’adresse directe de l’image dans une fenêtre de navigation privée sans vous connecter. Un écran de connexion ou une page de partage n’est pas le fichier image. Utilisez plutôt la bibliothèque du service ou une adresse d’image publique adaptée. La réussite de ce test confirme l’accès depuis le navigateur sans connexion, pas l’affichage dans toutes les applications de messagerie.
4. Examinez les différences entre applications. Si le fichier est accessible mais ne s’affiche pas dans une application, vérifiez d’abord ses paramètres de chargement d’images. Comparez ensuite le format aux consignes de votre service. Essayez une copie JPEG pour une photo ou PNG si la transparence est nécessaire, insérée dans un bloc d’image standard. Si un modèle personnalisé ne fonctionne toujours pas, demandez à son responsable de vérifier le code HTML de l’image.
5. Envoyez un nouveau test après la correction. Ouvrez-le dans l’application concernée. Vérifiez l’image, son texte alternatif actuel et les destinations du lien de l’image et du lien textuel séparé, s’ils existent.

Le guide de dépannage de Mailchimp explique les problèmes d’adresses d’images, d’accès restreint et d’affichage. Suivez les instructions de votre service pour sélectionner ou remplacer les fichiers de la bibliothèque.

Dernière vérification avant l’envoi

• Le recadrage, les détails et le poids du fichier conviennent au modèle.
• Le message principal et le lien fonctionnent sans images.
• Le texte alternatif correspond au rôle de chaque image.
• La première image d’un éventuel GIF fonctionne seule et les logos restent visibles en mode clair comme en mode sombre.
• Le dernier e-mail de test reçu a été vérifié dans les applications pertinentes, y compris les sources des images et les destinations des liens.