Email Marketing & Automatización

Como usar imaxes de alta resolución para pantallas Retina no teu correo electrónico HTML

Retina display é un termo de mercadotecnia usado por mazá para describir unha pantalla de alta resolución que ten unha densidade de píxeles o suficientemente alta como para que o ollo humano non poida distinguir píxeles individuais a unha distancia de visualización típica. Unha pantalla retina normalmente ten unha densidade de píxeles de 300 píxeles por polgada (ppi) ou superior, que é significativamente superior a unha pantalla estándar cunha densidade de píxeles de 72 ppi.

As pantallas Retina son agora bastante comúns para pantallas, portátiles, dispositivos móbiles e tabletas. Moitos fabricantes ofrecen agora pantallas de alta resolución con densidades de píxeles que coinciden ou superan as das pantallas Retina de Apple.

CSS para mostrar unha imaxe de maior resolución para unha pantalla Retina

Podes usar o seguinte código CSS para cargar unha imaxe de alta resolución para unha pantalla Retina. Este código detecta a densidade de píxeles do dispositivo e carga a imaxe co @ 2x sufixo para pantallas Retina, mentres se carga a imaxe de resolución estándar para outras pantallas.

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

Outro enfoque é utilizar gráficos vectoriais ou SVG imaxes, que poden escalar a calquera resolución sen perder calidade. Aquí tes un exemplo:

<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>

Neste exemplo, o código SVG incorpórase directamente no correo electrónico HTML mediante o <svg> etiqueta. O viewBox define as dimensións da imaxe SVG, mentres que o xmlns o atributo especifica o espazo de nomes XML para SVG.

o max-width a propiedade está establecida no div elemento para garantir que a imaxe SVG escala automaticamente para adaptarse ao espazo dispoñible, ata un ancho máximo de 300 píxeles neste caso. Esta é a mellor práctica para garantir que as imaxes SVG se mostren correctamente en todos os dispositivos e clientes de correo electrónico.

Nota: A compatibilidade con SVG pode variar dependendo do cliente de correo electrónico, polo que é importante probar o teu correo electrónico en varios clientes para asegurarte de que a imaxe SVG se mostra correctamente.

Outra forma de codificar correos electrónicos HTML para pantallas Retina é utilizar srcset. Usar o atributo srcset permítelle proporcionar imaxes de alta resolución para as pantallas Retina ao tempo que garante que as imaxes teñan o tamaño adecuado para os dispositivos de menor resolución.

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

Neste exemplo, o srcset o atributo proporciona dúas fontes de imaxe: image.jpg para dispositivos cunha resolución de 600 píxeles ou menos, e image@2x.jpg para dispositivos cunha resolución de 1200 píxeles ou máis. O 600w 1200w Os descritores especifican o tamaño das imaxes en píxeles, o que axuda ao navegador a determinar que imaxe descargar en función da resolución do dispositivo.

Non todos os clientes de correo electrónico admiten srcset atributo. O nivel de apoio para srcset pode variar moito dependendo do cliente de correo electrónico, polo que é importante probar os seus correos electrónicos en varios clientes para asegurarse de que as imaxes se amosan correctamente.

HTML para imaxes en correo electrónico optimizado para pantallas Retina

é posible codificar un correo electrónico HTML receptivo que mostrará correctamente unha imaxe cunha resolución optimizada para pantallas de retina. Aquí tes como:

  1. Crea unha imaxe de alta resolución que sexa o dobre do tamaño da imaxe real que queres mostrar no correo electrónico. Por exemplo, se quere mostrar unha imaxe de 300×200, cree unha imaxe de 600×400.
  2. Garda a imaxe de alta resolución co @ 2x sufixo. Por exemplo, se a túa imaxe orixinal é image.png, garda a versión de alta resolución como imaxe@2x.png.
  3. No teu código de correo electrónico HTML, utiliza o seguinte código para mostrar a imaxe:
<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)]> é un comentario condicional que se usa para orientar versións específicas de Microsoft Outlook, que usa Microsoft Word para renderizar correos electrónicos HTML. O motor de renderizado HTML de Microsoft Word pode ser bastante diferente doutros clientes de correo electrónico e navegadores web, polo que moitas veces require un manexo especial. O

(gte mso 9) condición comproba se a versión de Microsoft Office é maior ou igual a 9, que corresponde a Microsoft Office 2000. |(IE) condición comproba se o cliente é Internet Explorer, que adoita usar Microsoft Outlook.

Correo electrónico HTML con imaxes optimizadas para visualización de retina

Aquí tes un exemplo de código de correo electrónico HTML receptivo que mostra unha imaxe cunha resolución optimizada para pantallas 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>

Consellos sobre imaxes de visualización de retina

Aquí tes algúns consellos adicionais para optimizar os teus correos electrónicos HTML para imaxes optimizadas para pantallas Retina:

  • Asegúrate de que as túas etiquetas de imaxe inclúan sempre o uso alt texto para proporcionar contexto á imaxe.
  • Optimice as imaxes para a web para reducir o tamaño do ficheiro sen comprometer a calidade da imaxe. Isto pode incluír o uso compresión de imaxe ferramentas, reducindo o número de cores utilizadas na imaxe e redimensionando a imaxe ás súas dimensións óptimas antes de cargala ao correo electrónico.
  • Evite imaxes de fondo grandes que poidan retardar os tempos de carga dos correos electrónicos.
  • Os GIF animados poden ter un tamaño de ficheiro máis grande que as imaxes estáticas debido aos múltiples fotogramas necesarios para crear a animación, asegúrate de mantelos ben por debaixo de 1 Mb.

Douglas Karr

Douglas Karr é CMO de OpenINSIGHTS e o fundador da Martech Zone. Douglas axudou a decenas de startups exitosas de MarTech, axudou na debida dilixencia de máis de 5 millóns de dólares en adquisicións e investimentos en Martech e segue axudando ás empresas a implementar e automatizar as súas estratexias de vendas e mercadotecnia. Douglas é un experto e relator de MarTech en transformación dixital recoñecido internacionalmente. Douglas tamén é autor publicado dunha guía de Dummie e dun libro de liderado empresarial.

artigos relacionados

Botón de volta ao principio
preto

Adblock detectado

Martech Zone pode fornecerche este contido sen ningún custo porque monetizamos o noso sitio mediante ingresos publicitarios, ligazóns de afiliados e patrocinios. Agradeceríamos que elimines o teu bloqueador de anuncios mentres visitas o noso sitio.