Taille des images pour vos newsletters

Gardez chaque image de newsletter sous la barre des 100 KB, redimensionnez-les à deux fois leur largeur d'affichage et utilisez le format JPG ou PNG plutôt que le WebP. Gmail tronque tout message dont le code HTML dépasse environ 102 KB, remplaçant le reste par un lien Afficher l'intégralité du message.

La plupart des expéditeurs découvrent cette limite de troncature à leurs dépens, généralement lorsque le lien de désinscription et le pixel de suivi se retrouvent coupés. Les images en sont fréquemment la cause, soit parce qu'elles sont directement intégrées au message, soit parce que le code HTML qui les entoure s'est alourdi au fil des campagnes.

Ce que mesure réellement la limite de troncature de Gmail

Gmail mesure la source HTML du message, et non les images vers lesquelles il pointe. Une newsletter contenant des liens vers 10 grandes photographies reste largement en dessous de la limite, tandis qu'un message avec des styles en ligne lourds et des images intégrées la dépassera.

Cette distinction est essentielle car la solution diffère. Les images liées ne comptent pas dans le calcul des 102 KB. La troncature est donc généralement causée par des styles en ligne répétés, de longs paramètres de suivi sur chaque lien ou des images intégrées sous forme de données base64. Supprimer les images intégrées et alléger le code HTML résout le problème de troncature, tandis que compresser les photographies liées optimise le temps de chargement.

Tailles d'images recommandées pour l'email

Concevez le corps de l'email sur une largeur de 600 pixels et exportez les images à 1200 pixels pour les écrans haute densité. Le standard de 600 pixels perdure depuis des années car il s'adapte au volet de prévisualisation de tous les clients de messagerie de bureau sans nécessiter de défilement horizontal.

Doubler la largeur d'exportation suffit pour les écrans haute densité. Exporter à 3 fois la largeur d'affichage ajoute un poids inutile qu'aucun client de messagerie n'affichera mieux, et l'email est le seul canal où chaque kiloctets est téléchargé sur un téléphone.

Pourquoi le WebP reste un mauvais choix pour l'email

La prise en charge du WebP par les clients de messagerie reste inégale, et Outlook en particulier reste imprévisible. L'email est l'un des rares domaines où les anciens formats sécurisés restent la bonne décision.

Les navigateurs web prennent tous en charge le WebP, ce qui laisse penser à tort qu'il en va de même pour les clients de messagerie. Outlook pour bureau utilise un moteur de rendu totalement différent, et plusieurs systèmes de messagerie d'entreprise bloquent ou échouent sur les formats qu'ils ne reconnaissent pas. Une image cassée dans une newsletter est bien plus préjudiciable que l'économie de 30 % d'espace que le WebP permettrait de réaliser. Le JPG et le PNG restent donc les formats à privilégier.

Choix du format au sein de l'email

Utilisez le JPG pour les photographies et le PNG pour les logos, les boutons et tout élément contenant du texte. La règle est la même que sur le web, et les conséquences sont encore plus visibles car les images d'un email sont souvent de petite taille.

• JPG pour les photos de produits, les images d'en-tête et toute image représentant une scène réelle.
• PNG pour les logos, les icônes et les graphiques avec des aplats de couleur ou des contours de texte nets.
• GIF animé uniquement lorsque l'animation apporte une réelle valeur, et en restant sous la barre de 1 MB.
• Évitez le WebP et l'AVIF, car aucun des deux ne s'affiche de manière fiable sur l'ensemble des clients de messagerie.
• Évitez totalement le SVG, car la plupart des clients de messagerie le bloquent pour des raisons de sécurité.

Les images sont bloquées par défaut chez de nombreux clients

De nombreux destinataires verront votre email sans les images. Le message doit donc rester compréhensible sous forme de texte. Les systèmes de messagerie d'entreprise et les utilisateurs soucieux de leur confidentialité bloquent les images distantes tant que le lecteur ne choisit pas de les charger.

Renseignez un texte alternatif (alt) sur chaque image, car c'est ce texte qui s'affichera si l'image est bloquée. Ne placez jamais d'informations essentielles, comme l'offre, la date limite ou l'appel à l'action, uniquement dans une image. Une newsletter entièrement conçue à partir d'un seul grand graphique se résumera à un rectangle vide pour une part importante de vos abonnés, en plus d'être inaccessible pour les lecteurs d'écran.

Comment préparer les images d'une newsletter

Pour que votre newsletter reste rapide et lisible, suivez ces 7 étapes.

