Màrqueting per correu electrònic i automatització

Com utilitzar imatges d'alta resolució per a pantalles Retina al vostre correu electrònic HTML

La pantalla retina és un terme de màrqueting utilitzat per poma per descriure una pantalla d'alta resolució que té una densitat de píxels prou alta perquè l'ull humà no pugui distingir píxels individuals a una distància de visualització típica. Una pantalla de retina normalment té una densitat de píxels de 300 píxels per polzada (ppi) o superior, que és significativament superior a una pantalla estàndard amb una densitat de píxels de 72 ppi.

Les pantalles Retina són ara força habituals per a pantalles, ordinadors portàtils, dispositius mòbils i tauletes. Molts fabricants ofereixen ara pantalles d'alta resolució amb densitats de píxels que coincideixen o superen les de les pantalles Retina d'Apple.

CSS per mostrar una imatge de resolució més alta per a una pantalla Retina

Podeu utilitzar el codi CSS següent per carregar una imatge d'alta resolució per a una pantalla Retina. Aquest codi detecta la densitat de píxels del dispositiu i carrega la imatge amb el @ 2x sufix per a pantalles Retina, mentre es carrega la imatge de resolució estàndard per a altres pantalles.

@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');
}

Un altre enfocament és utilitzar gràfics vectorials o SVG imatges, que poden escalar a qualsevol resolució sense perdre qualitat. Aquí teniu 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>

En aquest exemple, el codi SVG s'incrusta directament al correu electrònic HTML mitjançant l' <svg> etiqueta. El viewBox defineix les dimensions de la imatge SVG, mentre que l'atribut xmlns L'atribut especifica l'espai de noms XML per a SVG.

El max-width la propietat es troba a la div element per garantir que la imatge SVG s'escala automàticament per adaptar-se a l'espai disponible, fins a una amplada màxima de 300 píxels en aquest cas. Aquesta és la millor pràctica per garantir que les imatges SVG es mostrin correctament a tots els dispositius i clients de correu electrònic.

Nota: El suport SVG pot variar segons el client de correu electrònic, per tant, és important provar el vostre correu electrònic en diversos clients per assegurar-vos que la imatge SVG es mostra correctament.

Una altra manera de codificar correus electrònics HTML per a pantalles Retina és utilitzar srcset. L'ús de l'atribut srcset us permet proporcionar imatges d'alta resolució per a pantalles Retina alhora que garanteix que les imatges tinguin la mida adequada per als dispositius de resolució més baixa.

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

En aquest exemple, el fitxer srcset L'atribut proporciona dues fonts d'imatge: image.jpg per a dispositius amb una resolució de 600 píxels o menys, i image@2x.jpg per a dispositius amb una resolució de 1200 píxels o més. El 600w i 1200w els descriptors especifiquen la mida de les imatges en píxels, cosa que ajuda el navegador a determinar quina imatge es baixa en funció de la resolució del dispositiu.

No tots els clients de correu electrònic admeten el srcset atribut. El nivell de suport per srcset pot variar molt segons el client de correu electrònic, per la qual cosa és important provar els vostres correus electrònics en diversos clients per assegurar-vos que les imatges es mostrin correctament.

HTML per a imatges al correu electrònic optimitzat per a pantalles Retina

és possible codificar un correu electrònic HTML responsiu que mostrarà correctament una imatge amb una resolució optimitzada per a pantalles de retina. Així és com:

  1. Creeu una imatge d'alta resolució que sigui el doble de la mida de la imatge real que voleu mostrar al correu electrònic. Per exemple, si voleu mostrar una imatge de 300×200, creeu una imatge de 600×400.
  2. Deseu la imatge d'alta resolució amb el @ 2x sufix. Per exemple, si la teva imatge original ho és image.png, deseu la versió d'alta resolució com a imatge@2x.png.
  3. Al codi de correu electrònic HTML, utilitzeu el codi següent per mostrar la imatge:
<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)]> és un comentari condicional que s'utilitza per orientar versions específiques de Microsoft Outlook, que utilitza Microsoft Word per representar correus electrònics HTML. El motor de representació HTML de Microsoft Word pot ser força diferent d'altres clients de correu electrònic i navegadors web, de manera que sovint requereix un maneig especial. El

(gte mso 9) La condició comprova si la versió de Microsoft Office és superior o igual a 9, que correspon a Microsoft Office 2000. |(IE) La condició comprova si el client és Internet Explorer, que sovint utilitza Microsoft Outlook.

Correu electrònic HTML amb imatges optimitzades per a la pantalla Retina

Aquí teniu un exemple d'un codi de correu electrònic HTML responsiu que mostra una imatge amb una resolució optimitzada per a pantalles de 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>

Consells sobre la imatge de la pantalla de la retina

Aquí teniu alguns consells addicionals per optimitzar els vostres correus electrònics HTML per a imatges optimitzades per a pantalles Retina:

  • Assegureu-vos que les vostres etiquetes d'imatge inclouen sempre l'ús alt text per proporcionar context a la imatge.
  • Optimitzeu les imatges per al web per reduir la mida del fitxer sense comprometre la qualitat de la imatge. Això pot incloure l'ús compressió d'imatges eines, reduint el nombre de colors utilitzats a la imatge i canviant la mida de la imatge a les seves dimensions òptimes abans de penjar-la al correu electrònic.
  • Eviteu imatges de fons grans que poden alentir els temps de càrrega del correu electrònic.
  • Els GIF animats poden tenir una mida de fitxer més gran que les imatges estàtiques a causa dels múltiples fotogrames necessaris per crear l'animació, assegureu-vos de mantenir-los molt per sota d'1 Mb.

Douglas Karr

Douglas Karr és CMO de OpenINSIGHTS i el fundador de la Martech Zone. Douglas ha ajudat a desenes d'empreses d'èxit de MarTech, ha ajudat en la diligència deguda de més de 5 mil milions de dòlars en adquisicions i inversions de Martech i continua ajudant les empreses a implementar i automatitzar les seves estratègies de vendes i màrqueting. Douglas és un expert i conferenciant de MarTech en transformació digital reconegut internacionalment. Douglas també és autor publicat d'una guia de Dummie i d'un llibre sobre lideratge empresarial.

Articles Relacionats

Torna al botó superior
a prop

Adblock detectat

Martech Zone és capaç de proporcionar-vos aquest contingut sense cap cost perquè monetitzem el nostre lloc mitjançant ingressos publicitaris, enllaços d'afiliats i patrocinis. Agrairem que elimineu el bloquejador d'anuncis mentre visualitzeu el nostre lloc.