Si vos images apparaissent étirées, floues ou mal cadrées, c'est presque toujours un écart de tailles entre le fichier, le HTML et le rendu du client mail. Voici comment régler ça pour de bon.
Astuce pro : Règle d'or — 600 px de large pour le corps, images à 1× ou 2× exact pour rester nettes en retina.
Les 4 problèmes de taille les plus courants
- Image plus large que la colonne : le client la réduit, l'image peut paraître floue.
- Image plus petite que la largeur déclarée en HTML : étirée et pixelisée.
- Pas d'attributs
width/height: Outlook la rend à la taille du fichier. - Clients mobiles qui ignorent le CSS : ils retombent sur les attributs inline.
Tailles recommandées
| Bloc | Fichier (retina) | Largeur HTML |
|---|---|---|
| Hero pleine largeur | 1200 px | 600 px |
| Image deux colonnes | 560 px | 280 px |
| Logo | 300 px | 150 px |
| Icône | 96 px | 48 px |
Procédure pas à pas
- Redimensionnez le fichier à 2× la largeur rendue pour le retina.
- Mettez toujours
widthetheightdans la balise<img>. - Utilisez
max-width:100%;height:autoen CSS inline pour le mobile. - Compressez avec TinyPNG ou Squoosh : chaque image sous 200 KB.
- Testez sur Gmail, Apple Mail et Outlook avant l'envoi.
Des images nettes dans chaque newsletter — testez Mailpro
L'éditeur d'images Mailpro redimensionne automatiquement, applique les dimensions retina et compresse à l'upload. Découvrir l'éditeur d'images · Éditeur WYSIWYG
À lire aussi :