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