Optimizar imágenes para correo electrónico: guía completa

Por qué importa la optimización de imágenes en el correo electrónico

El correo electrónico es uno de los entornos más exigentes para las imágenes. A diferencia de un navegador, donde una imagen grande puede simplemente ralentizar la página, en un email una imagen pesada o no compatible puede romper el diseño, activar filtros de spam, o directamente no mostrarse, dejando a tus suscriptores frente a una cuadrícula de iconos de imagen rota.

Las tres restricciones fundamentales son: tamaño de archivo (que afecta la velocidad de carga en móvil y el tiempo antes de que el usuario pierda interés), compatibilidad de formato (que varía enormemente entre clientes), y comportamiento de renderizado (el CSS, los fondos y las animaciones funcionan de forma muy distinta según el cliente).

Los profesionales del marketing que optimizan sus imágenes de email consistentemente obtienen tasas de clics más altas, tasas de rebote más bajas en las métricas de entregabilidad de los ISP, y tiempos de renderizado más rápidos en conexiones móviles lentas, efectos que se multiplican a lo largo de miles de envíos.

Compatibilidad entre clientes de correo: qué soporta cada uno

Antes de elegir un formato o técnica, necesitas saber qué clientes de correo usa tu audiencia. La tabla a continuación cubre los cuatro clientes dominantes, que juntos representan aproximadamente el 85% de las aperturas de correo electrónico a nivel mundial.

Objetivos de tamaño de archivo y el ancho máximo de 600 px

El ancho máximo universalmente aceptado para las plantillas de correo es de 600 px. Este ancho se renderiza correctamente en los clientes de escritorio y se reduce de forma fluida en dispositivos móviles sin provocar desplazamiento horizontal. Cualquier imagen de más de 600 px de ancho puede romper el diseño en Outlook, que no aplica max-width: 100% automáticamente.

Más allá del diseño, el tamaño del archivo es tu principal palanca de rendimiento. A continuación se indican los tamaños máximos recomendados por tipo de imagen:

JPEG frente a PNG en el correo electrónico

JPEG es la opción adecuada para contenido fotográfico: banners hero, fotos de productos, imágenes de estilo de vida y cualquier imagen con degradados o transiciones de color complejas. Con una calidad de 75–80 en la mayoría de los codificadores, JPEG produce archivos lo suficientemente pequeños para cumplir el objetivo de 100 KB manteniendo una excelente fidelidad visual a 600 px de ancho.

PNG debe reservarse para imágenes que requieren fondo transparente (logotipos, textos superpuestos, iconos con bordes suaves) o imágenes predominantemente de color plano con bordes definidos (capturas de pantalla, maquetas de interfaz, gráficos). PNG es sin pérdida, lo que significa que los archivos son predeciblemente más grandes: una foto de producto de 300 × 300 en PNG puede superar fácilmente los 150 KB.

Un error común es usar PNG para fotografías "porque tiene mayor calidad". A los tamaños utilizados en los emails, el JPEG con calidad 80 es visualmente indistinguible del PNG para fotos, y la diferencia de tamaño puede ser de 5 a 10 veces.

No uses WebP como formato principal de imagen en email. Aunque Apple Mail y Gmail lo soportan, Outlook y Yahoo no, y no existe una forma fiable de servir un WebP alternativo frente a JPEG por cliente de correo, como sí ocurre con el elemento HTML <picture> en un navegador.

GIF animados y la regla del primer fotograma

Los GIF animados siguen siendo el único formato de animación compatible de forma generalizada en el correo electrónico. Las animaciones CSS y el vídeo (incluso MP4) no están soportados de forma fiable en todos los clientes. Sin embargo, Outlook 2007–2021 en Windows no anima los GIF: muestra únicamente el primer fotograma.

Esto se conoce como la regla del primer fotograma, y tiene una implicación directa en el diseño: tu primer fotograma debe ser autosuficiente. Si tu GIF animado revela un código de descuento en el tercer fotograma, los usuarios de Outlook no lo verán nunca. Diseña el primer fotograma para que contenga toda la información clave (el titular, la oferta, la llamada a la acción) y trata los fotogramas posteriores como un plus para los clientes que soportan animación.

Para mantener los GIF animados por debajo de 200 KB: limítate a 3–5 fotogramas, reduce los colores a 64 o 128 (del máximo de 256), restringe las dimensiones a 600 × 200 px o menos, y usa un ajuste de difuminado del 50% o menos. Herramientas como ezgif.com y el optimizador de imgpact pueden eliminar metadatos y optimizar las paletas de fotogramas automáticamente.

Solución VML de Outlook para imágenes de fondo

Outlook (versiones de escritorio para Windows) ignora completamente las propiedades CSS background-image. Si el diseño de tu plantilla depende de una imagen de fondo detrás del texto (un patrón habitual en las secciones hero) los usuarios de Outlook solo verán el color de fondo alternativo, eliminando el impacto visual del diseño.

La solución estándar es Vector Markup Language (VML) de Microsoft, una sintaxis XML heredada que el motor de renderizado de Outlook (que utiliza el motor de maquetación de Word, no un motor de navegador) sí entiende. El patrón envuelve un elemento VML v:rect con un atributo fill alrededor del contenido, dentro de comentarios condicionales de Outlook:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
  style="width:600px;height:200px;">
  <v:fill type="frame" src="https://example.com/hero.jpg" color="#1a1a2e"/>
  <v:textbox inset="0,0,0,0">
<![endif]-->
  <!-- Tu contenido visible para todos los demás clientes -->
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->

El atributo color en v:fill actúa como alternativa si la imagen no carga. Establécelo siempre en un color que mantenga el texto legible.

Texto alternativo y la lista de verificación previa al envío

El texto alternativo (alt text) no es opcional en el correo electrónico. Los entornos de email corporativos suelen bloquear las imágenes por defecto, lo que significa que un porcentaje significativo de tu audiencia B2B puede leer tu email viendo únicamente las etiquetas de texto alternativo. Escribe un alt text descriptivo y orientado a la acción para cada imagen, especialmente en las llamadas a la acción: alt="Compra en las rebajas de verano, 40% de descuento" es mucho más útil que alt="imagen1.jpg".

Usa esta lista de verificación antes de cada envío:

• Todas las imágenes alojadas en una CDN fiable (no como archivos adjuntos al email)
• Ninguna imagen de más de 600 px de ancho
• Imágenes hero ≤ 100 KB, peso total de imágenes del email ≤ 600 KB
• JPEG utilizado para fotos, PNG solo para logotipos/iconos con transparencia
• Sin imágenes WebP (usa JPEG/PNG para máxima compatibilidad)
• El primer fotograma del GIF animado contiene todo el contenido crítico
• Texto alternativo completado para cada etiqueta <img>
• Alternativa VML de Outlook implementada para cualquier imagen de fondo
• Probado en Apple Mail, Gmail (web), Outlook 2019 y la app de Gmail en Android
• Tamaño total del código HTML inferior a 100 KB (para evitar el recorte de Gmail)