Medidas exactas para el encabezado de tu email: sin recortes en móvil
# Medidas exactas para el encabezado de tu email: sin recortes en móvil
Ancho, alto, zona segura y resolución retina: todo lo que necesitas saber antes de diseñar o exportar la cabecera de tu próxima campaña.
- Ancho estándar del contenedor: 600–640 px
- Zona segura para texto en móvil: 320 px centrales
- Exportación para pantallas retina: Resolución 2x
Abres el email de prueba en tu iPhone y el logo de la empresa aparece a medias. El texto del banner ha desaparecido por la derecha. La fecha límite de la oferta queda enterrada bajo el pliegue de la pantalla. Este escenario no es un fallo puntual: es la consecuencia predecible de diseñar el encabezado con los ojos puestos en el escritorio y enviarlo sin verificar cómo se comporta en los dispositivos donde la mayoría de los destinatarios lo van a abrir.
La buena noticia es que el problema tiene solución concreta. No requiere rediseñar la plantilla desde cero ni dominar el código HTML al detalle. Requiere conocer las medidas correctas, entender qué zona del encabezado sobrevive intacta en cada cliente de correo y ejecutar una revisión sistemática antes de cada envío.
---
El primer error que cometen muchos diseñadores y responsables de comunicación es empezar a trabajar en el encabezado sin tener los números sobre la mesa. Después llegan los ajustes de última hora.
# Medidas exactas para el encabezado de tu email: sin recortes en móvil
Ancho, alto, zona segura y resolución retina: todo lo que necesitas saber antes de diseñar o exportar la cabecera de tu próxima campaña.
es-ES · /es/guides/medidas-encabezado-email-sin-recorte-movil
Dimensiones clave del encabezado de email de un vistazo
- Ancho estándar del contenedor: 600–640 px
- Zona segura para texto en móvil: 320 px centrales
- Exportación para pantallas retina: Resolución 2x
Por qué el encabezado de tu email se recorta en móvil (y cómo evitarlo antes del próximo envío)
Abres el email de prueba en tu iPhone y el logo de la empresa aparece a medias. El texto del banner ha desaparecido por la derecha. La fecha límite de la oferta queda enterrada bajo el pliegue de la pantalla. Este escenario no es un fallo puntual: es la consecuencia predecible de diseñar el encabezado con los ojos puestos en el escritorio y enviarlo sin verificar cómo se comporta en los dispositivos donde la mayoría de los destinatarios lo van a abrir.
La buena noticia es que el problema tiene solución concreta. No requiere rediseñar la plantilla desde cero ni dominar el código HTML al detalle. Requiere conocer las medidas correctas, entender qué zona del encabezado sobrevive intacta en cada cliente de correo y ejecutar una revisión sistemática antes de cada envío.
---
Las medidas que necesitas antes de abrir el archivo de diseño
El primer error que cometen muchos diseñadores y responsables de comunicación es empezar a trabajar en el encabezado sin tener los números sobre la mesa. Después llegan los ajustes de última hora.
El contenedor estándar de un email tiene entre 600 y 640 píxeles de ancho. Los 600 px son el valor clásico que funciona de forma consistente en Gmail, Outlook, Yahoo Mail y Apple Mail sin generar scroll horizontal. Los 640 px son el ancho al que tienden las plantillas modernas cuando el público objetivo usa principalmente Gmail y Apple Mail. Si una parte importante de tu lista utiliza Outlook en Windows, quédate en 600 px: Outlook usa el motor de renderizado de Word y puede comportarse de forma impredecible con anchos no estándar.
Para la altura del encabezado, el rango recomendado es de 150 a 200 píxeles. Ese límite no es arbitrario: en un iPhone con pantalla de 390 px de alto en modo retrato, un encabezado de 300 px consume casi la mitad de la pantalla visible antes de que el destinatario haya leído una sola línea del cuerpo del mensaje. La altura máxima recomendada para el encabezado, incluyendo logo y barra de navegación, es de 200 px. Las campañas con fuerte componente visual o de marca pueden llegar hasta 250 px, pero ese margen adicional debe justificarse.
Para pantallas retina, la lógica es diferente y conviene entenderla bien: el archivo de imagen debe exportarse a 1.200 px de ancho, pero mostrarse en el HTML con `max-width: 600px; width: 100%`. Esto hace que una pantalla retina mapee dos píxeles de imagen por cada píxel CSS, produciendo una imagen nítida. Esta regla del doble de resolución aplica al archivo de imagen, no al contenedor de la plantilla. Confundir ambos conceptos es uno de los errores más habituales.
En cuanto al peso del archivo, el objetivo es mantenerse por debajo de 200 KB, idealmente por debajo de 100 KB. Reducir la calidad de compresión JPEG es más eficiente que reducir las dimensiones de exportación.
---
La zona segura: qué píxeles sobreviven en iOS Mail, Gmail Android y Outlook Mobile
Conocer el ancho del contenedor no es suficiente. Cada cliente de correo aplica sus propias reglas de escala, recorte y padding, y lo que se ve bien en uno puede quedar destrozado en otro.
iOS Mail en iPhone moderno escala la plantilla completa de 600 px para que encaje en el ancho del dispositivo, que en modelos recientes ronda los 390 px. El resultado es una reducción proporcional: un encabezado de 600 × 200 px se renderiza a aproximadamente 390 × 130 px. No hay recorte horizontal, pero el contenido vertical se comprime. Cualquier texto situado en la mitad inferior de la imagen puede volverse demasiado pequeño para leer sin hacer zoom. La zona segura práctica: centrado horizontalmente, ocupando no más del 60% del ancho de la imagen, y ubicado en el 55% superior de la altura.
Gmail en Android aplica un ancho de contenedor fijo, habitualmente 360 px en dispositivos de gama media, y no siempre escala las imágenes de forma proporcional si el código no incluye las declaraciones de ancho fluido. Si la imagen del encabezado no lleva `width: 100%; max-width: 600px;` en los estilos en línea, Gmail puede renderizarla a sus 600 px nativos y recortar el borde derecho por completo. La zona segura práctica: mantener logos y textos críticos dentro de una banda central de 280 px, tratando los 160 px exteriores (80 px por cada lado) como zona de sangrado.
Outlook Mobile en iOS y Android respeta el escalado fluido en general, pero aplica su propio padding interior en el panel de lectura, típicamente entre 12 y 16 px por lado. En un dispositivo de 360 px de ancho, eso deja aproximadamente 328 px de área visible. Además, Outlook Mobile en Android puede recortar la parte inferior de imágenes hero altas cuando la altura supera el viewport inicial sin un `max-height` definido. Mantener la altura del hero por debajo de 180 px elimina este riesgo.
La implicación práctica es clara: diseña primero para la restricción más severa, que es el recorte horizontal de Gmail Android, y después verifica que el escalado de iOS Mail y el padding de Outlook Mobile no empujan el texto fuera del área legible.
---
Checklist de 10 pasos antes de enviar cualquier campaña
Este listado está pensado para ejecutarse en orden, verificando cada punto en una previsualización renderizada, no solo leyendo las especificaciones.
1. Confirma que el contenedor mide 600 px. Si tu plantilla usa 640 px, comprueba que la imagen del encabezado rellena el contenedor sin dejar espacios blancos en los laterales.
2. Mide la altura del encabezado en la previsualización. El valor debe estar entre 150 y 200 px. Un encabezado de 300 px en un iPhone de 667 px de alto ocupa casi la mitad de la pantalla antes de que empiece el contenido.
3. Exporta la imagen a 1.200 px de ancho y muéstrala a 600 px. Aplica `max-width: 600px; width: 100%;` en la etiqueta de imagen. Sin la restricción de max-width, el archivo de 1.200 px desbordará el contenedor en clientes que no escalan imágenes automáticamente.
4. Mantén logos y textos críticos dentro de la zona central de 440 px sobre el lienzo de 600 px. A 320 px en móvil, esa zona escala a unos 234 px, suficiente para un tagline corto y un logo si el tamaño de fuente es de 18 px o mayor. Texto más pequeño de 14 px en una imagen se vuelve ilegible a 320 px independientemente de su posición.
5. Verifica el punto focal en imágenes fotográficas o generadas con IA. El sujeto principal debe estar dentro del 50% central del ancho del lienzo. Algunos clientes aplican un comportamiento similar a `object-fit: cover` que recorta los bordes antes de escalar.
6. Comprueba el peso del archivo. Menos de 200 KB para JPEG y PNG. Menos de 500 KB para GIF. Usa JPEG para encabezados fotográficos y PNG cuando el encabezado incluya logo, texto superpuesto o transparencia.
7. Establece un color de fondo en la celda del encabezado. Cuando las imágenes están bloqueadas, la celda no debe quedar en blanco. Define `background-color` en el `<td>` contenedor con el color principal de la marca. Elige un color que haga legible el texto alternativo.
8. Escribe el texto alternativo como una frase funcional de 60 a 80 caracteres. "Rebajas de verano — 30% en toda la tienda hasta el domingo" es útil. "header_v3_final.jpg" no comunica nada a quien no ve la imagen.
9. Prueba la legibilidad en modo oscuro a 320 px y 600 px. Apple Mail puede invertir la imagen completa o recolorear regiones detectadas como fondo. Si el encabezado usa texto blanco sobre fondo oscuro integrado en la imagen, previsualízalo en modo oscuro antes de enviar. Considera usar texto HTML sobre fondo CSS en lugar de texto incrustado en el archivo de imagen.
10. Verifica que el preencabezado tiene entre 50 y 100 caracteres. El texto de preencabezado se trunca en móvil con un máximo de aproximadamente 140 caracteres. Si está vacío, el cliente de correo extrae el primer texto HTML del cuerpo, que suele ser un enlace de baja o una cadena de texto alternativo.
---
Comportamiento de reserva: qué debe comunicar el encabezado cuando las imágenes no cargan
Outlook bloquea las imágenes por defecto, y una parte significativa de los destinatarios corporativos nunca las habilita. Tratar el comportamiento de reserva como un detalle opcional significa que ese segmento de tu lista ve un rectángulo blanco donde debería estar tu encabezado.
Cada celda de imagen del encabezado necesita tanto el atributo `bgcolor` como la propiedad CSS `background-color` con el color hexadecimal de la marca. Outlook lee el atributo HTML; los clientes modernos leen la propiedad CSS. Si el encabezado usa un fondo azul oscuro con texto blanco, define `bgcolor="#0D1F3C"` para que la región transmita intencionalidad aunque la imagen no cargue.
Si el encabezado incluye un botón de llamada a la acción, no lo incrustes dentro de la imagen. Constrúyelo como un botón HTML independiente, con `background-color`, borde y padding en línea, situado dentro de la región del encabezado pero fuera del archivo de imagen. Los botones CTA deben medir entre 200 y 300 px de ancho y entre 50 y 75 px de alto, y mostrarse a ancho completo en móvil. Este botón se renderiza en todos los clientes independientemente del estado de bloqueo de imágenes.
La información crítica como códigos promocionales o fechas límite no debe vivir dentro del archivo de imagen. Si el plazo de una oferta solo es visible cuando carga la imagen, el comportamiento de reserva ya ha fallado antes de que el destinatario abra el correo.
---
Escenarios habituales en el mercado español: dónde aparecen los errores
Los problemas de recorte no son abstractos. Aparecen en situaciones concretas y reconocibles.
Una agencia de marketing en Madrid que gestiona newsletters para clientes de retail puede tener una plantilla maestra correctamente dimensionada a 600 px, pero cada campaña específica exporta el hero a 1.200 px sin añadir la restricción `max-width: 600px` en el HTML. Gmail Android lo renderiza a tamaño nativo y recorta el borde derecho, llevándose el nombre del producto. El error no está en las medidas del archivo, sino en la ausencia de la declaración de ancho en el código.
Un freelance de diseño gráfico en Barcelona que entrega cabeceras a pequeñas empresas puede producir un banner de 800 px porque se ve bien en Figma. Superar los 700 px de ancho aumenta el riesgo de scroll horizontal en versiones antiguas de Outlook y en pantallas móviles pequeñas. El constructor de plantillas del cliente no corrige ese problema automáticamente, y el primer envío recorta el logo en todos los dispositivos Android.
Un responsable de comunicación interna que envía boletines corporativos puede colocar el logo de la empresa en el extremo izquierdo del encabezado porque visualmente parece equilibrado en escritorio. En un dispositivo de 320 px, ese logo queda a 21 px del borde, lo que puede quedar parcialmente oculto bajo el chrome del dispositivo. Mover el logo al área central de 440 px resuelve el problema sin cambiar el diseño de forma perceptible.
Una tienda online que prepara una campaña para el Black Friday puede incrustar la fecha límite de la oferta dentro de la imagen del banner. Si Outlook bloquea la imagen, esa fecha desaparece para todos los destinatarios corporativos. Usar texto HTML debajo de la imagen garantiza que la información llegue independientemente del estado de carga.
---
Exportación lista para producción: el paso que más se omite
El checklist anterior cubre la verificación, pero la exportación correcta es lo que determina si hay algo que verificar.
El flujo recomendado es: diseña el encabezado en un lienzo de 1.200 px de ancho, trata los 600 px centrales como el área de renderizado real al colocar elementos, exporta como JPEG si es fotográfico o como PNG si contiene logo o texto superpuesto, comprime hasta quedar por debajo de 200 KB ajustando la calidad de compresión en lugar de reducir dimensiones, y añade `max-width: 600px; width: 100%;` en la etiqueta `<img>` del HTML.
Si el encabezado se genera con herramientas de inteligencia artificial, la disciplina de zona segura se vuelve más importante, no menos. Las composiciones generadas por IA pueden situar el sujeto principal o el texto de la oferta fuera del área central en posiciones que se ven equilibradas a resolución completa pero que quedan recortadas cuando el cliente de correo aplica su restricción de altura. Verificar el punto focal antes de exportar ahorra una iteración completa.
Veeso AI permite generar y redimensionar imágenes de encabezado a las dimensiones exactas de exportación, incluyendo el ancho de 1.200 px para retina, antes de llevarlas al constructor de email. Eso elimina el paso de redimensionar manualmente un archivo generado, aunque los pasos de verificación de comportamiento de reserva, texto alternativo y renderizado por cliente siguen requiriendo comprobación manual contra una previsualización real.
El objetivo de todo este proceso es que el encabezado no sea el elemento que falla el día del envío. Con las medidas correctas establecidas antes de abrir el archivo de diseño, la zona segura respetada durante la composición y el checklist ejecutado antes de pulsar enviar, el recorte en móvil deja de ser una sorpresa desagradable y se convierte en un problema que ya resolviste antes de que ocurriera.
Preguntas frecuentes sobre las medidas del encabezado de email
¿Cuántos píxeles de ancho debe tener el encabezado de un email?
El ancho estándar del encabezado debe coincidir con el ancho del contenedor de la plantilla. El valor recomendado es 600 px, que lleva más de una década siendo el estándar del sector y se renderiza correctamente en Gmail, Outlook, Yahoo, Apple Mail y dispositivos móviles sin generar desplazamiento horizontal. Las plantillas modernas pueden llegar hasta 640 px. Superar los 700 px aumenta el riesgo de scroll horizontal en versiones antiguas de Outlook y en pantallas móviles pequeñas. (Fuente: tabular.email, warmy.io)
¿Cuál es la altura recomendada para la cabecera de un email?
La altura ideal del encabezado, incluyendo logotipo y barra de navegación, se sitúa entre 100 y 150 px, con un máximo de 200 px. Algunas fuentes especializadas indican un rango de 70–150 px como ideal y 200 px como límite. Para campañas con fuerte componente visual o de marca, la altura del banner hero puede llegar hasta 250–300 px, pero siempre priorizando que el contenido crítico quede visible antes del scroll. (Fuente: tabular.email, warmy.io, selzy.com)
¿Por qué se recorta la imagen del encabezado en móvil aunque se vea bien en escritorio?
El recorte en móvil ocurre porque los clientes de email escalan la imagen proporcionalmente al ancho de la pantalla. Si el encabezado tiene un alto desproporcionado respecto al ancho, o si el texto y el logotipo están colocados cerca de los bordes, quedarán fuera del área visible al reducirse. La solución es respetar una zona segura centrada, usar proporciones de alto/ancho equilibradas (600 × 150–200 px como referencia) y verificar que los elementos clave no estén a menos de 20–30 px de cualquier borde. (Fuente: warmy.io)
¿Qué es la zona segura en un encabezado de email y cómo se define?
La zona segura es el área interior del encabezado donde puedes colocar logotipos, texto y elementos visuales con la certeza de que no serán recortados en ningún cliente de email ni tamaño de pantalla. Se calcula dejando un margen de seguridad en los cuatro bordes de la imagen. Dado que el ancho estándar es 600 px y la altura recomendada es 150–200 px, la zona segura suele ocupar el área central, evitando los extremos. Diseñar con esta zona en mente reduce las revisiones por recortes en móvil. (Fuente: tabular.email, warmy.io)
¿Cómo exportar el encabezado de email en alta resolución para pantallas retina?
Para que el encabezado se vea nítido en pantallas retina (2×) de iPhone y Android, debes diseñar y exportar el archivo de imagen al doble del tamaño de visualización. Si el encabezado se muestra a 600 px de ancho en el email, expórtalo a 1.200 px de ancho. En el código HTML, establece el atributo width en 600 px para que el cliente de email lo muestre al tamaño correcto. Esta regla aplica solo a los archivos de imagen, no al contenedor de la plantilla. (Fuente: tabular.email)
¿Cuál es el peso máximo recomendado para la imagen del encabezado?
El peso ideal del archivo de imagen del encabezado es inferior a 100 KB, con un máximo recomendado de 200 KB. Archivos más pesados ralentizan la carga, especialmente en conexiones móviles, y pueden afectar negativamente la experiencia del destinatario. Para imágenes fotográficas se recomienda el formato JPEG; para cabeceras con logotipos, texto superpuesto o transparencias, el formato PNG ofrece mejor resultado visual. (Fuente: warmy.io)
¿Cuál es la diferencia entre el ancho del encabezado y el ancho del contenedor del email?
El contenedor del email es la estructura HTML que envuelve todo el contenido de la plantilla; su ancho recomendado es 600–640 px. El encabezado es el bloque visual superior dentro de ese contenedor. Para evitar recortes y desbordamientos, el ancho del encabezado debe ser igual al ancho del contenedor. Si el encabezado es más ancho que el contenedor, se recortará o forzará scroll horizontal. Si es más estrecho, aparecerán espacios en blanco no deseados. (Fuente: tabular.email)
¿Cómo afecta la proporción alto/ancho al recorte del encabezado en clientes de email móviles?
Los clientes de email móviles escalan el encabezado reduciendo su ancho al de la pantalla y ajustando el alto proporcionalmente. Una proporción muy alta (por ejemplo, 600 × 400 px) hará que el encabezado ocupe casi toda la pantalla en móvil antes de que el usuario vea el contenido del email. La proporción recomendada para la mayoría de los casos es 600 × 150–200 px. Para banners promocionales de impacto visual, el alto puede llegar a 300 px, pero siempre comprobando el resultado en dispositivos reales. (Fuente: warmy.io, tabular.email)
¿Qué debo comprobar antes de enviar una campaña para asegurarme de que el encabezado no se recorta?
Antes de enviar, verifica estos puntos: (1) el ancho del encabezado coincide con el del contenedor (600–640 px); (2) la altura no supera los 200 px salvo en banners visuales; (3) el logotipo y el texto están dentro de la zona segura, alejados de los bordes; (4) el archivo de imagen está exportado al doble de resolución para pantallas retina; (5) el peso del archivo es inferior a 200 KB; (6) la imagen tiene texto alternativo (alt text) descriptivo, ya que clientes como Outlook bloquean imágenes por defecto; (7) has previsualizado el email en al menos un cliente móvil real o emulado. (Fuente: tabular.email, warmy.io)
¿El contenido crítico como el logotipo o el mensaje principal debe estar siempre en la imagen del encabezado?
No necesariamente. Dado que muchos clientes de email, incluido Outlook, bloquean las imágenes por defecto, la información crítica como el nombre de la marca, códigos promocionales o fechas límite no debería depender exclusivamente de la imagen. Siempre que sea posible, usa texto HTML para estos elementos, y asegúrate de que el alt text de la imagen del encabezado describa su contenido de forma clara. Así el mensaje llega aunque la imagen no se cargue. (Fuente: warmy.io)
