Marketing por correo electrónico y automatización

Cómo usar imágenes de alta resolución para pantallas Retina en su correo electrónico HTML

Retina display es un término de marketing utilizado por Apple para describir una pantalla de alta resolución que tiene una densidad de píxeles lo suficientemente alta como para que el ojo humano no pueda distinguir píxeles individuales a una distancia de visualización típica. Una pantalla retina normalmente tiene una densidad de píxeles de 300 píxeles por pulgada (ppi) o superior, que es significativamente más alta que una pantalla estándar con una densidad de píxeles de 72 ppp.

Las pantallas Retina ahora son bastante convencionales para pantallas, computadoras portátiles, dispositivos móviles y tabletas. Muchos fabricantes ahora ofrecen pantallas de alta resolución con densidades de píxeles que igualan o superan las de las pantallas Retina de Apple.

CSS para mostrar una imagen de mayor resolución para una pantalla Retina

Puede usar el siguiente código CSS para cargar una imagen de alta resolución para una pantalla Retina. Este código detecta la densidad de píxeles del dispositivo y carga la imagen con el @2x sufijo para pantallas Retina, mientras carga la imagen de resolución estándar para otras 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');
}

Otro enfoque es utilizar gráficos vectoriales o SVG imágenes, que se pueden escalar a cualquier resolución sin perder calidad. Aquí hay un ejemplo:

<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 este ejemplo, el código SVG está incrustado directamente en el correo electrónico HTML usando el <svg> tag. La viewBox atributo define las dimensiones de la imagen SVG, mientras que el xmlns El atributo especifica el espacio de nombres XML para SVG.

La max-width la propiedad se establece en el div para garantizar que la imagen SVG se escale automáticamente para adaptarse al espacio disponible, hasta un ancho máximo de 300 px en este caso. Esta es una práctica recomendada para garantizar que las imágenes SVG se muestren correctamente en todos los dispositivos y clientes de correo electrónico.

Nota: La compatibilidad con SVG puede variar según el cliente de correo electrónico, por lo que es importante probar su correo electrónico en varios clientes para asegurarse de que la imagen SVG se muestre correctamente.

Otra forma de codificar correos electrónicos HTML para pantallas Retina es utilizar srcset. El uso del atributo srcset le permite proporcionar imágenes de alta resolución para pantallas Retina al tiempo que garantiza que las imágenes tengan el tamaño adecuado para 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;">

En este ejemplo, el srcset El atributo proporciona dos fuentes de imagen: image.jpg para dispositivos con una resolución de 600 píxeles o menos, y image@2x.jpg para dispositivos con una resolución de 1200 píxeles o más. El 600w y 1200w Los descriptores especifican el tamaño de las imágenes en píxeles, lo que ayuda al navegador a determinar qué imagen descargar en función de la resolución del dispositivo.

No todos los clientes de correo electrónico admiten el srcset atributo. El nivel de apoyo a srcset puede variar ampliamente según el cliente de correo electrónico, por lo que es importante probar sus correos electrónicos en varios clientes para asegurarse de que las imágenes se muestren correctamente.

HTML para imágenes en correo electrónico optimizado para pantallas Retina

es posible codificar un correo electrónico HTML receptivo que muestre correctamente una imagen a una resolución optimizada para pantallas retina. Así es cómo:

  1. Cree una imagen de alta resolución que sea el doble del tamaño de la imagen real que desea mostrar en el correo electrónico. Por ejemplo, si desea mostrar una imagen de 300 × 200, cree una imagen de 600 × 400.
  2. Guarde la imagen de alta resolución con el @2x sufijo. Por ejemplo, si su imagen original es image.png, guarde la versión de alta resolución como imagen@2x.png.
  3. En su código de correo electrónico HTML, use el siguiente código para mostrar la imagen:
<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)]> es un comentario condicional que se usa para apuntar a versiones específicas de Microsoft Outlook, que usa Microsoft Word para representar correos electrónicos HTML. El motor de representación HTML de Microsoft Word puede ser bastante diferente de otros clientes de correo electrónico y navegadores web, por lo que a menudo requiere un manejo especial. El

(gte mso 9) condición comprueba si la versión de Microsoft Office es mayor o igual a 9, que corresponde a Microsoft Office 2000. La |(IE) condition comprueba si el cliente es Internet Explorer, que suele ser utilizado por Microsoft Outlook.

Correo electrónico HTML con imágenes optimizadas Retina Display

Este es un ejemplo de un código de correo electrónico HTML receptivo que muestra una imagen con una resolución optimizada para pantallas 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>

Sugerencias para la imagen de la pantalla Retina

Aquí hay algunos consejos adicionales sobre cómo optimizar sus correos electrónicos HTML para imágenes optimizadas para pantallas Retina:

  • Asegúrese de que sus etiquetas de imagen siempre incluyan el uso de alt texto para proporcionar contexto a la imagen.
  • Optimice las imágenes para la web para reducir el tamaño del archivo sin comprometer la calidad de la imagen. Esto puede incluir el uso compresión de imagen herramientas, reducir la cantidad de colores utilizados en la imagen y cambiar el tamaño de la imagen a sus dimensiones óptimas antes de cargarla en el correo electrónico.
  • Evite las imágenes de fondo grandes que pueden ralentizar los tiempos de carga del correo electrónico.
  • Los GIF animados pueden tener un tamaño de archivo más grande que las imágenes estáticas debido a los múltiples cuadros necesarios para crear la animación, asegúrese de mantenerlos por debajo de 1 Mb.

Douglas Karr

Douglas Karr es CMO de AbrirINSIGHTS y el fundador de la Martech Zone. Douglas ha ayudado a docenas de nuevas empresas exitosas de MarTech, ha colaborado en la diligencia debida de más de $5 mil millones en adquisiciones e inversiones de Martech y continúa ayudando a las empresas a implementar y automatizar sus estrategias de ventas y marketing. Douglas es un orador y experto en transformación digital y MarTech reconocido internacionalmente. Douglas también es autor de una guía para principiantes y de un libro sobre liderazgo empresarial.

Artículos Relacionados

Volver al botón superior
Cerrar

Adblock detectado

Martech Zone puede proporcionarle este contenido sin costo porque monetizamos nuestro sitio a través de ingresos publicitarios, enlaces de afiliados y patrocinios. Le agradeceríamos que elimine su bloqueador de anuncios mientras visita nuestro sitio.