Navigation

Meilleures pratiques d'utilisation d'images dans un message

Intégrer des images dans vos communications ou pages Web comporte des avantages et des inconvénients selon le format et la taille utilisés. Les images peuvent avoir un impact positif sur l'intérêt de vos lecteurs. Toutefois, des images nombreuses ou volumineuses peuvent ralentir l'ouverture ou l'envoi de votre message. Que ce soit pour vos courriels, pages de destination/Rich SMS ou autres types de support Web, référez-vous aux conseils contenus dans cet article pour améliorer l'intégration de vos images. 


Format de l'image

Parmi les formats supportés les plus populaires, il est recommandé d'utiliser JPEG ou PNG puisque ces formats sont universels. 

Format
Avantages
Inconvénients
JPEG
  • Idéal pour les photos et les images avec des dégradés
  • Plus léger que PNG
  • Perte de qualité (compression destructive)
PNG
  • Idéal pour les images avec des couleurs solides
  • Transparence progressive (alpha) 
  • Pas de perte de qualité (compression non destructive)
  • Plus lourd que JPEG
GIF
  • Idéal pour les logos ou les courtes animations
  • Transparence (franche)
  • Plus léger que PNG et JPEG
  • Nombre de couleurs limité (palette indexée)
  • Temps de chargement plus long si l'animation est volumineuse (plus d'utilisation de bande passante)

Taille de l'image

Les dimensions et le format d'une image sont directement liés à la taille de l'image. Même si la taille des images n'affecte pas le poids du gabarit d'un courriel, une image volumineuse se chargera plus lentement à l'ouverture du message.

Votre image devrait avoir une taille adaptée à la largeur du contenu du message ou de la page Web. Le format d'une image est par défaut d'une résolution de 72 DPI (standard pour le Web). Il est recommandé de viser un ratio 1:1 avec le contenu ou, pour des contenus destinés au mobile, un ratio fixe comme 2:1. Autrement, le navigateur redimensionnera l'image avec ses propriétés par défaut. 

Exemple

Les images ci-haut prennent toute la largeur des colonnes (255px). Il est donc recommandé d’utiliser des images de 255px de large, au minimum. Pour une meilleure expérience mobile, utilisez le ratio fixe 2:1, donc 510px (255 x 2). Si vous utilisez un autre ratio, assurez-vous d’en utiliser un qui ne donnera pas de décimale à la hauteur de l’image lorsque celle-ci sera redimensionnée à la largeur du contenant (255px dans notre exemple). La décimale dans la hauteur d’une image est parfois une des causes de lignes blanches dans Outlook (glitch visuel).

Options d'affichage mobile

Si votre image mobile est plus large que le contenant mobile, cochez l’option Redimensionner dans la section Affichage mobile (dans l'édition de l'image). La taille de l'image s'adaptera automatiquement à la taille de l'écran. Vous pouvez aussi utiliser l’option Cacher en mode adaptatif pour faire disparaître l'image lorsque l'espace ne le permet pas dans l'écran.


Textes de l'image

Assurez-vous d'avoir un texte de remplacement (alternatif) au cas où l'image ne s'afficherait pas et pour rendre votre contenu plus accessible. De cette façon, le contenu reste compréhensible pour l'utilisateur même sans l'image. 

Le nom du fichier de l'image peut affecter le référencement d'une page Web. Il est donc recommandé de choisir un nom de fichier pertinent.   


Affichage de l'image

Pour les pages Web, il est recommandé de tester votre contenu sur plusieurs navigateurs. Pour les courriels, vous pouvez utiliser l'outil d'aperçu à la réception pour prévisualiser le rendu des images pour les différentes boîtes de messagerie incluant les modes sombres. 

Astuces pour l'affichage en mode sombre

  1. Utiliser un fond d'image transparent afin de ne pas avoir des encadrés pâles sur des fonds foncés.
  2. Appliquer un contour pâle sur les textes foncés d'images afin de garder la lisibilité.
  3. Si l'image nécessite une couleur de fond, s'assurer d'avoir un padding égal tout autour afin de maintenir un encadré constant.

Cette réponse a-t-elle été utile ? Oui Non

Envoyer vos commentaires
Désolés de n'avoir pu vous être utile. Aidez-nous à améliorer cet article en nous faisant part de vos commentaires.