badsender logo

Format d’image dans un email : lequel choisir ?

09/09/2022

Amis, je vous préviens : cet article sera court, bref et circoncis. Vous le savez sans doute, pour insérer des images dans un email il est nécessaire de préparer des « tranches » ou « découpes » depuis votre logiciel d’édition d’images ou de design (Photoshop, Sketch, Figma…). Ou de procéder à l’export de vos visuels. Et des images dans un email, il est rare qu’il n’y en ai pas (qu’il s’agisse d’images de fond ou d’images fixes) mais quels formats choisir pour ces visuels ? Jpeg, gif, png, svg, webP, tiff, avif, heif…

Autant d’acronymes et d’extensions, et donc autant d’interrogations quant au type de fichier autorisé dans un emailing. Nous décidons de dédier un article à ce sujet, pour vous simplifier la vie. On est comme ça.

Droit au but : les formats supportés d’une image dans un email

Une image dans un email peut présenter, pour le moment, un des trois formats suivants : JPEG, GIF, ou PNG. Les autres formats ne sont pas totalement supportés par l’intégralité des clients mail (voir catégorie Image Formats sur le site CanIEmail).

Alors oui, je vous vois venir : nous avons aussi rédigé un article sur les formats svg et apng utilisés dans un email, mais les résultats ne sont pas forcément concluants, ou demandent plusieurs contournements. Laissons donc ces extensions particulières de côté pour le moment, pour s’attarder sur les trois formats d’image correctement supportés dans un email.

Chaque format a ses qualités et ses défauts.

  • JPEG (acronyme de Joint Photographic Expert Group) : Le format JPEG permet d’afficher jusqu’à plus de 16 millions de couleurs. Il est donc de bon ton de l’utiliser pour des photos, des produits, des dégradés « complexes », des visuels courants… Cela sera sans doute le format le plus utilisé dans votre intégration HTML. Attention cependant à la qualité de l’export : le JPEG peut s’avérer vite lourd en terme de poids. Veillez à effectuer une exportation avec des paramètres de qualité suffisants pour le web. Le JPEG ne supporte pas la transparence, vos images seront donc forcément avec des coins carrés. Les extensions de nom de fichiers les plus communes pour les fichiers employant la compression JPEG sont .jpg et .jpeg.
format jpg ou jpeg d'image dans un email
Une image au format JPEG avec un fond gris inclus dans l’image, puisqu’aucune transparence n’est possible.

  • GIF (acronyme de Graphics Interchange Format) : Le format GIF s’appuie sur un nombre restreint de couleurs. Il est donc votre allié pour réduire le poids de vos images. Cependant, il est à privilégier pour les aplats de couleurs, les icônes, les pictos, ou les logos simples, n’excédant pas 256 couleurs. Le format GIF permet aussi de conserver la transparence, mais elle est toutefois binaire : il ne s’agit pas d’un canal alpha permettant plusieurs degrés d’opacité, comme le propose le format PNG. Le gif permet aussi de créer des gifs dits « animés » avec plusieurs états à l’intérieur même du fichier. Cette variante, très utile pour simuler la vidéo dans l’email par exemple, présente en revanche un poids souvent considérable. Il est donc possible, via ce format d’image, d’insérer des diaporamas et des animations dans un email. Vous trouverez d’ailleurs différents plugins comme Motion pour concevoir des gifs animés sur Figma, ou des outils pour optimiser vos gifs sur notre bibliothèque de ressources pour l’email marketing. L’extension de nom de fichiers utilisée est .gif.
extension gif visuel emailing
Une image au format GIF avec animation.

  • PNG (acronyme de Portable Network Graphics) : Le format PNG a été créé pour remplacer le GIF. Il peut faire presque tout ce que le format GIF peut faire et même plus. Il est, en nous laissant aller à la vulgarisation, un mélange des deux formats cités précédemment : Il permet aussi bien de comprendre jusqu’à 16 millions de couleurs (ou plus), comme de gérer la transparence grâce à la présence d’un canal alpha. En revanche, il ne permet pas l’animation (sauf dans son format dérivé l’APNG), et son poids est souvent plus élevé que les formats précédents. L’extension de nom de fichiers utilisée est .png.
png emailing fond transparent
Une image au format PNG avec un fond en damier permet d’observer la transparence.
format png image email
La même image au format PNG avec un fond jaune renseigné sur son conteneur.

Et pour le poids recommandé ?

Nous n’aborderons pas le sujet du poids d’une image dans un email ici, puisqu’il a déjà été traité. Je vous invite donc fortement à consulter l’article cité précédemment pour en savoir plus sur ce sujet.

Cependant, gardez à l’esprit qu’il faut optimiser le poids de vos fichiers images. Jouez sur la qualité d’export par exemple pour améliorer ce point. Et bien sûr, réfléchissez au format que vous choisirez pour vos visuels dans votre email, le poids en dépend !

Besoin d’un design system email ? Ou d’un design email tout court ? Ou d’une intégration HTML pour email ? Ou d’un email builder ? On peut aussi vous proposer :

Badsender anime aussi une formation sur le sujet du développement HTML d’un email !

Envie de recevoir la newsletter, les invitations aux lives et autres actus de Badsender par email ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.