Meilleures pratiques pour les e-mails HTML : les e-mails contenant uniquement des images sont-ils mauvais pour le marketing ?

Publié: 2022-11-24

Les entreprises prospères accordent une grande priorité à l'application des normes de leur marque, et à juste titre. C'est une représentation visuelle de la relation qu'ils entretiennent avec leurs clients, et ils maintiennent ce rapport en utilisant toujours les mêmes polices, couleurs, logo et style d'image.

C'est pourquoi il peut être si choquant lorsque vous commencez à élaborer une stratégie de marketing par e-mail pour votre client de réaliser que vous êtes limité aux polices sécurisées pour le Web, que vous ne pouvez pas facilement superposer des mots sur des images et que vous ne pouvez pas contrôler l'apparence exacte du texte. car le rembourrage ou les marges varient selon la boîte de réception.

Pour cette raison, vous pourriez être tenté de créer un modèle d'image uniquement afin que votre e-mail ait toujours exactement l'apparence que vous souhaitez. Malheureusement, il s'agit d'une stratégie à courte vue qui risque de causer plus de problèmes qu'elle n'en résout. Continuez à lire pour savoir pourquoi (et ce que vous devriez faire à la place).

Pourquoi vous devriez éviter les e-mails contenant uniquement des images

Malheureusement, les avantages des e-mails contenant uniquement des images ne compensent pas les inconvénients. Vous trouverez ci-dessous quelques-unes des raisons pour lesquelles vous devriez les éviter.

Ils peuvent causer des problèmes de délivrabilité

Lorsqu'il s'agit de créer vos campagnes par e-mail, votre priorité absolue doit toujours être la délivrabilité. Les e-mails contenant uniquement des images sont souvent envoyés directement dans le dossier spam, car ils peuvent être une tactique utilisée par les escrocs pour contourner les filtres de texte mis en place pour détecter les formulations offensantes ou trompeuses.

La taille globale du fichier de votre e-mail affecte également la délivrabilité, comme indiqué dans cet article sur l'acide, et les e-mails contenant uniquement des images sont beaucoup plus volumineux que les e-mails HTML.

Ils peuvent être lents à charger ou ne pas apparaître du tout

Certains clients de messagerie peuvent avoir des images désactivées par défaut pour des raisons de sécurité ou pour protéger les utilisateurs contre des contenus potentiellement offensants ou des logiciels malveillants. Si vous avez créé un e-mail contenant uniquement des images, ils ne verront peut-être qu'un mur d'icônes d'images brisées, comme les exemples présentés dans cet article décisif sur le blocage d'images.

Les e-mails contenant beaucoup d'images peuvent également augmenter considérablement le temps nécessaire au chargement de l'e-mail, ce qui peut nuire à l'engagement des utilisateurs. Les gens passent en moyenne 10 à 13 secondes à lire un e-mail individuel ; cela signifie que s'il y a un décalage pendant le chargement des images, la fenêtre d'opportunité déjà étroite dont vous disposez pour faire passer votre message se réduira encore plus.

Ils compromettent l'accessibilité

Les personnes malvoyantes auront beaucoup plus de mal à utiliser un appareil de lecture d'écran pour interpréter un e-mail contenant uniquement des images. Bien que les images dans un e-mail doivent toujours avoir un texte alternatif descriptif pertinent pour le contenu de l'e-mail, elles ne sont pas destinées à remplacer entièrement le texte de l'e-mail.

Deux femmes âgées sont assises l'une à côté de l'autre et utilisent des tablettes.

Ils ne sont pas optimisés pour le mobile

Si vous concevez un e-mail contenant uniquement des images pour le bureau, votre client louchera pour le voir sur son appareil mobile. D'un autre côté, si vous le concevez pour la lisibilité sur les téléphones, il aura l'air d'une taille caricaturale sur un écran d'ordinateur.

Le même design réactif est affiché sur un écran d'ordinateur portable, un téléphone et une tablette.

Ils ne sont pas aussi consultables que les e-mails HTML

Si vous envoyez un e-mail avec des informations qu'un contact souhaite référencer plus tard, comme un coupon ou un événement à venir, il aura plus de mal à rechercher votre message dans sa boîte de réception si tout le texte est basé sur des images.

Maintenant que vous connaissez toutes les raisons pour lesquelles vous ne devriez pas créer d'e-mails contenant uniquement des images, voici quelques bonnes pratiques à garder à l'esprit lors de la création d'e-mails HTML beaux et efficaces.

Meilleures pratiques pour la création d'e-mails HTML

Cela signifie-t-il que vous devez éviter d'avoir des images dans vos e-mails ? Pas du tout! La plupart des ressources suggèrent un rapport texte/image de 60/40 pour le meilleur équilibre entre la délivrabilité et une expérience utilisateur optimale. Essayez ces stratégies pour créer des e-mails qui ont un impact avec ou sans images affichées.

