Les 102 du code d'e-mail : travailler avec des images

Publié: 2020-05-01

Voir du code se répandre devant vous peut être incroyablement intimidant et parfois frustrant. Je vous promets, de commerçant en commerçant, que c'est bien plus facile qu'il n'y paraît. De plus, être capable de naviguer dans le HTML des e-mails est une compétence incroyablement précieuse. Dans notre série sur les bases du code de messagerie, nous vous apprendrons les principes de base du code HTML que vous devez connaître pour vous familiariser avec le code de messagerie.

Dans notre dernier article, nous avons expliqué comment vous pouvez naviguer dans votre code de messagerie pour vous familiariser avec la mise à jour des liens ou la modification rapide de la copie. Mais qu'en est-il des images ?

Les images sont l'épine dorsale de nombreux e-mails très performants. Mais, avec une complexité sans cesse croissante et divers types de fichiers, tailles, accessibilité et temps de chargement à prendre en compte, cela peut submerger même le spécialiste du marketing le plus qualifié.

Dans cet article, nous aborderons certaines des manières les plus courantes d'ajouter des images à votre e-mail et passerons en revue les bases pour vous assurer que vos abonnés ont une excellente expérience. Si vous recherchez une plongée profonde sur les images, consultez ces guides :

Guide ultime des images d'arrière-plan dans les e-mails
Guide des GIF animés par e-mail
Utilisation d'images dans un e-mail HTML

Vous pouvez facilement suivre les sujets abordés dans ce guide, alors allez-y et ouvrez un e-mail dans Litmus Builder et nous allons commencer !

Préparez votre image

Avant de pouvoir ajouter votre image à votre e-mail, assurez-vous qu'elle est configurée pour réussir. Tout d'abord, assurez-vous que l'image que vous utilisez est d' un type et d'une taille de fichier adaptés aux e-mails . Les fichiers volumineux ralentiront votre temps de chargement, diminuant vos conversions globales et votre engagement, alors assurez-vous d'utiliser une image légère qui se charge rapidement.

Insérez votre image

Trouvez où vous souhaitez ajouter l'image dans votre code - si vous utilisez Litmus Builder, basculez sur la vue en grille pour cliquer à l'endroit où vous souhaitez qu'une image apparaisse, puis cliquez dans la vue du code. Lorsque vous avez trouvé l'endroit parfait, utilisez la balise <img> pour ajouter dans votre image, mais remplacez l'URL ici par un lien direct vers votre image.

Si vous n'êtes pas sûr de ce qu'est un lien direct, recherchez la fin du nom du fichier, il devrait se terminer par un type de fichier image comme ".png", ".jpg" ou ".gif". Les liens vers des dossiers ou HTML ne fonctionneront pas ici, ils doivent pointer directement vers l'image que vous ajoutez à votre e-mail.

 <img src="img-url.jpg" />

C'est ça! Une fois que vous avez ajouté votre balise, votre image s'affichera dans le volet d'aperçu si vous êtes dans Litmus Builder.

Curieux de savoir où héberger vos images ? La plupart des ESP ont un système d'hébergement de fichiers où vous pouvez télécharger vos images et utiliser ces URL publiques pour la source de l'image dans votre e-mail, alors assurez-vous de vérifier d'abord votre ESP. Si votre ESP ne fournit pas d'hébergement de fichiers image, envisagez d'utiliser AWS d'Amazon ou le serveur FTP de votre propre site Web pour l'hébergement d'images.

Trouver les bonnes dimensions

Il est préférable d'utiliser une image deux fois plus grande que l'espace dans lequel vous souhaitez insérer votre image afin qu'elle apparaisse bien sur tous les moniteurs et qu'il n'y ait pas de pixellisation ou de flou. Ajustez la largeur et la hauteur de vos images en ajoutant un modificateur à votre balise <img> que vous avez créée à l'étape précédente. Cela ressemblera à quelque chose comme ceci :

 <img src="img-url.jpg" width="400" height="100" />

