Dans le secteur de l’email marketing, 3 pensées ou écoles dominent.
- École n°1 – l’email intègre un carrousel d’images, les gifs s’animent, les boutons possèdent de beaux coins arrondis, la vidéo est au sein du message.
En fait, l’email tient à la fois de la plaquette (flyer) et du show commercial.
Le problème, le message a un très mauvais rendu dans près de 100 % des messageries des destinataires. - École n°2 – ses adeptes plaident pour un canal email épuré : une simple communication entre 2 personnes.
Les messages sont élaborés avec du texte et des liens en clair. - École n°3 – un mélange de texte et les images indispensables.
C’est une réalité, certains secteurs ont besoin d’images.
Le mélange du texte et des images
Chaque école défend sa chapelle.
Pour ma part, je travaille avec mes clients sur les solutions 2 et 3. Si vous êtes de l’école 1, je vous invite à passer votre chemin et à trouver un autre prestataire.
Je reviens au cas numéro 3, un email mélangeant du texte et des images.
Ces dernières sont en mesure d’améliorer la lisibilité du message, de le rendre plus attrayant.
Néanmoins, elles sont aussi une source de dangers, d’erreurs.
Je vous propose de voir ensemble 10 erreurs à éviter sur l’emploi des images.
I. Erreur n°1 – penser que tous les formats sont supportés
L’email semble être un canal facile. Mais la vérité est tout autre, vous prenez conscience au fur et à mesure de toute sa complexité.
Tout d’abord, une idée clé à retenir, vous faites des tests : le rendu de votre email est parfait dans votre messagerie.
Ce n’est pas évident que tous vos destinataires verront votre message d’une manière identique et semblable à celle que vous avez vue.
I.1 Le rendu de l’email
Le rendu ou la vision de l’email dépend :
- de l’équipement de lecture : ordinateur, mobile ou tablette ;
- de la messagerie de lecture et des versions utilisées : FAI, Webmails, logiciels de messagerie ;
- des add-ons (petit logiciel de rajout sur votre navigateur) pour une lecture à partir d’un navigateur Internet qui sèment parfois le bazar et changent l’aperçu.
Ainsi, vous ne savez jamais comment votre liste verra le message.
I.2 Les 3 formats d’images les plus lisibles
De toutes les façons, tous les formats d’images ne conviennent pas à une campagne d’emailing.
Pour obtenir un rendu optimal dans l’ensemble des messageries, les extensions suivantes sont à privilégier afin d’éviter les erreurs de visualisation :
- Jpeg – ce sont essentiellement des photos. Une qualité professionnelle est possible, le nombre de couleurs se décline jusqu’à 16,7 millions de possibilités.
- PNG – des images de petite taille tels que des logos et ou des icônes, l’extension supporte la transparence.
- Gif – ils concernent les icônes, les pictogrammes et les logos simples.
Attention, tout de même, les gifs animés ne sont pas toujours bien supportés dans les messageries professionnelles de Microsoft.
I.3 Le format WebP et l’email marketing
Pour poursuivre, vous utilisez ce superbe format WebP. Vos images risquent de rester confidentielles ou de perdre leur transparence. Même Gmail dont la maison mère est pourtant à l’origine de ce format, transforme le format de l’image initale WebP en Jpeg, d’où une perte de qualité ou de transparence.
Mais quel est donc l’objectif de Google avec les images de type WebP ?
Conserver une bonne qualité d’image tout en réduisant leur poids de 25 % à 30 % afin d’optimiser la vitesse de chargement de votre site web.
L’objectif de réduire le poids des images dans l’Email Marketing viendra sans doute plus tard pour Google.
Pour percer tous les secrets des formats dans une stratégie d’Email Marketing selon l’environnement de lecture, le site Caniemail.com est une mine d’or.
En bas de la page, consultez la rubrique Image Formats : Caniemail.com
II. Erreur n°2 – un seuil trop élevé de l’ensemble du poids des images
II.1 Le poids de la composition
Le poids de l’image en elle-même ne s’intègre pas dans celui de la composition.
Les éléments de la description, d’affichage de l’image… par contre, y participent.
Ils concernent le poids du code utilisé pour :
- intégrer l’image,
- indiquer sa taille, sa légende, sa bordure si elle existe.
Dans tous les cas, pour une délivrabilité maximale, le poids de la composition est dans les 50 ko au plus.
II.2 Le poids des images de la composition
Et pour le poids des images, quelles sont les préconisations sur le sujet ?
En environnement Apple, elles se téléchargent avant même l’ouverture du destinataire.
Dans un environnement professionnel Microsoft, par défaut, les images se téléchargent après leur activation.
Sur une messagerie Gmail avec une utilisation de Chrome, elles se téléchargent à l’ouverture de l’email.
C’est le cas, le plus défavorable, en cas d’un affichage lent.
Lorsque vous ne connaissez pas les environnements de lecture de vos destinataires, il vous faudra partir du cas le plus défavorable.
Les internautes ne sont pas très patients, 3 à 4 secondes d’attente sont un maximum.
Votre message ne s’affiche pas tout de suite.
Ils auront tendance à abandonner avant la fin du téléchargement ou à mettre le message directement à la poubelle.
Deux événements catastrophiques pour votre délivrabilité : une erreur à éviter par tous les moyens possibles.
Les tests effectués sur le sujet montrent qu’une limite de 800 ko pour l’ensemble des images de la composition est un excellent seuil.
Dans tous les cas, 1 Mo d’images au plus est la ligne rouge à ne pas dépasser.
III. Erreur n°3 – oublier d’optimiser les images
Nous avons vu que le poids maximal de l’ensemble des images ne doit pas dépasser les 800 ko pour éviter un abandon ou une suppression pure ou simple de la part du destinataire du message.
Pensez donc à optimiser vos images pour éviter de dépasser ce seuil.
Redimensionnez vos images.
La largueur en pixels d’une composition sur un ordinateur est d’environ 600 pixels de largeur et de 320 pixels sur un mobile.
Réalisez des images dans cette gamme de taille ou légèrement plus petite.
Il existe une exception à cette règle, nous la verrons par la suite.
Pensez qu’en environnement mobile, l’image sera rétrécie.
Deux outils à connaître pour redimensionner vos images :
IV. Erreur n°4 – une qualité d’image insuffisante
Pour les formats PNG et les gifs, lorsque l’image est compressée, la qualité reste identique.
Il n’en est pas de même pour les jpeg, une qualité de 72 dpi représente un bon seuil.
Pensez donc à tester la qualité de vos images avant l’envoi.
IV.1 Les écrans Retina
Pour conclure sur cette erreur, je vous parle des écrans Retina d’Apple, une exception de poids à prendre en compte…
Les écrans Retina sont une ligne d’écrans à cristaux liquides de haute résolution d’Apple.
« Retina » est une marque déposée par Apple […].
La définition supérieure de l’écran Retina augmente la visibilité des images et améliore le confort visuel de l’utilisateur.
Wikipédia
Les images pour les écrans Retina possèdent 2 fois plus de pixels comparés à ceux des écrans traditionnels.
Vous ne travaillez pas vos images pour cet équipement, elles seront agrandies et donc floues.
Il existe une petite astuce pour cet équipement, doublez la taille de vos images.
Votre image s’affiche sur un écran Retina sur 600 pixels de largeur et 200 pixels de hauteur.
Vous téléchargez des images de 1200 pixels de largeur et de 400 px de hauteur.
Dans le code, il vous suffit d’indiquer d’afficher une image de 600 pixels :
<img src= »monimage.jpg » width= »600″ height= »200″ style= »display:block; » border= »0″>
Ainsi, les images sur les Retina et dans les autres environnements s’afficheront parfaitement.
Pour limiter le poids, vous augmentez le taux de compression de l’image initiale.
Exemple au lieu de 40 %, vous demandez 80 %.
Deux outils de compression bien utiles : Compressor.io ou Tinyjpg.com
V. Erreur n°5 – l’oubli du texte alternatif
Le texte de l’image, le texte alternatif, l’alt texte… les termes sont nombreux pour désigner la description de l’image.
Pensez à la renseigner.
Outlook, Yahoo, Orange… bloquent les images par défaut.
Vous ne renseignez rien dans ce champ.
Vos destinataires verront une croix de couleur rouge à la place de l’image si ces dernières ne sont pas activées.
En général, l’internaute assimile tout de suite ce type de message à de la publicité.
Il est donc important de renseigner ce champ : 3 à 5 mots environ.
VI. Erreur n°6 – un lien avec le contenu inexistant
Les images suscitent l’achat à travers des émotions, de l’imaginaire…
Vous vendez un logiciel de type relation client, un CRM. Votre image est une superbe fille allongée sur la plage.
Je suis désolée, cette image n’est pas très pertinente.
Les images qui fonctionnent le mieux apportent de la valeur au texte.
Les positives sont les mieux perçues.
Un personnage ou une ressemblance avec une personne constitue un plus.
Je vous propose un petit jeu très rapide : 3 photos de montre.
Observez-les bien.
Quelle est votre photo préférée ?
D’après les tests effectués auprès d’un vaste échantillon de personnes, la photo numéro 1 est la plus populaire.
Pourquoi ?
La 2e est bien sûr hors concours, elle cache la marque.
La 3e, nous fait penser à une personne qui fait la tête.
La 1re est tout sourire, c’est la raison de son succès.
Regardez bien les publicités des montres de luxe comme Rolex, Patek Philippe… les montres en devanture indiquent toujours 10h10 de la même manière avec un sourire.
VII. Erreur n°7 – oublier de travailler le ratio texte/image
Les filtres antispam ne sont pas des fans des images en B2B. En B2C, les images sont mieux comprises.
La raison en est très simple, ils ne sont pas en mesure de connaître exactement leur contenu.
Pour passer au mieux les filtres antispam, votre seuil limite d’images est de 30 %.
Au-dessus, vous risquez de finir dans les spams, ce serait bien dommage.
Le seuil de 30 % ne sort pas d’un chapeau, il est le résultat de tests effectués sur les bases de nos clients utilisateurs d’images.
En B2C, il est possible de faire passer des compositions 100 % composées d’image. Le seul juge devient alors le destinataire qui peut assimiler ce type d’envoi à de la publicité de mauvaise qualité.
VIII. Erreur n°8 – les 5 premières lignes de la composition : une image
Ces lignes correspondent à la zone du panneau de prévisualisation ou du volet de lecture.
La zone où vous pouvez voir le début de l’email sans l’ouvrir.
Cette zone n’est pas disponible dans tous les environnements de lecture.
Par exemple, les messageries professionnelles de type Microsoft disposent de cette zone.
Donc tout dépend comme toujours de l’environnement de lecture de vos emails.
Certaines bases sont très utilisatrices d’un panneau de configuration alors que d’autres en sont plus ou moins exemptes.
Dans tous les cas, vous devez éviter de recouvrir toute cette zone d’une image.
Autrement, avant même l’ouverture du message, le destinataire voit une zone avec une croix de couleur rouge ou l’élément de texte de l’image quand il est renseigné.
Il assimile le message à de la publicité et beaucoup n’ouvriront pas.
IX. Erreur n°9 – l’omission des tests dans une configuration mobile
Votre composition est parfaite lorsque vous l’ouvrez à partir de votre ordinateur de bureau.
Pour augmenter l’attention du destinataire, vous avez utilisé une composition sur 2 colonnes.
1 image, 1 texte et 1 texte, 1 image.
Ainsi, sur un ordinateur de bureau, il existe une alternance de la lecture et de la vision.
L’email retient mieux l’attention.
Vous oubliez d’indiquer l’alternance des colonnes en environnement mobile.
Vous vous retrouvez donc avec une image, un texte, un texte, une image.
Sur un mobile, les 2 configurations optimales sont :
- un texte, une image, un texte, une image.
- une image, un texte, une image, un texte.
Pensez à tester le rendu de votre email sur un mobile.
X. Erreur n°10 – l’utilisation d’images gratuites
Les images gratuites font un tabac sur Internet.
Cependant, dans un email, ce n’est pas une bonne idée de les utiliser.
Il suffit qu’un spammeur ait eu la même idée que vous.
L’image est taguée en spam et vous vous retrouvez avec un message délivré en spam.
Pensez à créer ou à faire réaliser des images personnalisées pour votre message.
Sur le sujet, je vous invite à découvrir le site de Flore Michelot, une experte dans le graphisme et l’Intelligence Artificielle.
Différents termes peuvent être utilisés pour désigner le texte alternatif d’une image :
- balise alt,
- attribut alt,
- texte de l’image,
- texte de description,
- texte alternatif…
La finalité d’une balise « alt » est de fournir un texte alternatif.
Tous les experts du SEO ou du référencement naturel recommandent d’optimiser ce texte.
Et, pour les experts en emailing, cette tactique est aussi incontournable.
Pourtant, dans de nombreuses campagnes d’emailing, ces balises sont toujours absentes.
Je vous propose de voir ensemble pourquoi il est nécessaire de passer du temps sur vos textes alternatifs.
Pourquoi faut-il accorder de l’importance à la balise alt dans une campagne d’emailing ?
Tout d’abord, le contenu de la balise s’affiche lorsque l’image n’est pas chargée, il est donc indispensable de le renseigner, pour éviter une croix de couleur rouge ou un vide.
Second cas, lorsque la page est lue par des personnes malvoyantes ou présentant des déficiences visuelles, ces dernières ont besoin de cette information pour comprendre la signification de l’image.
L’objectif principal de cette balise est donc de fournir une description concise et précise de l’image.
Enfin, une autre information essentielle à connaître, consiste dans la gestion des ouvertures.
Lorsque vous utilisez un prestataire d’envoi, il intègre dans la composition, une image transparente dont le numéro est unique.
Lorsque le destinataire ouvre l’e-mail et télécharge les images, cette action indique à votre prestataire que l’ouverture a bien eu lieu.
Afin de protéger le destinataire, depuis 2003, les messageries Outlook professionnelles bloquent les images par défaut.
Le destinataire a donc le choix s’il le désire de lire le message sans télécharger les images.
Vous ne renseignez pas correctement la balise alt, vous perdez donc des lecteurs et par ricochet des ventes par rapport aux populations suivantes :
- vue déficiente,
- lecture de l’e-mail sans les images,
- décision d’abandonner la lecture de l’e-mail suite aux informations visibles dans la fenêtre de visualisation (fenêtre de lecture) lorsqu’elle existe.
3 erreurs à éviter dans la rédaction du texte alternatif
Je vous propose de réfléchir sur les 3 erreurs les plus fréquentes lors de l’envoi de campagnes d’emailing.
Erreur n°1 – un texte alternatif vide
L’une des erreurs les plus courantes est de laisser la balise alt vide, c’est-à-dire d’omettre de la renseigner.
Les personnes mal voyantes ou utilisatrices des technologies d’assistance n’auront donc aucune information sur l’image.
La problématique est identique lorsque l’image ne s’affiche pas dans la messagerie du destinataire :
un phénomène très courant pour les campagnes d’emailing comme nous l’avons vu précédemment.
La place de l’image est alors vide ou une croix de couleur rouge apparaît.
Ce contexte ne milite guère en faveur d’un engagement maximal de la liste de diffusion.
Erreur n°2 – des termes différents de l’image
Ce n’est pas un scoop, en B2B, les images ne font pas un bon ménage avec les filtres anti-spam. En B2C (le grand public), les filtres ont évolué et les images ne sont plus un problème.
Or, il est parfois tentant d’enjoliver la réalité de l’image.
Vous vendez des sacs en coton de mauvaise facture, la description de l’image évoque un coton égyptien de haute qualité.
La description n’est pas présente pour tromper le destinataire.
Au contraire, elle l’informe de manière honnête.
Quel est le principal risque encouru dans le cas de fraude ?
Vos destinataires auront tendance à appuyer sur le bouton spam lorsque les filtres antispam n’ont pas détecté la supercherie.
Erreur n°3 – une description trop courte ou un même texte
À noter, la présence de descriptions sur 1 ou 2 mots au plus, cette approche est insuffisante.
Je reprends le cas de notre sac en coton.
La description est sur un mot : « Sac », l’information n’a pas une grande valeur pour le prospect.
Exemple : « sac coton – couleurs bleu, rouge ou vert » représente une description précise.
Elle nous informe sur la matière et ajoute les couleurs disponibles.
Pensez également à rédiger des descriptions personnalisées pour chaque image.
3 astuces à utiliser pour des balises alt optimisées
Tout d’abord, assurez-vous d’avoir un texte alternatif pour toutes vos images afin de garantir une accessibilité optimale.
Le site Caniemail est bien utile pour prendre connaissance des formats d’images supportés selon la configuration de lecture.
Je vous engage à utiliser 3 astuces sur le sujet
Astuce n°1 – la précision et la spécificité payent
Lorsque vous rédigez un texte alternatif, il doit apporter une valeur ajoutée à vos destinataires.
Évitez les descriptions génériques, les phrases vagues ou creuses, les mots abstraits…
Soyez spécifique et précis.
Par exemple, « P5678.jpg », est obscur pour votre contact.
Exemple d’une description précise : « Bouquet de tulipes dans un vase en verre. »
Astuce n°2 – utiliser les astuces d’écriture de l’objet d’un email
L’expertise en écriture d’objets s’avère très utile pour rédiger les textes de description d’images.
Dans le cadre de la balise alt, le seuil limite est de 125 caractères, ensuite le risque d’une visualisation partielle existe.
Néanmoins, il est conseillé de limiter votre description principale entre 4 et 7 mots (vous pouvez omettre de compter les articles, les pronoms…).
Lorsque votre texte est supérieur à 7 mots, reprenez l’astuce des objets : faites une description courte/longue.
Les 7 premiers mots donnent l’indication clé, les autres termes renforcent le message, mais ne sont pas obligatoires pour la compréhension.
Astuce n°3 – décrivez l’information principale
Idée clé : le texte alternatif doit fournir une description précise et concise de l’image.
Vous y expliquez ce qui s’y trouve.
Essayez de transmettre l’information clé de la représentation de l’image.
Ainsi, pensez à ce que vous voudriez que les utilisateurs apprennent s’ils n’étaient pas en mesure de voir l’image.
Par exemple, l’image montre un panda dans une forêt ensoleillée mâchant une branche de bambou, un texte possible :
« Panda avec un bambou entre les dents »
Flore y détaille un outil gratuit de génération d’images au moyen de l’IA :
Cette solution vous offre jusqu’à 150 tokens gratuits tous les jours et vous pouvez lui enseigner votre propre style.
Vous n’avez désormais plus d’excuses pour ne pas utiliser des images personnalisées.
Un article pour poursuivre la réflexion
20 Erreurs Courantes en Emailing et leurs Solutions
Il y a de très bons conseils dans cet article, merci ! Je vais désormais remplir le texte alternatif, je ne le faisais pas jusqu’ici 🙈
Merci pour ces conseils. En effet, je ne prends sûrement pas assez soin de mes emails. En tout cas, une chose est sûre, je mettrai toujours un texte alternatif désormais !
Merci Diane pour cet article, encore une fois très utile ! J’ai appris de nombreuses choses. D’ailleurs, merci pour le lien 😀
Je pense que je te reprendrai l’image des trois montres car j’ai du mal à expliquer pourquoi il ne faut pas faire des obliques descendantes en graphisme. Et là, c’est tout à fait saisissant.
Bonjour Flore, Les images sont faites pour voyager et s’enrichir.
Bonnes explications
Diane
Merci pour tous ces conseils techniques, du coup j aimerais en savoir plus sur la solution Leonardo
Bonjour Carole,
Flore a fait un article très complet sur le sujet, j’ai mis le lien dans l’article.
On s’inscrit sur le site.
On peut lui donner des photos pour qu’il apprenne le style que l’on aime ou en correspondance avec son client idéal. C’est une intelligence artificielle, on fait des prompts ou on lui donne des consignes. On peut coupler prompts et images aimés et lui indiquer ce que l’on ne veut pas.
Il est possible de réaliser jusqu’à 150 images par jour sur un compte gratuit. Diane