Dans quelques mois, cela fera 7 ans que je travaille chez Badsender (nos noces de laine), ce qui représente un certain nombres de projets, qu’il faudra que je compte un jour. Au cours de ces années, certaines questions ont tendance à revenir régulièrement, comme quel est le ratio texte-image à respecter dans un email, ou encore comment peut-on gérer le dark mode de son email ? La dernière en date concerne le poids des images dans un email.
Le poids des images a-t-il un impact sur votre newsletter ?
Même si c’est plutôt le mythe du ratio texte-image qui a la peau dure, le sujet du poids des images dans une campagne email est régulièrement venu sur le tapis. Question que j’ai évidemment posée à mon tour à Thomas, notre splendide email designer et intégrateur. Et là, bah il a bien été embêté mon petit Thomas (en vrai, il est plutôt grand).
Le temps de chargement et d’affichage de l’email
Il vous est déjà arrivé d’ouvrir une newsletter sur votre téléphone en 3G (nous n’avons pas tous le privilège d’avoir la 4G, ok) et que celle-ci mette quelques secondes à s’afficher. C’est exaspérant, n’est-ce pas ? Ne me mentez pas, je vous vois faire ! Hop, on lève les yeux au ciel, si on a de la chance, ça finit par charger… ou pas et on quitte l’email, pire on le supprime. Et vous allez me dire, quel rapport avec le poids des images ? Non, vous n’allez pas me le demander, parce que j’ai foi en vous : vous le savez déjà !
Pour rappel (juste au cas où), plus une image est lourde, plus elle mettra du temps à charger et donc à s’afficher. Le texte lui en revanche s’affiche beaucoup plus vite, vu qu’il ne pèse que quelques octets. Donc, le premier impact du poids d’une image dans un emailing sera le temps d’affichage des dites images, surtout avec une réseau bif bof. Une bonne raison de limiter le poids (voir le nombre) d’images.
La délivrabilité de la campagne
Côté délivrabilité, il n’y a pas réellement de contre-indication sur le poids des images. Certains de nos clients utilisent des images à plus de 500ko et délivrent très bien leurs e-mails. Le seul point qui peut être finalement bloquant et impacter directement votre délivrabilité (du moins sur les webmails US), c’est le chargement des images. Comme je l’ai dit précédemment : plus les fichiers seront lourds, plus l’affichage des images sera long, ce qui pourrait mettre la patience des personnes ciblées à rude épreuve ! Il ne faudrait surtout pas que celles-ci aient des comportements négatifs (clic sur spam, suppression sans ouverture, …) sur vos e-mails à cause de l’affichage des images… Donc mieux vaut envoyer léger !
A quel poids doit-on se limiter ?
Tout est une question d’IMC, mais pas celui auquel vous pensez : l’Image Max Color (ne le cherchez pas sur le web, je l’ai inventé à l’instant ^^). Pourquoi Max Color ? Tout simplement parce que chaque extension est limitée en nombre de couleur, ce qui a un impact sur le poids final du visuel.
Quelle extension pour quel usage ?
Pour commencer, savez-vous faire la différence entre Gif, Jpg, Png et dans quel cas les utiliser ?
PNG-8 : à réserver aux graphiques simples, les icônes et les logos, il permet d’avoir des visuels légers mais est limité à 256 couleurs.
GIF : limité lui aussi à 256 couleurs, il utilise une méthode de compression moins avancé que le PNG-8, son poids sera de 10 à 30% plus lourd (je ne parle pas de Gif animé ici, mais bien de Gif).
JP(E)G : extension recommandée pour les photos, elle utilise jusqu’à 16,7 millions de couleurs ce qui permet un affichage optimal de vos ombres, nuances, et autres dégradés.
PNG-24 : il utilise autant de couleurs que le Jpg, mais son petit plus c’est le fond transparent.
GIF animé : cas un peu particulier, il permet d’animer des calques, et contient plusieurs images. De ce fait, les GIF animés sont beaucoup plus lourds que les extensions précédentes.
Évidemment, il y a d’autres extensions comme le SVG par exemple, mais je n’en parlerais pas ici car il n’est pas accepté en emailing :/
Expérimentation
Depuis le début de cet article, je tourne autour du pot sans avoir mentionné le moindre kilo, mais il y a une raison (enfin, un peu plus). Nous avons vu que l’extension choisie a un impact sur le nombre de couleurs, donc le poids final de votre visuel. MAIS, le contenu de votre visuel aura lui aussi un impact sur le poids de celui-ci. Logique ! Plus il y a de détails, de nuances, d’ombres, plus on devra faire appel à différentes couleurs.
Pour une image identique avec un nombre de couleurs plutôt bas (ici, l’œuf), la version JPG pèse 18,9ko quand la version PNG fait 37,9ko.
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
Maintenant, gardons strictement la même taille d’image (250x250px), mais avec une photo contenant beaucoup plus de couleurs vibrantes, le JPG fait 141ko, et le PNG 162ko.
Encore ? Imaginons que vos emailing sont conçus pour le retina… je vous laisse faire le calcul.
En plus du nombre de couleurs et du contenu même de votre image, dans le cas où vous choisiriez le format JPG, celui-ci applique une compression avec pertes (ou compression irréversible) à la différence de PNG-24. Ce qui signifie que lors de votre enregistrement depuis votre éditeur d’image, vous avez le choix sur un niveau de qualité (perte plus ou moins importante). Le poids du fichier sera donc également plus ou moins élevé. Reste à savoir quel rendu reste acceptable pour vous.
Optimisez le poids de vos images pour vos emails
Tout ça c’est bien gentil, mais ça ne nous dit toujours pas quel poids votre image doit faire dans votre email. Sachez que je n’aime pas vous dire ça, mais il le faut : on ne peut pas répondre à cette question de but en blanc.
En revanche, on peut vous donner une estimation du poids TOTAL des images par campagne, et j’ai bien dit estimation 😉 Nous recommandons de ne pas dépasser 800ko au total (difficile à respecter si vous intégrez un Gif animé par contre), ce qui permettra à vos contacts de ne pas avoir trop de latence à l’affichage de la news. Il est nécessaire d’adapter les visuels à vos newsletters, en fonction du nombre d’image qu’elle contient, et de trouver le juste milieu entre poids et qualité de l’image. Heureusement, pour cela nous avons des solutions : optimiser le poids de vos images, et rien de mieux que des outils en ligne pour vous y aider.
Oui, même si vous pensez que votre éditeur d’image préféré est performant et fait très bien cette optimisation (coucou Photoshop), et bien sachez que ce n’est pas le cas et que vous pouvez encore gagner de précieux octets notamment liés aux métadonnées propres à votre éditeur d’image.
Thomas vous avait parlé des solutions d’optimisation en ligne il y quelques mois en arrière, voici un rapide rappel de ses reco :
Squoosh
https://squoosh.app Un simple drag & drop de vos images vous permettra de réduire leur poids 😉 CQFD
Tiny JPG & Tiny PNG
https://tinyjpg.com & https://tinypng.com Tout pareil, sauf qu’on y charge un .zip de toutes les images et basta.
Pour résumer, pas d’impact connu sur la délivrabilité, mais d’éventuels soucis d’affichage si votre réseau est faible ou les images très lourdes. Choisissez la bonne extension pour chaque visuel en fonction de sa taille en px, le type de contenu (logo, picto, photo, dégradé…), optimisez leur poids, le tout pour être sous les 800ko au total 😉
