Tamaño y peso de imágenes para newsletters

Mantenga cada imagen del boletín por debajo de 100 KB, ajuste el tamaño de las imágenes al doble de su ancho de visualización y use JPG o PNG en lugar de WebP. Gmail trunca cualquier mensaje cuyo lenguaje de marcado de hipertexto (HTML) supere aproximadamente los 102 KB, reemplazando el resto con un enlace para ver el mensaje completo.

La mayoría de los remitentes descubren el límite de recorte de la manera difícil, generalmente cuando el enlace de cancelación de suscripción y el píxel de seguimiento quedan fuera del corte. Las imágenes suelen ser el motivo, ya sea porque están incrustadas directamente en el mensaje o porque el marcado que las rodea ha crecido a lo largo de varias campañas.

Qué mide realmente el límite de recorte de Gmail

Gmail mide el código fuente HTML del mensaje, no las imágenes a las que enlaza. Un boletín que enlaza a 10 fotografías grandes se mantiene muy dentro del límite, mientras que un mensaje con estilos en línea pesados e imágenes incrustadas no lo hace.

La distinción es importante porque la solución es diferente. Las imágenes enlazadas no cuentan para la cifra de 102 KB, por lo que el recorte suele deberse a estilos en línea repetidos, parámetros de seguimiento largos en cada enlace o imágenes incrustadas como datos base64. Eliminar las imágenes incrustadas y recortar el marcado resuelve el recorte, mientras que comprimir las fotografías enlazadas resuelve el tiempo de carga.

Tamaños de imagen recomendados para correo electrónico

Diseñe el cuerpo del correo electrónico a 600 píxeles de ancho y exporte las imágenes a 1200 píxeles para pantallas de alta densidad. El estándar de 600 píxeles se ha mantenido durante años porque se adapta al panel de vista previa de cualquier cliente de escritorio sin necesidad de desplazamiento horizontal.

Duplicar el ancho de exportación cubre las pantallas de alta densidad y se detiene ahí. Exportar a 3 veces el ancho de visualización añade un peso que ningún cliente de correo electrónico procesa mejor, y el correo electrónico es el único canal donde cada kilobyte se descarga en un teléfono.

Por qué WebP sigue siendo la opción incorrecta en el correo electrónico

El soporte de los clientes de correo electrónico para WebP sigue siendo desigual, y Outlook en particular sigue siendo impredecible. El correo electrónico es uno de los pocos lugares que quedan donde los formatos antiguos y seguros son la decisión correcta.

Todos los navegadores web son compatibles con WebP, lo que lleva a la gente a asumir que los clientes de correo electrónico también lo son. Outlook para escritorio procesa los mensajes con un motor completamente diferente, y varios sistemas de correo corporativos eliminan o fallan con los formatos que no reconocen. Una imagen rota en un boletín es mucho más costosa que el ahorro de archivo del 30 por ciento que ofrecería WebP, por lo que JPG y PNG siguen siendo los correctos aquí.

Elección de formato dentro del correo electrónico

Use JPG para fotografías y PNG para logotipos, botones y cualquier cosa que contenga texto. La regla es la misma que en la web, y las consecuencias son más visibles porque las imágenes de correo electrónico suelen ser pequeñas.

• JPG para fotografías de productos, imágenes de encabezado y cualquier imagen de una escena real.
• PNG para logotipos, iconos y gráficos con colores planos o bordes de texto nítidos.
• GIF animado solo cuando la animación aporte significado, y manteniéndolo por debajo de 1 MB.
• Evite WebP y AVIF, ya que ninguno se procesa de manera confiable en todos los clientes de correo.
• Evite SVG por completo, porque la mayoría de los clientes de correo electrónico lo bloquean por razones de seguridad.

Las imágenes están bloqueadas por defecto en muchos clientes

Muchos destinatarios ven su correo electrónico con las imágenes desactivadas, por lo que el mensaje debe seguir funcionando como texto. Tanto los sistemas de correo corporativos como los usuarios preocupados por la privacidad bloquean las imágenes remotas hasta que el lector decide cargarlas.

Escriba texto alternativo en cada imagen, ya que las imágenes bloqueadas muestran ese texto en su lugar. Nunca coloque información esencial, incluida la oferta, la fecha límite o la llamada a la acción, únicamente dentro de una imagen. Un boletín construido completamente a partir de un solo gráfico grande se convierte en un rectángulo en blanco para una parte significativa de la lista, y también funciona mal con los lectores de pantalla.

Cómo preparar imágenes para boletines

Para mantener un boletín rápido y legible, siga estos 7 pasos.

1. Diseñe el correo electrónico a 600 píxeles de ancho, que todos los clientes de escritorio procesan sin necesidad de desplazarse.
2. Recorte cada imagen con la forma exacta que ocupará en el diseño.
3. Cambie el tamaño al doble del ancho de visualización, y no más.
4. Convierta a JPG para fotografías o PNG para gráficos que contengan texto.
5. Comprima cada archivo a un objetivo inferior a 100 KB.
6. Aloje las imágenes en su plataforma de envío o en su propio servidor en lugar de incrustarlas en el mensaje.
7. Envíe una prueba a Gmail, Outlook y a un teléfono antes de programar la campaña.

El peso total del correo electrónico importa más que cualquier imagen individual

Mantenga todo el mensaje por debajo de 600 KB, incluidas las imágenes, porque los suscriptores abren los boletines en teléfonos, a menudo con malas conexiones. Un boletín de 5 MB se carga lentamente y se cierra antes de que se procese.

Cuente las imágenes antes de comprimir nada. Un boletín que lleva 12 fotografías de 100 KB cada una ya está en 1.2 MB, lo que sugiere que el diseño necesita menos imágenes en lugar de imágenes más pequeñas. Reducir la cantidad de imágenes suele mejorar tanto el rendimiento como la legibilidad, ya que los boletines largos y cargados de imágenes rara vez se leen hasta el final.

El modo oscuro cambia la apariencia de las imágenes

Varios clientes invierten o ajustan los colores en el modo oscuro, y un logotipo sobre un fondo blanco se convierte en un rectángulo brillante en un mensaje oscuro. Pruebe cada campaña en modo oscuro antes de enviarla.

Use archivos PNG con fondos transparentes para logotipos e iconos para que se asienten correctamente en cualquier color. Evite las imágenes con fondos blancos donde el diseño asume que la página detrás de ellas también es blanca. Las fotografías suelen ser seguras, ya que los clientes rara vez alteran el contenido fotográfico, mientras que los gráficos planos y las imágenes de texto es donde aparecen los problemas del modo oscuro.

Pantallas Retina y nitidez de imagen

Exporte al doble del ancho de visualización para que las imágenes se mantengan nítidas en pantallas de alta densidad, luego comprima más para compensar los píxeles adicionales. Una imagen de 1200 píxeles con calidad 70 suele verse mejor y pesar menos que una imagen de 600 píxeles con calidad 95.

Establezca el atributo de ancho en el marcado al tamaño de visualización en lugar de al tamaño del archivo, de modo que el cliente procese la imagen a 600 píxeles mientras utiliza el detalle adicional. Omitir el atributo de ancho hace que algunos clientes muestren la imagen a su tamaño de píxel completo, lo que rompe el diseño en el escritorio.

Comprobación de una campaña antes de enviarla

• Envíe una prueba a Gmail, Outlook, Apple Mail y al menos a un teléfono.
• Visualice la prueba con las imágenes bloqueadas, confirmando que el mensaje sigue teniendo sentido.
• Compruebe que el mensaje no esté recortado en Gmail, que muestra un enlace para ver el mensaje completo en el corte.
• Confirme que cada imagen tenga un texto alternativo que describa lo que muestra.
• Compruebe la visualización en modo oscuro, especialmente para logotipos y gráficos planos.
• Sume el peso total de todas las imágenes y confirme que se mantiene por debajo de 600 KB.

Preparación de una campaña en un solo lote

Procese todas las imágenes del boletín juntas para que toda la campaña comparta una misma especificación. Un boletín suele llevar de 5 a 15 imágenes, y un remitente semanal prepara cientos a lo largo de un año.

Establezca el ancho y el objetivo de KB una vez, suelte las imágenes y cada archivo se devolverá adaptado. Todo se ejecuta dentro de su navegador en su propio procesador, por lo que las ofertas no anunciadas, las listas de suscriptores renderizadas como imágenes y el trabajo de campaña de los clientes nunca llegan a un servidor. Para una agencia que prepara un lanzamiento, mantener esos archivos locales evita una divulgación que ningún ahorro de compresión justificaría.

Mantenga una carpeta de plantillas con marcadores de posición del tamaño correcto para cada bloque de diseño recurrente, como el encabezado, la fila de productos de 2 columnas y el logotipo del pie de página. Los remitentes semanales reutilizan las mismas 4 o 5 formas indefinidamente, y adaptar el nuevo material gráfico a una especificación existente requiere menos tiempo que decidir las dimensiones de nuevo para cada campaña.