Reach

Grow

Manage

Automate

Reach

Grow

Manage

Automate

La Importancia del Tamaño de Archivo del Correo Electrónico

Correo electrónico

1 min read

La Importancia del Tamaño de Archivo del Correo Electrónico

Correo electrónico

1 min read

La Importancia del Tamaño de Archivo del Correo Electrónico

Cuando hablamos del tamaño de los archivos en el email, realmente estamos hablando de 3 temas: el tamaño del archivo HTML enviado, el tamaño de los activos externos y el tamaño total cargado. Queremos mantener todos estos tamaños de archivo lo más pequeños posible, pero ¿cuáles son los tamaños máximos y a qué deberíamos aspirar?

HTML File Size

El tamaño del archivo HTML es el tamaño del archivo .html que se envía realmente. Este tamaño de archivo no incluye el tamaño de las imágenes incluidas, ya que estas estarían vinculadas desde este archivo html y se descargarían al abrirse.

El tamaño máximo que recomendamos es de 100KB, ya que cualquier cosa superior puede llevar a problemas de entregabilidad y visualización. Por ejemplo, Gmail cortará tu html en 102KB. El recorte ocultará el final de tu correo electrónico y puede romper tu diseño.

La mayoría de los correos electrónicos deberían fácilmente estar por debajo de 50KB. Sin embargo, a veces, las mejoras progresivas complejas o una gran cantidad de contenido de campaña resultan en un tamaño de archivo mayor. Si esto sucede, hay varias maneras de ayudar a reducir el tamaño de tu archivo HTML.

  • Limpiar tu código. El correo electrónico está cambiando constantemente y vemos muchas plantillas con código desactualizado. Una limpieza rápida puede ahorrar unos cuantos KBs.

  • No sobrecargar el código. Algunas plantillas que vemos tienen código adicional que simplemente no es necesario. El peor infractor es añadir elementos de tabla adicionales. La mayoría de los diseños se pueden lograr con 5-10 tablas, pero a menudo vemos código con 30-40 tablas. Menos tablas también tiene el beneficio adicional de hacer que tu código sea más fácil de leer.

  • Mover algo de código de HTML a CSS. Aún no es seguro mover todos tus estilos a CSS, pero si se hace correctamente, mover algunos estilos en línea a estilos incorporados puede ayudar a reducir el código.

  • Simplificar tu diseño. Otra opción es volver a la etapa de diseño. Los correos electrónicos de una sola columna usan mucho menos código.

  • Minificar tu código. Minificar el código eliminará espacios y comentarios innecesarios. Esto puede tener un gran efecto, pero ten cuidado ya que muchos ESPs imponen una longitud máxima de línea que podría forzar una nueva línea y romper el código.

Tamaño de External Assets

El tamaño de los recursos externos es el tamaño de todas tus imágenes y hojas de estilo externas. Dado que los tamaños externos son raros, nos enfocaremos más en las imágenes por ahora.

Si estás utilizando imágenes de fondo y consultas de medios, entonces es posible que en ciertos entornos no todo se descargue para cada usuario. Pero, recuerda que incluso si defines display:none;  en un elemento <img>, aún se descargará. Actualmente no hay forma de detener esto.

El tamaño máximo para la mayoría de las imágenes es de 100KB, pero si tienes una imagen grande de alta resolución o un gif animado, podría llegar hasta 500KB. Sin embargo, es más sobre el tamaño total, del cual hablaremos en la sección de tamaño total del correo electrónico completamente cargado.

Hay muchos recursos disponibles para ayudar a comprimir el tamaño de las imágenes:

  • ImageOptim – en Mac, o como un servicio web

  • Caesium – en Windows

  • CDN –  Muchos CDNs tienen optimización de imágenes incorporada. Algunos incluso ajustan la compresión dependiendo del ancho de banda disponible.

Aquí hay algunos otros consejos que recomendamos:

  • Asegúrate de estar usando el formato más adecuado, .jpg para fotos, .gif para gráficos y .png para cuando necesites canales alfa

  • Simplifica tu diseño. Nuevamente, vuelve a la etapa de diseño para usar menos imágenes, imágenes más pequeñas o imágenes más simples que se puedan comprimir a tamaños más pequeños.

El tamaño de los recursos externos es el tamaño de todas tus imágenes y hojas de estilo externas. Dado que los tamaños externos son raros, nos enfocaremos más en las imágenes por ahora.

Si estás utilizando imágenes de fondo y consultas de medios, entonces es posible que en ciertos entornos no todo se descargue para cada usuario. Pero, recuerda que incluso si defines display:none;  en un elemento <img>, aún se descargará. Actualmente no hay forma de detener esto.

El tamaño máximo para la mayoría de las imágenes es de 100KB, pero si tienes una imagen grande de alta resolución o un gif animado, podría llegar hasta 500KB. Sin embargo, es más sobre el tamaño total, del cual hablaremos en la sección de tamaño total del correo electrónico completamente cargado.

Hay muchos recursos disponibles para ayudar a comprimir el tamaño de las imágenes:

  • ImageOptim – en Mac, o como un servicio web

  • Caesium – en Windows

  • CDN –  Muchos CDNs tienen optimización de imágenes incorporada. Algunos incluso ajustan la compresión dependiendo del ancho de banda disponible.

Aquí hay algunos otros consejos que recomendamos:

  • Asegúrate de estar usando el formato más adecuado, .jpg para fotos, .gif para gráficos y .png para cuando necesites canales alfa

  • Simplifica tu diseño. Nuevamente, vuelve a la etapa de diseño para usar menos imágenes, imágenes más pequeñas o imágenes más simples que se puedan comprimir a tamaños más pequeños.

