Usage et optimisation des images

Pour intégrer des visuels, tels que des images, dans vos emails, vous disposez de deux options :

• Utiliser la médiathèque : Importez directement vos images pour les stocker dans un espace dédié, accessible depuis l’Email Builder.

• Héberger vos visuels sur votre serveur : Intégrez vos images sur un serveur d’hébergement afin de récupérer une URL à renseigner dans l’Email Builder.

Pour plus d’informations sur le volet de conception, vous pouvez vous référer à l’article : Organisation du Designer.

Vos images peuvent être hébergées sur votre routeur ou sur l’un de vos serveurs internes, et leur affichage dépend du protocole utilisé : HTTP ou HTTPS.

Depuis 2014, Google recommande vivement l’utilisation du protocole HTTPS comme standard par défaut, et Chrome applique désormais une politique de sécurité stricte. Cette politique interdit le chargement d’images via le protocole HTTP depuis des sites utilisant HTTPS.

Lorsque vous tentez d’afficher une image via HTTP sur un site HTTPS (comme l’Email Builder application), Chrome réécrit automatiquement l’adresse de la ressource pour utiliser HTTPS. Par exemple :

http://monsite.com/monimage.jpg sera transformé en
https://monsite.com/monimage.jpg.

• Si votre hébergeur permet l’accès à l’image via HTTPS, tout fonctionne normalement.

• Si le protocole HTTPS n’est pas activé, l’image ne pourra pas être chargée et ne sera pas affichée dans l’Email Builder.

• Impact dans l’Email Builder : Il sécurise les échanges en utilisant HTTPS. En conséquence, les images non accessibles en HTTPS ne pourront pas s’afficher dans le Designer ni dans la page miroir.

• Impact pour les destinataires : Vos abonnés utilisant un webmail via Chrome ne pourront pas voir les images non accessibles en HTTPS. Une exception existe pour certains clients mails comme Gmail, qui héberge les images sur son propre cache HTTPS avant de les afficher.

Pour garantir l’affichage de vos visuels, adaptez la méthode de gestion de vos médias :

• Passez au protocole HTTPS pour l’hébergement de vos images.

• Cette opération peut être réalisée par votre hébergeur, votre infogéreur, ou votre équipe technique interne.

Adopter le protocole HTTPS pour vos images est désormais indispensable pour assurer une expérience utilisateur optimale et conforme aux nouvelles exigences des navigateurs.

• Temps de chargement : des images trop lourdes ralentissent l’affichage de votre email, ce qui peut décourager vos abonnés. Un email qui se charge rapidement capte davantage leur attention.
• La délivrabilité : Un email trop lourd peut être perçu comme suspect par certains filtres anti-spam. C’est pourquoi l’Email Builder vous alerte sur ce point lors du contrôle qualité.
• L’impact écologique: Réduire le poids des images dans un email diminue la consommation d'énergie nécessaire à leur stockage, ainsi que l’envoi et le chargement, ce qui contribue à réduire l'empreinte carbone globale de la communication.

• Taille de l’image : Utilisez une taille (largeur et hauteur) d’image adaptée à vos emails. 
• Compression initiale : Utilisez un logiciel d’édition d’image comme Photoshop pour une première compression.
• Optimisation supplémentaire : Appliquez une compression via des outils spécialisés tels que :
  • https://compressor.io/ (outil en ligne)
  • ImageOptim (pour Mac)
  • FileOptimizer (pour PC)

Ce travail d'optimisation est encore plus essentiel lorsqu'il s'agit du format GIF.

Le format GIF, souvent  volumineux, nécessite une optimisation encore plus rigoureuse. Il est bien pris en charge par la plupart des clients mails et webmails, sauf par certaines anciennes versions d’Outlook (2010 à 2019, hors Outlook 365), qui n'affichent que la première image de l’animation. 

En compressant vos images, vous garantissez des emails plus légères, plus rapides et plus adaptées aux attentes des abonnés, tout en améliorant la délivrabilité. 

L’Email Builder vous permet de ne pas afficher certains médias sur mobile et/ou tablette. Pour cela, rendez-vous dans l’onglet « Styles » du volet de conception depuis le Designer. Dans la catégorie « Conteneur », cochez les cases « Masqué sur tablettes » et « Masqué sur mobile ».  

Vous pouvez afficher des images personnalisées grâce à la fonctionnalité de contenus dynamiques.