Gestión de imágenes en clientes de correo

Muchos clientes bloquean las imágenes de forma predeterminada hasta que el usuario hace clic en "mostrar imágenes". Outlook, Gmail (para remitentes desconocidos) y la mayoría de los clientes móviles con una conexión de datos medida muestran en su lugar un marcador de posición. Diseñe suponiendo que las imágenes podrían no aparecer.

No incluya nunca el contenido esencial (encabezados, etiquetas de CTA, precios) dentro de imágenes. Use texto HTML con CSS en línea para que el mensaje llegue incluso cuando las imágenes estén bloqueadas, los lectores de pantalla puedan leerlo y los ajustes de inversión del modo oscuro se apliquen correctamente.

Todo <img> necesita un atributo alt descriptivo. Cuando las imágenes están bloqueadas, el texto alternativo aparece en el cuadro del marcador de posición; un texto alternativo bien redactado llena el vacío visual con el mensaje que habría transmitido la imagen.

Sin dimensiones explícitas, el marcador de posición se contrae y el diseño cambia cuando se carga la imagen. Establezca ambos atributos (y el estilo en línea correspondiente) para que la celda reserve espacio tanto si la imagen llega como si no.

Outlook inserta un pequeño espacio debajo de las imágenes en línea. Aplique style="display:block" a cada <img> para eliminar ese espacio y garantizar un ritmo vertical uniforme en todos los clientes.

Los clientes antiguos añaden un borde azul alrededor de <a><img></a>. Establezca border="0" en el atributo de la imagen y style="border:0" en línea para que las imágenes incluidas en llamadas a la acción se muestren correctamente.

Los clientes de correo no tienen el concepto de "esta página". Cada src de imagen debe ser una URL absoluta https:// que apunte a una CDN accesible públicamente. Las rutas locales, las rutas relativas y las URL http:// (contenido mixto) no se cargan y fallan de forma silenciosa.

Use un alojamiento de imágenes rápido y distribuido geográficamente. Algunos clientes descargan las imágenes mediante proxies (Gmail), que añaden su propia capa de caché; las CDN propias evitan cargar las imágenes directamente desde un origen lento y garantizan que se carguen de forma uniforme en todas las regiones.

Para los fondos principales, combine el background-image de CSS con un bgcolor que coincida con el tono predominante. Si la imagen está bloqueada, la celda seguirá mostrando un color adecuado y el texto superpuesto al bgcolor continuará siendo legible, evitando el desastre de texto blanco sobre un bloque blanco.

Represente las imágenes a 2x y reduzca su tamaño mediante el atributo width para que se vean nítidas en pantallas de alta densidad de píxeles: una fuente de 600x600 mostrada con width="300" height="300" se ve nítida en Retina. El costo es un mayor consumo de ancho de banda, así que mantenga los archivos pequeños con una compresión equivalente a la de WebP.

Los GIF animados funcionan en la mayoría de los clientes, excepto Outlook (que solo muestra el primer fotograma). Diseñe el primer fotograma de modo que tenga sentido como imagen estática: el titular, la CTA o el valor principal deben poder leerse incluso sin el resto de la animación.

¿Por qué el contenido esencial (encabezados, etiquetas de CTA, precios) nunca debe incluirse dentro de imágenes en un correo HTML?

Trate las imágenes como una mejora, no como el mensaje. Use URL https absolutas, establezca width/height/display:block/border:0, escriba textos alternativos significativos, aloje las imágenes en una CDN rápida, combine los fondos con alternativas bgcolor, diseñe a 2x para Retina y recuerde que Outlook congela los GIF en el primer fotograma.