J’ai toujours appris, comme une bonne pratique d’intégration html d’email, qu’il était nécessaire de renseigner les dimensions d’une image au sein d’un emailing. Et, comme nombre de bonnes pratiques, je n’ai pas toujours cherché à savoir pourquoi… C’est devenu un réflexe. Mais il est grand temps, maintenant, de tester, pour voir si cela a vraiment une incidence ! 😉
Pourquoi faudrait-il renseigner les dimensions d’une image ?
J’ai récemment découvert la raison majeure de cette bonne pratique : Si les hauteurs et largeurs des images sont renseignées, l’email garde sa structure, même si les images ne s’affichent pas. Vérifions ! Si cela ne s’avérait pas exact (ou plus d’actualité), supprimer les attributs width et height permettrait de gagner quelques kilo-octets sur le poids final du fichier HTML et poserait moins de contraintes pour le responsive.
Alors, faut-il renseigner les dimensions ?
La bonne pratique se justifie ! Effectivement, selon nos tests sur EmailonAcid, si les dimensions d’une image (largeur et hauteur) ne sont pas renseignées, la cellule comprenant l’image se réduit au strict minimum en cas d’image non affichée. La structure de l’email s’en trouve donc modifiée.
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
Cela ne fonctionne donc pas SANS les largeurs et hauteurs… Mais a-t-on un meilleur rendu AVEC ? Après tests, il s’avère qu’il est bien indispensable de renseigner les dimensions de chaque image au sein d’un emailing.
Voici ci-dessus un rapide comparatif : Sur le premier screenshot, les images ne sont pas bloquées, tout s’affiche correctement. Sur le second en revanche, les images sont bloquées et les dimensions ne sont pas renseignées. On constate que le conteneur va se restreindre en hauteur pour n’afficher que le texte alternatif et le pictogramme d’image bloquée. Quant au troisième screenshot, les images ne sont pas affichées, mais les dimensions sont indiquées sur l’image : la cellule garde bien la hauteur et la largeur de l’image. De ce fait, la structure de l’email reste donc identique.
6 réponses
Il est parfois intéressant de ne pas renseigner les dimensions de l’image pour pouvoir « remonter le fold », c’est à dire éviter un grand carré vide, quand les images ne s’affichent pas.
Cela permet d’avoir un bouton visible plus rapidement par exemple.
Attention, ça nécessite de bien tester la structure du mail.
Effectivement, comme le souligne Laurent, il est parfois intéressant de ne pas renseigner les hauteurs / largeurs pour remonter le CTA. Si le fond de l’image est blanche, il faut éviter de se retrouver avec un grand bloc blanc qui fait « vide ».
Si l’on prend le cas de Lotus Notes en plus, il est primordial de renseigner la largeur dans la cellule englobant cette image pour éviter de se retrouver avec une structure totalement non maîtrisée sans images affichées.
Il faut généralement afficher les images. Si votre utilisation de l’email comporte des particularités (responsive, secteur d’activité utilisant dans anciens outils de messagerie, etc.) une seule solution, test test test !
Ne pas renseigner les largeurs pour faire artificiellement remonter le CTA lors du non affichage des images m’interpelle. Si le CTA est si bas que cela, peut être faudrait il le remonter pour qu’il soit visible également lors de l’affichage des images en mode prévisualisation non ?
Pour pouvoir afficher un email correctement on peut pousser le vice en affectant des fonds de couleurs sur les cellules entourant les images.
Cela permet d’avoir un email structuré et présentant déjà l’esprit de notre email sans afficher d’images.
Ce qui peut permettre au client finale de lire le contenu sans en afficher les images, et éventuellement cliquer et/ou récupérer les images pour en apprendre plus.
Et figer les tailles des images est bien nécessaire pour le bon affichage et prouver le sérieux de la communication au client 🙂
Il existe une autre raison (qui n’a plus beaucoup d’incidence aujourd’hui, mais bon..), indiquer les tailles des images permet d’améliorer le chargement de celle ci. Donc aujourd’hui il est vrai qu’avec le débit de nos connexions, c’est plus gadget qu’autre chose, mais à l’époque le gain n’était pas négligeable 🙂
Avec du recul et après 6 ans : je persiste à croire qu’il vaut mieux renseigner la largeur et la hauteur de l’image quand cela est possible. Vous allez me dire : Pourquoi ne serait-ce pas possible ? Dans le cas de Master Template où les visuels sont amenés à changer, on ne peut pas deviner la hauteur des futurs visuels. Dans ce cas de figure alors, je renseigne seulement la largeur.