Comprendre les images Retina dans les e-mails HTML

Outre l'assaut des tailles d'écran, la révolution mobile introduit un autre défi intéressant pour les concepteurs d'e-mails : les écrans haute résolution. Ces écrans, souvent appelés écrans Retina (un terme inventé par la machine marketing d'Apple), ont le pouvoir à la fois d'améliorer n'importe quelle campagne d'e-mail ou de donner à vos abonnés une expérience d'e-mail moins que stellaire.

Dans cet article, nous verrons exactement comment fonctionnent les écrans haute résolution et ce que cela signifie pour les concepteurs et les spécialistes du marketing d'e-mails. Après avoir vu comment implémenter des images de rétine dans vos propres campagnes, nous terminerons en discutant de quelques considérations importantes pour toute personne travaillant avec des images de rétine.

Un peu d'histoire

En 2010, Apple a sorti l'iPhone 4. Entre autres améliorations matérielles, l'iPhone 4 comportait ce qu'Apple a appelé un écran Retina. L'écran Retina d'Apple a été l'un des premiers écrans à haute résolution, ou points par pouce élevés, produits en série pour les consommateurs.

Sur les écrans d'appareils, le DPI fait référence au nombre de pixels qu'un fabricant peut contenir dans un pouce d'écran. Plus le DPI est élevé, plus les images et le texte sont détaillés et clairs sur cet écran.

Bien qu'Apple ait été le premier à présenter l'écran Retina à un grand public, il n'a pas fallu longtemps pour que d'autres fabricants d'appareils s'y joignent. Alors que la plupart des entreprises ont commencé avec des appareils plus petits comme les téléphones, les écrans Retina peuvent désormais être trouvés sur des tablettes, des ordinateurs portables et même des ordinateurs de bureau comme l'énorme iMac Retina 5k d'Apple de 27 pouces.

Le besoin d'images de rétine

En savoir plus sur le matériel et le DPI est très bien, mais vous vous demandez peut-être :

Qu'est-ce que cela a à voir avec le marketing par e-mail, Jason ?

Bonne question!

En tant que marketeurs, il est de notre devoir de présenter nos marques sous le meilleur jour possible. Alors que les lignes d'objet, le texte et la cadence jouent tous un rôle important dans l'esthétique des abonnés, les visuels attirent d'abord les gens vers une campagne par e-mail. Après avoir ouvert un e-mail, nos yeux se tournent vers la conception et les images avant de commencer à lire une copie ou à appuyer sur des appels à l'action.

Si vous ne tenez pas compte des affichages à haute résolution, vous courez le risque de paraître négligent aux abonnés. En raison du fonctionnement des écrans haute résolution, les images non optimisées finissent par paraître floues et pixelisées sur les écrans de rétine. Voici un exemple :

À mesure que les utilisateurs s'habituent aux écrans Retina, ils s'attendent à ce que le texte et les images apparaissent nets et clairs. Si vous n'optimisez pas vos images pour les écrans à haute résolution, ces utilisateurs voient une conception d'e-mail dégradée, ce qui peut conduire à une confiance tout aussi dégradée dans votre marque.

Heureusement pour les abonnés, de plus en plus de marques ont adopté des images optimisées pour la rétine au cours des dernières années, comme le montrent nos enquêtes annuelles sur l'état des e-mails.

Utilisation des images Retina dans les e-mails

Comment pouvez-vous exactement optimiser les images pour les écrans Retina ? La réponse, il s'avère, est assez simple.

En gros, les écrans haute résolution ont deux fois plus de pixels par pouce que leurs homologues traditionnels. Par conséquent, si nous voulons que nos images aient une belle apparence sur ces écrans, elles doivent être deux fois plus grandes afin que, lorsqu'elles sont réduites dans l'e-mail, il y ait plus de pixels à afficher sur les écrans Retina.

Regardons un exemple.

Dans nos e-mails, nous incluons le logo Litmus en haut. En utilisant HTML, il est dimensionné de manière à s'afficher à 130 par 48 pixels. Si nous créions et enregistrions l'image du logo à cette taille, les abonnés verraient un désordre flou sur les écrans de rétine :

Pour garder le logo net, nous créons simplement une image à une plus grande taille. Dans ce cas, le fichier image fait 276 pixels sur 102 pixels, mais tout ce qui est au moins le double de la taille d'affichage prévue fonctionne. Ensuite, dans notre code HTML, nous utilisons la taille d'affichage d'origine prévue dans les attributs de largeur et de hauteur pour réduire l'image plus grande :

 <img alt="Litmus" src="[email protected]" width="130" height="48" border="0">

Sur les écrans à haute résolution, nous obtenons de belles images nettes de la rétine.

Utilisation d'images Retina dans Outlook

Certaines versions de Microsoft Outlook affichent toujours les images de la rétine dans leur taille réelle, malgré les tailles explicites définies par les attributs de largeur et de hauteur. Pour contourner ce problème, vous pouvez inclure une règle de largeur maximale dans l'attribut style de l'image.

