Optimiser les images pour les emails

Les contraintes spécifiques des clients email

Optimiser des images pour le web et les optimiser pour l'email sont deux exercices fondamentalement différents. Les navigateurs modernes sont prévisibles ; les clients email, eux, sont un environnement fragmenté où chaque application applique ses propres règles de rendu, de chargement et de filtrage.

Les trois clients les plus utilisés en 2026, Apple Mail (34 % de part de marché), Gmail (29 %) et Outlook (10 %), ont des comportements significativement différents sur les images. Comprendre leurs contraintes est le prérequis à toute optimisation.

Largeur maximale et dimensions recommandées

La largeur standard d'un email HTML est de 600 px. Cette valeur est une convention du secteur, adoptée parce qu'elle s'affiche correctement sur Outlook bureau, dans les webmails et sur mobile en mode paysage. Ne dépassez jamais 650 px pour un conteneur principal.

Dimensionnez toutes vos images à la largeur d'affichage réelle. Il n'y a aucune raison d'envoyer une image de 1 200 px si elle sera affichée à 600 px, cela double inutilement le poids et le temps de chargement.

PNG vs JPEG : quel format choisir ?

Les deux formats sont universellement supportés par tous les clients email. Le choix dépend exclusivement du type de contenu :

• JPEG pour les photos, visuels de produit et images hero. Exportez à une qualité de 75–85 % avec suppression des métadonnées EXIF. Le JPEG progressif améliore la perception du chargement sur les connexions lentes.
• PNG pour les logos, icônes, éléments contenant du texte et tous les visuels nécessitant une transparence. Le PNG préserve les contours nets là où le JPEG crée des artefacts de compression.

Concernant le WebP : bien que supporté par Apple Mail, Gmail web et la plupart des clients modernes en 2026, il reste non supporté par Outlook bureau et plusieurs clients B2B d'entreprise. Pour un usage général, JPEG et PNG restent les choix sans risque.

GIF animé : le seul format d'animation universel en email

Les GIF animés restent le seul format d'animation fiable dans les emails en 2026. Les balises <video> ne sont pas supportées. Avant d'intégrer un GIF animé dans un email, trois règles impératives :

1. Concevez la première frame comme une image autonome. Outlook bureau n'affichera que cette frame. Elle doit transmettre votre message principal sans les frames suivantes.
2. Limitez le poids à 500 Ko maximum. Au-delà, votre email risque d'être bloqué ou différé par certains fournisseurs de messagerie.
3. Réduisez à 10–15 FPS et 128–256 couleurs selon la complexité du contenu. Voir notre guide dédié sur la réduction du poids des GIF.

Alt text et accessibilité : indispensables, pas optionnels

Dans les entreprises, Outlook est souvent configuré pour bloquer les images par défaut. Chez Yahoo, les images peuvent être désactivées sur mobile. L'attribut alt est votre assurance : il affiche un texte descriptif quand l'image n'est pas chargée.

• Chaque image informative doit avoir un alt descriptif et utile : alt="Soldes d'été, jusqu'à 50 % de réduction sur toute la collection"
• Les images purement décoratives (séparateurs, fonds) doivent avoir un alt="" vide pour être ignorées par les lecteurs d'écran.
• L'alt text doit être capable de transmettre le message principal de l'email même si aucune image ne s'affiche.
• Certains ESPs (Mailchimp, Klaviyo) permettent de styliser l'alt text en CSS inline, utilisez cette option pour maintenir une mise en page lisible sans images.

Images de fond : contournements pour Outlook

La propriété CSS background-image ne fonctionne pas dans les cellules de tableau sous Outlook bureau. La solution consiste à utiliser les commentaires conditionnels VML, un langage vectoriel propriétaire Microsoft :

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml"
        fill="true" stroke="false"
        style="width:600px; height:200px;">
  <v:fill type="frame" src="https://exemple.com/bg.jpg" color="#ffffff" />
  <v:textbox inset="0,0,0,0">
<![endif]-->
  <!-- contenu de la cellule ici -->
<!--[if gte mso 9]>
  </v:textbox></v:rect>
<![endif]-->

Pour tous les autres clients, la propriété CSS background-image en style inline fonctionne normalement. Cette double approche assure un rendu cohérent sur l'ensemble des clients.

Checklist avant envoi

Avant de déclencher un envoi, vérifiez chaque point de cette liste :

• Toutes les images sont hébergées sur un serveur HTTPS (jamais en pièce jointe inline)
• Chaque image a un attribut alt renseigné ou explicitement vide
• Toutes les images ont un attribut width explicite en HTML (pas uniquement en CSS)
• Aucune image individuelle ne dépasse 100 Ko (sauf GIF animé : 500 Ko max)
• La largeur du conteneur principal ne dépasse pas 600 px
• Les styles sont en inline (pas de feuille CSS externe)
• La première frame du GIF est lisible sans les frames suivantes
• Le ratio texte/image est d'au moins 60 % texte pour éviter les filtres anti-spam
• Le rendu a été testé sur Outlook 2019, Gmail et Apple Mail au minimum