Réduisez au maximum la taille de vos images

Vous pouvez et devez toujours inclure des images dans votre e-mail, mais leur taille de fichier doit être minimisée avant de les ajouter à votre modèle d'e-mail.

Pour exporter vos images pour un e-mail à partir de Photoshop, sélectionnez Fichier > Exporter > Enregistrer pour le Web. Pour les images opaques comme les photographies, le format de fichier JPEG permettra une taille de fichier plus petite que PNG. Pour les images illustrées comme les logos qui nécessitent de la transparence, PNG est l'option idéale.

Si vous n'avez pas accès à Photoshop, un outil de compression d'image en ligne gratuit comme tinypng peut vous aider à réduire au minimum la taille de vos images.

Utiliser le texte en direct

Dans la majorité des cas, tous les libellés des e-mails doivent être du texte HTML pouvant être sélectionné avec un curseur et lu par un appareil de lecture d'écran. Bien que la liste originale des polices Web sécurisées soit votre choix le plus sûr, certaines boîtes de réception peuvent afficher votre police (par exemple, Gmail affichera les polices Google).

Vous pouvez toujours choisir d'utiliser d'abord la police de votre marque avec des polices sécurisées pour le Web comme alternative. En utilisant des virgules dans CSS, vous dites à la boîte de réception d'utiliser la première police si possible, puis la seconde si possible, et enfin toute autre police sans empattement si les deux autres ne sont pas disponibles.

 <style=”font-family: 'KoHo', Arial, sans-serif”>

Créer des boutons pare-balles

Un bouton pare-balles est un bouton de courrier électronique créé à l'aide de HTML au lieu d'une image. Ils peuvent être créés à l'aide de plusieurs méthodes, notamment le rembourrage, les bordures ou le langage de balisage vectoriel (VML).

Ce créateur de boutons de messagerie à l'épreuve des balles peut vous aider à créer facilement un bouton stylisé qui s'affichera magnifiquement dans la plupart des boîtes de réception, y compris Outlook.

Échangez des images contre des gifs pour un impact maximal

Vous serez peut-être surpris d'apprendre qu'un gif animé peut avoir une taille de fichier encore plus petite qu'une photographie. Tout dépend de la complexité de l'image et du nombre de pixels qui changent entre les images.

Cet article fournit plusieurs stratégies détaillées pour créer des gifs de taille raisonnable pour vos e-mails. Certains de ces conseils incluent :

  • Couper au lieu de s'estomper pour les transitions
  • Utilisation d'éléments vectoriels illustrés au lieu de photos
  • Utilisation d'une superposition pour limiter la palette de couleurs

Inclure un lien "Afficher dans le navigateur" en haut de votre e-mail

Certains utilisateurs préféreront que les images soient désactivées par défaut, ou ils ne pourront peut-être pas contrôler cette fonctionnalité car ils disposent d'une boîte de réception sur le lieu de travail avec des fonctionnalités de sécurité intégrées.

C'est pourquoi c'est toujours une bonne idée d'inclure un lien "afficher dans le navigateur" en haut de votre e-mail afin que le contact puisse voir l'e-mail tel qu'il a été conçu à l'origine.

Utiliser des éléments de texte au lieu d'icônes d'image

Expérimentez avec des éléments textuels/CSS à la place des images lorsque cela est possible. Par exemple, au lieu de créer l'image d'une flèche, voyez s'il existe une police Web sécurisée qui en contient une. Vous pouvez google "ASCII" ou "Unicode" suivi de votre mot-clé pour vérifier. Ce tableau montre tous les symboles que vous ne saviez peut-être pas faire partie de la famille de polices Arial.

Faire des images un élément d'accentuation facultatif

Une tendance récente que nous avons remarquée est celle des e-mails qui utilisent des images pour se fondre de manière transparente dans des arrière-plans de couleur unie. Cela donne l'illusion d'un e-mail contenant uniquement des images tout en conservant le texte HTML et la conception réactive pour les ordinateurs de bureau et les mobiles.

Un exemple de capture d'écran d'un e-mail qui mélange le texte HTML de manière transparente dans une image.

Bien que vous n'ayez peut-être pas la possibilité de choisir vos polices et votre mise en page idéales, un e-mail HTML bien conçu reste un outil marketing très efficace qui peut être utilisé pour atteindre chacun de vos clients, quel que soit leur groupe démographique ou leurs capacités physiques.

Avez-vous besoin d'aide pour créer des modèles d'e-mails astucieusement optimisés ? Notre équipe de marketing par e-mail est prête à vous aider à créer la meilleure expérience de boîte de réception possible pour vos clients.