Marketing par e-mail et automatisation

Comment utiliser des images haute résolution pour les écrans Retina dans votre e-mail HTML

L'affichage Retina est un terme marketing utilisé par Apple pour décrire un écran haute résolution qui a une densité de pixels suffisamment élevée pour que l'œil humain soit incapable de distinguer les pixels individuels à une distance de visualisation typique. Un écran Retina a généralement une densité de pixels de 300 pixels par pouce (ppi) ou supérieur, ce qui est nettement supérieur à un écran standard avec une densité de pixels de 72 ppp.

Les écrans Retina sont désormais assez courants pour les écrans, les ordinateurs portables, les appareils mobiles et les tablettes. De nombreux fabricants proposent désormais des écrans haute résolution avec des densités de pixels qui correspondent ou dépassent celles des écrans Retina d'Apple.

CSS pour afficher une image de résolution supérieure pour un écran Retina

Vous pouvez utiliser le code CSS suivant pour charger une image haute résolution pour un écran Retina. Ce code détecte la densité de pixels de l'appareil et charge l'image avec le @ 2x suffixe pour les écrans Retina, lors du chargement de l'image de résolution standard pour les autres écrans.

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {
/* Load high-resolution image */
background-image: url('image@2x.png');
}

Une autre approche consiste à utiliser des graphiques vectoriels ou SVG images, qui peuvent s'adapter à n'importe quelle résolution sans perte de qualité. Voici un exemple :

<div style="max-width: 300px;">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</div>

Dans cet exemple, le code SVG est intégré directement dans l'e-mail HTML à l'aide de la <svg> tag. La viewBox définit les dimensions de l'image SVG, tandis que l'attribut xmlns L'attribut spécifie l'espace de noms XML pour SVG.

La max-width la propriété est définie sur le div élément pour garantir que l'image SVG se redimensionne automatiquement pour s'adapter à l'espace disponible, jusqu'à une largeur maximale de 300 pixels dans ce cas. Il s'agit d'une bonne pratique pour s'assurer que les images SVG s'affichent correctement sur tous les appareils et clients de messagerie.

Remarque: La prise en charge de SVG peut varier en fonction du client de messagerie, il est donc important de tester votre e-mail sur plusieurs clients pour vous assurer que l'image SVG s'affiche correctement.

Une autre façon de coder les e-mails HTML pour les écrans Retina consiste à utiliser srcset. L'utilisation de l'attribut srcset vous permet de fournir des images haute résolution pour les écrans Retina tout en garantissant que les images sont correctement dimensionnées pour les appareils à résolution inférieure.

<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">

Dans cet exemple, le srcset L'attribut fournit deux sources d'images : image.jpg pour les appareils avec une résolution de 600 pixels ou moins, et image@2x.jpg pour les appareils avec une résolution de 1200 pixels ou plus. Le 600w et 1200w les descripteurs spécifient la taille des images en pixels, ce qui aide le navigateur à déterminer quelle image télécharger en fonction de la résolution de l'appareil.

Tous les clients de messagerie ne prennent pas en charge srcset attribut. Le niveau de soutien pour srcset peut varier considérablement en fonction du client de messagerie, il est donc important de tester vos e-mails sur plusieurs clients pour vous assurer que les images s'affichent correctement.

HTML pour les images dans les e-mails optimisé pour les écrans Retina

il est possible de coder un e-mail HTML réactif qui affichera correctement une image à une résolution optimisée pour les écrans Retina. Voici comment:

  1. Créez une image haute résolution qui fait le double de la taille de l'image réelle que vous souhaitez afficher dans l'e-mail. Par exemple, si vous souhaitez afficher une image 300×200, créez une image 600×400.
  2. Enregistrez l'image haute résolution avec le @ 2x suffixe. Par exemple, si votre image d'origine est image.png, enregistrez la version haute résolution sous image@2x.png.
  3. Dans votre code e-mail HTML, utilisez le code suivant pour afficher l'image :
<img src="image.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
  <img src="image@2x.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->

<!--[if (gte mso 9)|(IE)]> est un commentaire conditionnel utilisé pour cibler des versions spécifiques de Microsoft Outlook, qui utilise Microsoft Word pour afficher les e-mails HTML. Le moteur de rendu HTML de Microsoft Word peut être très différent des autres clients de messagerie et navigateurs Web, il nécessite donc souvent une manipulation spéciale. Le

(gte mso 9) condition vérifie si la version de Microsoft Office est supérieure ou égale à 9, ce qui correspond à Microsoft Office 2000. La |(IE) condition vérifie si le client est Internet Explorer, qui est souvent utilisé par Microsoft Outlook.

E-mail HTML avec images optimisées pour l'affichage Retina

Voici un exemple de code d'e-mail HTML réactif qui affiche une image à une résolution optimisée pour les écrans Retina :

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Retina-Optimized Email</title>
  <style>
    /* Mobile-specific styles */
    @media only screen and (max-width: 480px) {
      /* Add mobile-specific styles here */
    }
    
    /* High-density display styles */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      img {
        display: block;
        width: 300px !important;
        height: 200px !important;
        max-width: 100%;
        height: auto;
      }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f7f7f7;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" style="padding: 40px 0 30px 0;">
        <img src="image.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <!--[if (gte mso 9)|(IE)]>
          <img src="image@2x.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <![endif]-->
      </td>
    </tr>
  </table>
</body>
</html>

Conseils d'image d'affichage Retina

Voici quelques conseils supplémentaires sur l'optimisation de vos e-mails HTML pour les images optimisées pour les écrans Retina :

  • Assurez-vous que vos balises d'image incluent toujours l'utilisation alt texte pour fournir un contexte à l'image.
  • Optimisez les images pour le Web afin de réduire la taille des fichiers sans compromettre la qualité de l'image. Cela peut inclure l'utilisation compression d'image outils, en réduisant le nombre de couleurs utilisées dans l'image et en redimensionnant l'image à ses dimensions optimales avant de la télécharger dans l'e-mail.
  • Évitez les grandes images d'arrière-plan qui peuvent ralentir les temps de chargement des e-mails.
  • Les GIF animés peuvent avoir une taille de fichier plus importante que les images statiques en raison des multiples images nécessaires pour créer l'animation, assurez-vous de les conserver bien en dessous de 1 Mb.

Douglas Karr

Douglas Karr est le directeur marketing de OuvrirINSIGHTS et le fondateur de la Martech Zone. Douglas a aidé des dizaines de startups MarTech à succès, a contribué à la due diligence de plus de 5 milliards de dollars d'acquisitions et d'investissements MarTech, et continue d'aider les entreprises à mettre en œuvre et à automatiser leurs stratégies de vente et de marketing. Douglas est un expert et conférencier de renommée internationale en matière de transformation numérique et de MarTech. Douglas est également l'auteur d'un guide pour les nuls et d'un livre sur le leadership d'entreprise.

Articles Relatifs

Retour à bouton en haut
Fermer

Adblock détecté

Martech Zone est en mesure de vous fournir ce contenu gratuitement car nous monétisons notre site grâce aux revenus publicitaires, aux liens d'affiliation et aux parrainages. Nous vous serions reconnaissants de supprimer votre bloqueur de publicités lorsque vous consultez notre site.