Ajustez les valeurs de largeur et de hauteur en fonction de ce qui a du sens pour votre e-mail. Vous pouvez jouer avec ces valeurs et voir à quoi cela ressemble en apportant des modifications, puis en cliquant dans le volet d'aperçu dans Builder pour les voir se mettre à jour.

Ajouter du texte ALT

Le texte ALT décrit une image afin que ceux qui ont des images désactivées dans leur client de messagerie ou qui s'appuient sur un lecteur d'écran puissent facilement lire votre e-mail. Par exemple, si nous avons une image d'une promotion offrant 20 % de réduction, l'ajout d'un texte ALT décrivant l'offre informe votre lecteur de l'offre même s'il ne peut pas voir les images pour une raison quelconque.

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Le meilleur texte ALT est descriptif, succinct et a la même intention que votre image. Si vous passez votre e-mail via Litmus Checklist avant de l'envoyer, nous signalerons le texte ALT manquant afin que vous puissiez facilement entrer et le mettre à jour. Désormais, vous n'avez même plus besoin de consulter un développeur !

Échanger des images

Vous avez changé d'avis sur cette image ? Vous avez deux options :

1. Tout comme pour créer une nouvelle image, vous pouvez remplacer l'URL qui pointe vers votre image par une nouvelle. Cela conservera toutes vos dimensions, votre texte ALT ou tout autre élément susceptible de vous aider à styliser votre image et à mettre à jour le contenu de l'image lui-même.

Prenez la balise d'image actuelle et recherchez le chemin du fichier :

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Remplacez le chemin par votre nouveau chemin d'image :

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

2. Selon l'endroit où votre image est hébergée, vous pouvez également télécharger une nouvelle image avec exactement le même nom au même emplacement. De cette façon, vous n'avez pas du tout besoin de toucher le code pour mettre à jour l'image de votre e-mail.

E-mail parfait

Maintenant que vous avez le pouvoir de mettre à jour et de modifier les images, utilisez ce pouvoir à bon escient ! Les images dans les e-mails peuvent rapidement mal tourner. Les fichiers lourds qui prennent du temps à charger, l'utilisation d'images pour l'intégralité de votre courrier électronique ou l'absence d'accessibilité pour la conception peuvent créer des expériences d'abonné désordonnées.

Voici quelques bonnes pratiques rapides à garder à l'esprit lorsque vous créez votre bibliothèque d'images :

Gardez les fichiers légers et agréables , moins de 1 Mo est le mieux et le plus petit est le mieux (Litmus Checklist vérifie votre temps de chargement, alors ne vous inquiétez pas si vous ne connaissez pas chaque taille d'image.)
Ajoutez un texte alternatif pour rendre votre e-mail lisible et accessible même si les images ne sont pas visibles.
N'envoyez pas d'e-mails contenant uniquement des images et assurez-vous que votre e-mail contient du texte en direct. Il peut être tentant de concevoir un e-mail entier à l'aide d'une image, mais cela peut nuire à l'engagement et aux conversions avec de longs temps de chargement et de mauvaises expériences pour ceux qui ont désactivé les images.

Besoin d'aide sur une question de code de débutant spécifique ? Faites-nous savoir ce que vous aimeriez voir ensuite dans cette série. Aucune question n'est trop basique !

_________________________________

En savoir plus sur les images par e-mail :

Pourquoi vous ne devriez pas envoyer d'e-mails contenant uniquement des images
Guide des GIF animés par e-mail
Comprendre les images Retina dans les e-mails HTML
PNG, GIF ou JPEG ? Quel est le meilleur format d'image pour les e-mails ?
GIF animés dans les e-mails : 10 conseils pour réduire la taille des fichiers
Le guide ultime des images d'arrière-plan dans les e-mails
PNG animés dans les e-mails : une alternative aux GIF ?