El tamaño de los recursos externos es el tamaño de todas tus imágenes y hojas de estilo externas. Dado que los tamaños externos son raros, nos enfocaremos más en las imágenes por ahora.

Si estás utilizando imágenes de fondo y consultas de medios, entonces es posible que en ciertos entornos no todo se descargue para cada usuario. Pero, recuerda que incluso si defines display:none;  en un elemento <img>, aún se descargará. Actualmente no hay forma de detener esto.

El tamaño máximo para la mayoría de las imágenes es de 100KB, pero si tienes una imagen grande de alta resolución o un gif animado, podría llegar hasta 500KB. Sin embargo, es más sobre el tamaño total, del cual hablaremos en la sección de tamaño total del correo electrónico completamente cargado.

Hay muchos recursos disponibles para ayudar a comprimir el tamaño de las imágenes:

  • ImageOptim – en Mac, o como un servicio web

  • Caesium – en Windows

  • CDN –  Muchos CDNs tienen optimización de imágenes incorporada. Algunos incluso ajustan la compresión dependiendo del ancho de banda disponible.

Aquí hay algunos otros consejos que recomendamos:

  • Asegúrate de estar usando el formato más adecuado, .jpg para fotos, .gif para gráficos y .png para cuando necesites canales alfa

  • Simplifica tu diseño. Nuevamente, vuelve a la etapa de diseño para usar menos imágenes, imágenes más pequeñas o imágenes más simples que se puedan comprimir a tamaños más pequeños.

Tamaño de Email Fully Loaded

Este es el tamaño combinado de todo cuando el correo electrónico está abierto y todo se ha descargado. Esto puede variar dependiendo del entorno donde se abra el correo electrónico.

El principal problema aquí es el tiempo que tarda en cargarse el correo electrónico. Probablemente estarás probando tus correos electrónicos en una oficina con una conexión muy rápida, pero muchos de tus destinatarios podrían estar en dispositivos móviles con una conexión 3G lenta.

En una buena conexión, un tamaño total de correo electrónico de 1mb se cargaría en una fracción de segundo y parecería instantáneo para el usuario. Sin embargo, en una conexión 3G podría tardar entre 2 y 14 segundos en cargar el correo electrónico completo. Y, si tu audiencia objetivo probablemente esté en una conexión 2G, esa descarga podría tardar un par de minutos.

Esto también es un problema potencial con usuarios con planes de datos restrictivos que deben considerar cada MB que descargan. Esto es particularmente una consideración en las naciones en desarrollo.

Un par de cosas que puedes hacer para ayudar:

En primer lugar, revisa todas las recomendaciones que mencionamos sobre la optimización del tamaño de html e imágenes.
Si tienes tiempo, siempre es bueno experimentar con el código y verificar qué es realmente necesario y qué puedes omitir. Experimenta con imágenes e intenta diferentes formas de comprimirlas. Asegúrate de que tu correo electrónico se vea bien y tenga sentido sin imágenes, para que tus usuarios puedan comenzar a mirar tu correo electrónico mientras esperan las imágenes.

Poniéndolo Todo Junto

Con los tamaños de archivo, como con muchas cosas, todo se reduce a un compromiso. Puede que realices pruebas A/B y descubras que las imágenes grandes de alta resolución funcionan bien. Puede que descubras que mucho contenido detallado funciona bien. Puede que descubras que la interactividad compleja funciona bien. Sin embargo, cuando pones los tres en una sola campaña, puede que veas que las cosas empiezan a funcionar mal.

Únete a nuestro Newsletter.

Mantente al día con Bird a través de actualizaciones semanales en tu buzón.

Al enviar, aceptas que Bird pueda contactarte sobre nuestros productos y servicios.

Puedes darte de baja en cualquier momento. Consulta el Aviso de Privacidad de Bird para obtener detalles sobre el procesamiento de datos.

Únete a nuestro Newsletter.

Mantente al día con Bird a través de actualizaciones semanales en tu buzón.

Al enviar, aceptas que Bird pueda contactarte sobre nuestros productos y servicios.

Puedes darte de baja en cualquier momento. Consulta el Aviso de Privacidad de Bird para obtener detalles sobre el procesamiento de datos.

Únete a nuestro Newsletter.

Mantente al día con Bird a través de actualizaciones semanales en tu buzón.

Al enviar, aceptas que Bird pueda contactarte sobre nuestros productos y servicios.

Puedes darte de baja en cualquier momento. Consulta el Aviso de Privacidad de Bird para obtener detalles sobre el procesamiento de datos.

Pinterest logo
Uber logo
Square logo
Logo de Adobe
Meta logo
PayPal logo

Company

Configuración de privacidad

Newsletter

Mantente al día con Bird a través de actualizaciones semanales en tu buzón.

Al enviar, aceptas que Bird pueda contactarte sobre nuestros productos y servicios.

Puedes darte de baja en cualquier momento. Consulta el Aviso de Privacidad de Bird para obtener detalles sobre el procesamiento de datos.

Uber logo
Square logo
Logo de Adobe
Meta logo

Company

Configuración de privacidad

Newsletter

Mantente al día con Bird a través de actualizaciones semanales en tu buzón.

Al enviar, aceptas que Bird pueda contactarte sobre nuestros productos y servicios.

Puedes darte de baja en cualquier momento. Consulta el Aviso de Privacidad de Bird para obtener detalles sobre el procesamiento de datos.

Uber logo
Logo de Adobe
Meta logo

Company

Configuración de privacidad

Newsletter

Mantente al día con Bird a través de actualizaciones semanales en tu buzón.

Al enviar, aceptas que Bird pueda contactarte sobre nuestros productos y servicios.

Puedes darte de baja en cualquier momento. Consulta el Aviso de Privacidad de Bird para obtener detalles sobre el procesamiento de datos.