Rechercher
Fermer cette boîte de recherche.

Faut-il concevoir ses images en Retina dans un email ?

Restez informé·e via les newsletters de Badsender

Chaque mois, nous publions une newsletter sur l’email marketing et une infolettre sur la sobriété et le marketing. En savoir plus.

Votre adresse email ne sera jamais communiquée à un tiers. Vous pourrez vous désabonner à tout moment en un seul clic.

Un article concis pour parler d’un sujet précis (vous avez vu ça rime ! C’est la claaaasse…) : nos clients (et pas qu’eux/que) nous demandent régulièrement des conseils quant au poids des visuels dans leurs campagnes email. Mais aussi comment conserver une qualité optimale d’image tout en réduisant au max le poids du fichier ?

J’ai la mauvaise habitude (vous comprendrez pourquoi « mauvaise » ensuite) de recommander des images en Retina que lorsque cela est vraiment nécessaire : pour des visuels produits par exemple, ou des visuels très esthétiques.

Je (Charles) martèle d’ailleurs sans cesse qu’il faut prêter attention au poids des images Retina, car des images deux fois plus grandes sont « forcément » plus lourdes.

Rappelons ce qu’est le Retina

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

Autrement dit, ce type d’écran à haute résolution a un DPI (pour Dots Per Inch, soit Points Par Pouce) supérieur à la normal, un « high DPI » : Il y a plus de pixels dans une surface donnée qu’un autre écran.

Et plus le DPI est élevé, plus les images et les textes sont détaillés. La plupart des constructeurs ont d’ailleurs adoptés des écrans à haute résolution.

Malheureusement, les images non optimisées pour le Retina apparaissent « floues » et pixelisées sur les écrans Retina. Je vous mets ci-dessous une mise en situation.

Besoin d'aide ?

Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.


Rendu d’une image non Retina versus rendu d’une image Retina sur un écran Retina

Comment prévoir le Retina dans l’email ?

Pour afficher des images Retina dans un email, c’est relativement simple. Comme les écrans à haute résolution ont deux fois plus de pixels par pouce que leurs homologues traditionnels, les images doivent donc être deux fois plus grandes.

Pour une image de 600 pixels de large sur 300 pixels de haut donc, vous allez concevoir et exporter une image de 1200 pixels de large sur 600 pixels de haut, puis l’appeler dans votre code HTML de la façon suivante :

<img src="monimage.jpg" width="600" height="300" style="display:block;" border="0">

Ok, mais si c’est plus lourd, c’est pas top donc ?

Mais comme il est bon de ne pas s’endormir sur des idées toutes faites ! C’est lors de discussions avec mes précieux collègues Pierre, Grégory et Fabien que j’ai découvert qu’un visuel Retina peut très bien être aussi peu lourd qu’un visuel non Retina (voir même moins lourd), et toujours de meilleure qualité.

Alors, comment qu’on fait ça ? Et bien si l’on considère qu’un visuel Retina est beaucoup plus grand qu’un visuel non Retina, on peut aussi considérer qu’on pourra lui appliquer une compression beaucoup plus forte. Et c’est le cas.

Image carrée de 300px réduite à 80% en qualité. poids : 20ko
Image carrée de 600px affichée à 300px réduite à 30% en qualité. poids : 18ko

Ce type de compression peut se faire bien sûr avec des outils comme Photoshop (sans doute le plus adapté pour une compression optimisée avec une qualité optimale conservée) ou des solutions en ligne comme squoosh.app.

Ce qui est fou tout de même (et autant être totalement transparent), c’est que cet article de Litmus évoquait déjà cette astuce. Mais je n’avais sans doute pas pris le temps de le lire jusqu’au bout. Shame on me !

Soutenez l'initiative "Email Expiration Date"

Brevo soutient financièrement le projet. Rejoignez le mouvement et ensemble, responsabilisons l’industrie de l’email face à l’urgence climatique.

Partagez
L’auteur

Laisser un commentaire

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