1. Concevez l'email sur une largeur de 600 pixels, que tous les clients de bureau affichent sans défilement.
2. Recadrez chaque image aux dimensions exactes qu'elle occupera dans la mise en page.
3. Redimensionnez à deux fois la largeur d'affichage, pas plus.
4. Convertissez en JPG pour les photos ou en PNG pour les graphiques contenant du texte.
5. Compressez chaque fichier pour viser un poids inférieur à 100 KB.
6. Hbergez les images sur votre plateforme d'envoi ou votre propre serveur plutôt que de les intégrer directement au message.
7. Envoyez un test sur Gmail, Outlook et sur un téléphone avant de planifier la campagne.

Le poids total de l'email importe plus que celui d'une seule image

Gardez l'ensemble du message sous la barre des 600 KB, images comprises, car les abonnés ouvrent leurs newsletters sur mobile, souvent avec une connexion instable. Une newsletter de 5 MB mettra du temps à charger et sera fermée avant même de s'afficher.

Comptez les images avant de commencer la compression. Une newsletter contenant 12 photographies de 100 KB chacune pèse déjà 1.2 MB, ce qui indique que la mise en page nécessite plutôt moins d'images que des images plus petites. Réduire le nombre d'images améliore généralement les performances et la lisibilité, car les longues newsletters surchargées d'images sont rarement lues jusqu'au bout.

Le mode sombre modifie l'apparence des images

Plusieurs clients inversent ou ajustent les couleurs en mode sombre, et un logo sur fond blanc devient un rectangle lumineux dans un message sombre. Testez chaque campagne en mode sombre avant l'envoi.

Utilisez des fichiers PNG avec un fond transparent pour les logos et les icônes afin qu'ils s'intègrent correctement sur n'importe quelle couleur de fond. Évitez les images avec un fond blanc lorsque le design suppose que la page derrière elles est également blanche. Les photographies ne posent généralement pas de problème, car les clients de messagerie modifient rarement le contenu photographique, contrairement aux graphiques plats et aux images contenant du texte.

Écrans Retina et netteté des images

Exportez à deux fois la largeur d'affichage pour que les images restent nettes sur les écrans haute densité, puis compressez plus fortement pour compenser l'augmentation des pixels. Une image de 1200 pixels avec une qualité de 70 est généralement plus esthétique et plus légère qu'une image de 600 pixels avec une qualité de 95.

Définissez l'attribut de largeur dans le code HTML à la taille d'affichage plutôt qu'à la taille réelle du fichier, afin que le client affiche l'image à 600 pixels tout en exploitant les détails supplémentaires. L'omission de cet attribut de largeur conduit certains clients à afficher l'image à sa taille réelle en pixels, ce qui brise la mise en page sur ordinateur.

Vérifier une campagne avant son envoi

• Envoyez un test sur Gmail, Outlook, Apple Mail et au moins un téléphone.
• Visualisez le test avec les images bloquées pour confirmer que le message reste compréhensible.
• Vérifiez que le message n'est pas tronqué dans Gmail, ce qui se traduit par la présence d'un lien Afficher l'intégralité du message.
• Confirmez que chaque image possède un texte alternatif décrivant son contenu.
• Contrôlez le rendu en mode sombre, en particulier pour les logos et les graphiques plats.
• Additionnez le poids total de toutes les images et confirmez qu'il reste inférieur à 600 KB.

Préparer une campagne en une seule fois

Traitez toutes les images de la newsletter ensemble afin que l'ensemble de la campagne partage les mêmes spécifications. Une newsletter contient généralement entre 5 et 15 images, et un expéditeur hebdomadaire en prépare des centaines sur une année.

Définissez la largeur et le poids cible une seule fois, déposez vos images, et chaque fichier est traité à l'identique. Tout s'exécute localement dans votre navigateur sur votre propre processeur. Ainsi, vos offres confidentielles, vos listes d'abonnés converties en images et vos travaux de campagne clients ne transitent jamais par un serveur externe. Pour une agence préparant un lancement, garder ces fichiers en local évite tout risque de fuite qu'aucune optimisation de compression ne saurait justifier.

Conservez un dossier de modèles contenant des espaces réservés correctement dimensionnés pour chaque bloc de mise en page récurrent, comme l'en-tête, la ligne de produits sur 2 colonnes et le logo du pied de page. Les expéditeurs hebdomadaires réutilisent indéfiniment les mêmes 4 ou 5 formats, et adapter de nouveaux visuels à une spécification existante prend moins de temps que de devoir redéfinir les dimensions à chaque nouvelle campagne.