Test intégration email : renseigner (ou non) la dimension des images

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email

integration-html-emailJ’ai toujours appris, comme une bonne pratique de conception mail, qu’il était nécessaire de renseigner les dimensions des images au sein d’un e-mailing. 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 ! 🙂

J’ai récemment découvert sur Graphicmail 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 (ou plutôt perdre 😉 ) quelques kilo-octets sur le poids final du fichier HTML et poserait moins de contraintes pour le responsive.

Verdict : La bonne pratique est justifiée! Choisissez un webmail, et passez en « on » la fonction « Image Blocking » en haut à droite de la plateforme. Effectivement, si la largeur et la hauteur d’une image ne sont pas renseignées, la cellule comprenant l’image se réduira au strict minimum en cas d’image non affichée. La structure de l’email s’en trouve donc modifiée.

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 e-mailing.

dimension-image-integration-email

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 : la cellule garde bien la hauteur et la largeur de l’image. De ce fait, la structure de l’email reste donc identique.

Il s’agit ici d’un exemple avec UNE SEULE IMAGE ; Imaginez les conséquences pour un email constitué de plusieurs images… Campaign Monitor avait d’ailleurs rédigé un article en 2007 à ce sujet, tests  à l’appui !

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email

5 réponses

  1. 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.

  2. 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.

  3. 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 ?

  4. 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 🙂

  5. 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 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *