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 |
|
|
| PNG |
|
|
| GIF |
|
|
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. Il est recommandé de ne pas dépasser 0.5 Mo en taille ou 1500px en dimensions pour éviter d'affecter la vitesse de chargement (le système vous laissera toutefois téléverser une image allant jusqu'à 2 Mo).
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
|