Cómo y por qué dividir las imágenes de tus emails

Si alguna vez te has preguntado cómo las marcas como Nike, Zara o Glossier envían correos electrónicos con diseños de píxeles perfectos que parecen idénticos en cada cliente de correo electrónico, incluyendo Outlook, la respuesta es imagen dividida.

La división de imagen de correo electrónico es el proceso de cortar un diseño completo de correo electrónico en secciones horizontales, cada una guardada como un archivo de imagen separado, luego apilándolos de nuevo juntos utilizando HTML simple. Ha sido una técnica básica en el marketing por correo electrónico durante más de una década, y sigue siendo una de las maneras más confiables para enviar campañas conducidas visualmente.

¿Qué es la división de imagen de email?

En lugar de enviar una imagen masiva como su correo electrónico completo (que crea un solo área clicable), dividir la imagen divide su diseño en múltiples tiras horizontales — típicamente 4 a 8 secciones.

Cada sección se convierte en una <img> etiqueta en el HTML de tu correo electrónico, apilado verticalmente dentro de una tabla. Cuando el correo electrónico rinde, las secciones se alinean perfectamente para recrear el diseño original. Pero ahora cada sección puede conectarse a una URL diferente.

La estructura HTML es mínima — sólo una serie de filas de mesa que contienen imágenes. No complejo CSS, sin consultas de medios sensibles, sin errores de Outlook. Esta sencillez es precisamente por qué la técnica funciona con tanta confianza.

Por qué las marcas dividen sus emails

La división de imagen de imagen no es una solución de trabajo: es una estrategia deliberada que resuelve varios retos importantes de marketing por email:

Presentación visual en los clientes de correo

Los correos electrónicos codificados en HTML se ven diferentes en cada cliente de correo electrónico. Outlook rompe diseños, estilos de bandas Gmail y Yahoo hace las cosas de forma diferente de Apple Mail. Con la división de imágenes basadas en imágenes, su correo electrónico es una serie de imágenes — y las imágenes renderizan idénticamente en todas partes. Lo que diseñas es exactamente lo que los suscriptores ven.

Modo oscuro Inmunidad

El modo oscuro puede invertir los colores de los elementos HTML, girando los fondos blancos oscuros, oscuros de texto, y generalmente provocando estragos en esquemas de color cuidadosamente diseñados. Pero el modo oscuro no puede alterar los píxeles dentro de una imagen. Los correos electrónicos reducidos parecen iguales en modo de luz y modo oscuro. Leer más sobre el diseño de correo electrónico del modo oscuro.

Tipografía personalizada

Los correos electrónicos HTML se limitan a fuentes de seguridad web (Arial, Georgia, Verdana) en la mayoría de los clientes de correo electrónico. Las fuentes web personalizadas funcionan en Apple Mail pero fallan en Outlook y Gmail. Con correos electrónicos basados en imágenes, cualquier fuente que tu herramienta de diseño soporta los renders perfectamente, porque el texto es parte de la imagen.

Múltiples secciones Clickable

Cada sección puede conectarse a una URL diferente. Su encabezado puede conectarse a su página de inicio, la sección del producto a la página del producto, y el pie de página CTA a su página de venta. Esta es la principal razón técnica para dividir la imagen en lugar de enviar una imagen grande.

Cómo decidir dónde dividir

La colocación de sus cortes determina tanto la funcionalidad como la fiabilidad del correo electrónico final. Siga estas directrices:

Regla 1: Corte entre secciones de contenido

La división natural apunta en su diseño, entre el encabezado y el héroe, entre secciones de productos, entre el cuerpo y el pie. Estos son los lugares más limpios a la sección porque generalmente hay un límite horizontal claro.

Regla 2: Cada objetivo de enlace obtiene su propia división

Si dos partes de su enlace de diseño a diferentes URLs, deben ser secciones separadas. Un banner de héroe que une a una página de colección y un bloque de productos que une a una página de producto no puede estar en la misma sección.

Regla 3: No cortes por el contenido de flotación

Evite dividir la imagen a través del medio de un párrafo, una imagen de producto o un gradiente que abarca dos secciones. Si el límite de la sección cae en medio del contenido visual, la desalineación se hace visible, especialmente en Outlook.

Regla 4: Mantener una zona de amortiguación

Dejar por lo menos 5-10px de relleno por encima y por debajo de cada sección límite. Esto evita problemas de alineación donde los clientes agregan pequeñas brechas entre imágenes. Una zona de amortiguación de color sólido hace invisible cualquier micro-gap.

Número óptimo de secciones

El lugar dulce para la mayoría de los emails promocionales es 4 a 8 secciones:

• 3-4 secciones: Diseño simple — encabezado, héroe, cuerpo, pie. Cada enlace a un destino.
• 5-6 secciones: Promocional estándar — encabezado, héroe, 2-3 secciones de productos, pie de página CTA.
• 7-8 secciones: Campañas complejas con múltiples características de producto y áreas de clic.
• 8+ secciones: Posible pero raramente necesario. Más secciones significan más HTML, más potencial para las brechas, y más archivos para gestionar.

Una buena regla del pulgar: sección tantas veces como usted tiene objetivos de enlace distintos, además de uno para cualquier sección de cabecera / pies no clicable.

Compresión y tamaño de archivo

Cada sección necesita ser comprimido individualmente. El peso total de todas las imágenes combinadas debe permanecer menos de 800 KB para la carga rápida en redes móviles. Meta 100-150KB por sección para un correo electrónico típico de 6 secciones.

Exportación Resolución 2x (1200px de ancho para un correo electrónico de 600px) para la agudeza de la pantalla retina, luego comprime al 75-85% de calidad JPEG. El resultado: imágenes afiladas a tamaños de archivos razonables. Vea nuestra guía de compresión completa para recomendaciones detalladas de herramientas y ajustes de calidad.

Problemas comunes y correcciones

Gaps Entre secciones en Outlook

Esta es la cuestión más notoria de división de imagen-image. Outlook añade pequeñas brechas (2-5px) debajo de las imágenes debido a su motor de renderizado. La solución es una combinación de propiedades CSS en la imagen y su célula de mesa que contiene:

• display: block en todos <img> tags
• font-size: 0 y line-height: 0 on <td> elementos
• Explicit ancho y altura atributos en cada imagen
• frontera=0 y celular="0" celdaspacing="0" sobre la mesa

Escalada móvil

Establecer todas las imágenes max-width: 100% con height: auto así que escalan proporcionalmente en pantallas más pequeñas. Dado que los correos electrónicos rebanados son inherentemente monocolumno y ancho completo, el escalado móvil es sencillo, cada sección simplemente se estira hasta el ancho del puerto.

Accesibilidad

Los correos electrónicos basados en imágenes tienen una verdadera limitación de accesibilidad: los lectores de pantalla sólo pueden leer texto alternativo, no texto dentro de las imágenes. Para cada sección, escriba texto alternativo conciso y descriptivo (bajo 125 caracteres) que comunique la información clave. Para el contenido crítico de cumplimiento como el enlace de suscripción, considere usar un pie de texto HTML en vivo debajo de las secciones de imagen.

The image splitting Workflow: Manual vs. Herramientas

Flujo de trabajo manual (Photoshop / Figma)

1. Diseña tu correo electrónico a 1200px de ancho (2x para retina)
2. Colocar guías horizontales en cada sección límite
3. Exportar cada sección como una imagen separada (JPEG o PNG)
4. Compre cada imagen con TinyPNG o Squoosh
5. Construir la estructura de la tabla HTML manualmente o con una plantilla
6. Agregar enlaces a cada imagen
7. Subir a Klaviyo y probar

Este proceso tarda 30-60 minutos por correo electrónico una vez que tengas experiencia. Los pasos manuales de codificación HTML y compresión individual son los mayores fregaderos de tiempo.

Flujo de trabajo asistido por herramientas

Herramientas como EmailSlicer automatiza las partes repetitivas: sube su diseño completo, defina dónde a la sección (o deja que la herramienta sugiera cortes), comprime cada sección automáticamente y exporta directamente a Klaviyo. Lo que tarda 30-60 minutos manualmente se puede hacer en 5-10 minutos.

Cuando NO se separa

La división de imagen de imagen es la opción correcta para la mayoría de las campañas de marketing, pero hay casos claros donde no es apropiado:

• Correos electrónicos transaccionales: Las confirmaciones de pedidos, notificaciones de envío y reajustes de contraseña necesitan datos dinámicos (detalles del pedido, números de seguimiento) que no se pueden hornear en imágenes. Usa HTML.
• Recomendaciones personalizadas del producto: Los bloques dinámicos de productos de Klaviyo tiran de diferentes productos para cada suscriptor. Esto requiere renderización HTML.
• Contenido de texto de larga duración: Newsletters y correos electrónicos educativos donde el texto mismo es el valor. El texto en vivo se puede buscar, traducir y accesible.
• Campañas de accesibilidad crítica: Si una parte significativa de su audiencia utiliza lectores de pantalla o tiene imágenes desactivadas por defecto, los correos electrónicos HTML se comunican mejor.

El mejor enfoque es a menudo un híbrido: secciones basadas en imágenes para el contenido visual de marca, combinado con secciones HTML para datos dinámicos. Lea nuestra comparación completa de los correos electrónicos basados en imágenes vs HTML.

Preguntas frecuentes

¿Cuántas secciones deben tener un correo electrónico?

4 a 8 secciones para un email promocional estándar. El número depende de cuántas áreas de clics diferentes necesitas: cada sección que se une a una URL diferente obtiene su propia sección.

¿Los correos electrónicos rebanados funcionan en móvil?

Sí. A 600px ancho, las imágenes cortadas escalan proporcionalmente en las pantallas móviles. Cada sección se extiende a la anchura del mirador y apila verticalmente. Set max-width: 100% en todas las imágenes para el correcto escalado.

¿Por qué aparecen brechas entre secciones en Outlook?

El motor de renderización de Outlook añade espaciamiento predeterminado debajo de las imágenes. Arréglalo con display: block en imágenes, font-size: 0 sobre las celdas de mesa, y atributos de ancho/altura explícitos en cada etiqueta de imagen.

¿Puedo usar correos electrónicos rebanados en Klaviyo?

Sí. Subir cada sección como un bloque de imagen en el editor de arrastrar y soltar de Klaviyo, apilar verticalmente y añadir enlaces individualmente. Puede mezclar secciones basadas en imágenes con bloques de contenido codificados por HTML.

¿La imagen se divide igual que los mapas de imágenes?

No. Los mapas de imágenes usan una sola imagen con hotspots de coordenadas clickable. dividir la imagen divide la imagen en archivos separados, cada uno con su propio enlace. dividir imagen es mucho más confiable entre los clientes de correo electrónico — mapas de imágenes tienen soporte inconsistente, especialmente en móvil.