Dans l'exemple ci-dessous, nous utilisons l'attribut largeur (pas d'attribut hauteur) et la largeur maximale pour que les images de rétine fonctionnent sur tous les clients de messagerie.

 <img alt="Litmus" src="[email protected]" width="600" border="0">

Vous remarquerez l'inclusion d'un style de largeur défini sur 100 %. C'est une astuce pratique pour rendre les images réactives sur différentes tailles d'écran. Sur les écrans plus grands, la règle de la largeur maximale s'appliquera pour limiter la taille de l'image, tandis que sur les écrans plus petits, elle remplira 100% de la largeur de l'écran ou du conteneur.

Les images d'arrière-plan peuvent-elles être de la rétine ?

Oui, vous pouvez utiliser des images de rétine comme images d'arrière-plan. Bien que la mise en œuvre soit un peu plus complexe, les principes sont les mêmes.

La principale chose à noter est que cela ne fonctionnera pas partout (mais que fait vraiment dans l'email ?). Pour les images d'arrière-plan de la rétine, vous devez utiliser la propriété CSS d'arrière-plan au lieu de l'attribut HTML d'arrière-plan sur quelque chose comme une cellule de tableau.

 <td>

L'arrière-plan est défini en utilisant à la fois la propriété abrégée et les propriétés d'arrière-plan CSS individuelles pour tenir compte de certaines bizarreries dans les clients Gmail et Android. C'est un peu compliqué d'entrer ici, mais cette discussion de la communauté a un excellent aperçu des techniques disponibles pour les concepteurs à la recherche d'images d'arrière-plan magnifiques sur des écrans haute résolution.

Quelques considérations

Bien que doubler la taille de vos images permet de garantir qu'elles s'affichent magnifiquement sur les écrans Retina, cette technique n'est pas sans inconvénients.

Les forfaits de données mobiles sont chers et, selon votre emplacement et votre connexion réseau, lents. À mesure que nous augmentons les dimensions d'une image, la taille du fichier augmente également. Cette taille accrue réduit le plan de données d'un abonné et peut ralentir le chargement d'un e-mail. Les deux problèmes sont un gros problème et créent une expérience utilisateur moins que conviviale.

Gardez donc à l'esprit que toutes les campagnes n'ont pas besoin d'images de rétine. Si vous utilisez beaucoup d'images dans votre campagne, ou des images très volumineuses, l'utilisation d'images standard sans rétine peut aider à offrir une meilleure expérience utilisateur, car les images seront rapidement téléchargées et affichées dans votre campagne.

Si vous avez besoin d'utiliser des images de rétine, il existe deux techniques pour éviter des tailles de fichiers gonflées.

La première, et la plus compliquée, consiste à utiliser ce qu'on appelle des images compressives. Ce sont des images enregistrées dans des dimensions énormes, mais avec des paramètres de très faible qualité.

La plupart des programmes d'édition d'images vous permettent de définir la qualité d'enregistrement des images. Dans Photoshop, par exemple, vous pouvez régler la qualité d'un JPEG à l'aide d'un simple curseur :

Pour créer une image compressive, concevez l'image à quelque chose d'environ quatre fois la taille prévue et enregistrez-la avec un paramètre de qualité extrêmement faible. Bien que l'image ait l'air terrible lorsqu'elle est vue en taille réelle, après avoir été réduite à sa taille prévue dans un e-mail, les artefacts rétrécissent et passent inaperçus. Et les paramètres de faible qualité garantissent que la taille de votre fichier est réduite au minimum.

La deuxième façon de contrôler la taille des fichiers consiste à utiliser un programme dédié pour compresser davantage vos images après les avoir enregistrées. Des applications, dont beaucoup sont gratuites, existent pour chaque système d'exploitation et vous permettent de traiter et de compresser les images après leur création.

Certains de nos favoris incluent ImageOptim, JPEGmini, TinyPNG, Compressor.io, Kraken et Pied Piper. Dans la plupart des cas, il vous suffit de glisser-déposer ou de télécharger vos images dans le programme et de les compresser. Ensuite, vous pouvez télécharger ces images optimisées sur votre ESP ou votre serveur pour les inclure dans vos campagnes prêtes pour la rétine.

C'est un monde de rétine

Si les statistiques récentes sont un indicateur, les spécialistes du marketing par e-mail continueront de voir les abonnés changer leurs habitudes de lecture vers les appareils mobiles. Combiné à la tendance des fabricants à équiper les appareils d'écrans à haute résolution, le besoin d'images de rétine dans les campagnes par e-mail est clair.

Tant que vous tenez compte de la taille des fichiers, l'inclusion d'images de rétine est un moyen relativement simple de mettre à niveau n'importe quelle campagne et de faire de votre mieux. Arrêtez de vous soucier des graphismes flous et commencez dès aujourd'hui avec les images de rétine !

Testez la taille de votre fichier image + temps de chargement Avec Litmus Checklist, vous pouvez tester vos images pour la taille du fichier, le temps de chargement et les liens rompus. De plus, voyez instantanément à quoi ressemblent vos campagnes dans plus de 50 clients de messagerie. Commencer une liste de contrôle →