# Cabeceras de email animadas: GIF ligeros que se ven bien [Canonical HTML page](https://gradiently.design/es/guide/animated-email-header) El movimiento en la parte superior de un email llama la atención, pero los buzones son exigentes. Una buena cabecera animada es ligera, corta y sigue teniendo todo el sentido aunque nunca llegue a moverse. ## The short version - Una cabecera de email animada es casi siempre un GIF, porque la mayoría de los clientes de correo muestran GIF animados y muy pocos reproducen vídeo. - Algunas versiones de escritorio de Outlook para Windows muestran solo el primer fotograma de un GIF, así que ese fotograma debe funcionar como un diseño completo. - Un tamaño de cabecera habitual es 1200×600 píxeles, mostrado a 600 píxeles de ancho para que se vea nítido en pantallas de alta densidad. - Mantener ligero el GIF importa porque las imágenes grandes cargan despacio con datos móviles, y los bucles cortos con poco movimiento son los que menos pesan. - Las palabras importantes, como ofertas, fechas y botones, deben ir en texto HTML real bajo la cabecera, no solo dentro de la animación. Una **cabecera de email animada** debe ser un GIF de unos 1200×600 píxeles mostrado a 600 de ancho, con un bucle corto, un peso moderado y un primer fotograma que funcione por sí solo como diseño terminado. Esa última regla es la que se suele olvidar: algunas versiones de escritorio de Outlook para Windows muestran solo el primer fotograma de un GIF animado, y quien tenga las imágenes bloqueadas no ve más que tu texto alternativo. Diseña primero para esos lectores y añade el movimiento como un extra para todos los demás. ## Por qué las cabeceras de email animadas son GIF El soporte de vídeo en el correo es escaso y poco fiable. El GIF animado, un formato de imagen, se muestra en la mayoría de los clientes, de Apple Mail a Gmail. Los formatos más nuevos, como el WebP animado, tienen un soporte más irregular en los buzones. Así que el GIF sigue siendo la opción práctica, con todos sus límites: como mucho 256 colores por fotograma y archivos más pesados que el vídeo. Esos límites condicionan el diseño. La comparación completa está en [GIF frente a MP4](https://gradiently.design/es/guide/gif-vs-mp4). | Ajuste | Recomendación | Por qué | | --- | --- | --- | | Formato | GIF | Se reproduce en la mayoría de los clientes de correo; el vídeo casi nunca | | Tamaño de diseño | 1200×600 px | El doble del ancho mostrado, para pantallas nítidas y densas | | Ancho mostrado | 600 px | El ancho estándar del cuerpo de un email | | Duración del bucle | 2 a 5 segundos | Los bucles cortos pesan menos y siguen pareciendo vivos | | Fotogramas por segundo | 10 a 15 fps | Lo bastante fluido para un color que se desliza y apariciones sencillas | | Peso del archivo | Lo más ligero que puedas | Las cabeceras grandes cargan despacio con datos móviles | Puntos de partida para una cabecera que cargue rápido y se vea nítida. Si el peso importa más que la nitidez, exporta el GIF a 600 px de ancho. ## Diseña el primer fotograma como alternativa Trata el primer fotograma como la cabecera del email y la animación como un extra. Si tus palabras aparecen con un barrido desde la nada, un lector de Outlook ve un bloque de color vacío. Si tu producto aparece en el segundo dos, nunca ve el producto. Pon en pantalla todo lo que importa en el fotograma uno y deja que el movimiento suceda a su alrededor. Cabecera de newsletter que dice el número de octubre con una pequeña etiqueta notas de campo sobre un degradado Fotograma uno: completo. Todas las palabras están en su sitio, así que quien solo vea este fotograma no se pierde nada. La misma cabecera de newsletter más adelante en el bucle, con el color del degradado desplazado detrás de unas palabras quietas A mitad del bucle: las palabras se quedan quietas mientras el color cambia detrás. El movimiento aporta ambiente, no información. - **Palabras quietas, fondo en movimiento.** Un color que se desliza detrás de un titular fijo es la cabecera animada más fiable que existe. - **Un solo movimiento pequeño.** Una palabra que cambia, una línea que se subraya sola, un suave cambio de luz. Una idea por cabecera. - **Termina donde empezaste.** Un bucle que salta de golpe al inicio parece roto. Haz que el último fotograma lleve al primero, como en [vídeo en bucle perfecto](https://gradiently.design/es/guide/seamless-loop-video). - **Sin destellos.** Mantén lentos los cambios de brillo. Los destellos rápidos son incómodos y pueden ser perjudiciales. ## Mantener ligero el GIF La mayor parte del peso de un GIF viene de los píxeles que cambian entre fotogramas. Una cabecera en la que se mueve todo el encuadre pesa mucho; una en la que un degradado lento se desliza detrás de palabras quietas pesa mucho menos, porque el codificador puede guardar solo lo que ha cambiado. Reducir el ancho a la mitad deja aproximadamente una cuarta parte de los píxeles, así que decide pronto si esta cabecera necesita 1200 px o si bastan 600 px. 1. **Diseña a 1200×600** Compón la cabecera con todas las palabras en su sitio en el primer fotograma. 2. **Mantén corto el bucle** De dos a cinco segundos, con cada movimiento completando un ciclo entero. 3. **Exporta en GIF a 10 o 15 fps** Usa una paleta construida a partir de la propia animación, no una genérica. 4. **Comprueba el peso** Si pesa mucho, prueba con 600 px de ancho, menos fotogramas o menos movimiento antes de bajar la calidad. 5. **Revisa el fotograma uno por separado** Abre el GIF en un visor de imágenes que muestre solo el primer fotograma, o envía una prueba a Outlook en Windows. Los comandos de exportación detallados y los ajustes de paleta y tramado están en [GIF animados](https://gradiently.design/es/guide/gif-maker-tips). ## HTML para una cabecera de email animada Programa la cabecera como una imagen normal dentro de una celda de tabla. Indica el ancho mostrado tanto en el atributo como en el estilo para que todos los clientes la dimensionen bien, dale un texto alternativo descriptivo y pon en la celda un color de fondo que coincida con el primer fotograma del GIF. Así, cuando las imágenes estén bloqueadas, los lectores verán tu color y tus palabras, no una caja vacía. ```html
The October issue: new work, three reads and a studio update
``` Un GIF de 1200×600 mostrado a 600×300. El color de la celda coincide con el primer fotograma, y el texto alternativo con estilo se lee bien si las imágenes están desactivadas. > **Texto real bajo la cabecera** Pon la oferta, la fecha y el botón en texto HTML real bajo la imagen. Se muestra con las imágenes desactivadas, lo pueden leer los lectores de pantalla y la búsqueda del buzón, y se ve nítido a cualquier tamaño. ## Modo oscuro y bloqueo de imágenes El modo oscuro puede cambiar los colores alrededor de tu cabecera, pero normalmente deja la imagen tal cual. Una cabecera con su propio color de fondo completo aguanta en ambos modos; una con un borde transparente o blanco puede acabar como una caja brillante en una pantalla oscura. Los degradados CSS detrás de la imagen no son fiables entre clientes, así que integra el degradado en el GIF y usa un color sólido como alternativa. [Degradados en el email](https://gradiently.design/es/guide/gradients-in-email) repasa las opciones. ### Evita - Palabras que aparecen solo después del primer fotograma - Un GIF pesado en el que se mueve todo el encuadre - Bordes transparentes que chocan en modo oscuro - Texto alternativo vacío o genérico, como “cabecera” - La oferta y el botón solo dentro de la imagen ### Haz - Un primer fotograma que sea un diseño completo - Palabras quietas sobre un color que se mueve despacio - Un color de fondo completo en la imagen - Un texto alternativo que dice lo que dice la cabecera - Texto HTML real para todo aquello sobre lo que la gente actúa En Gradiently puedes diseñar la cabecera al tamaño de cabecera de email sobre un Mark en movimiento, mantener quietas las palabras mientras el Mark se desliza detrás y exportarla como GIF con Pro. Como el fondo es un Mark único que te pertenece, la cabecera se parece a tu marca y no a una plantilla que comparten otras newsletters. Para cabeceras estáticas y composición, consulta [diseño de cabeceras de email](https://gradiently.design/es/guide/email-header-design). ## FAQ ### ¿Funcionan los GIF animados en el email? En la mayoría de los clientes de correo, sí. Algunas versiones de escritorio de Outlook para Windows muestran solo el primer fotograma, así que diseña ese fotograma para que funcione por sí solo. ### ¿Qué tamaño debe tener una cabecera de email animada? Diséñala a 1200×600 píxeles y muéstrala a 600 píxeles de ancho. Si el peso del archivo importa más que la nitidez en pantallas densas, exporta el GIF a 600×300. ### ¿Puedo usar vídeo en la cabecera de un email? El vídeo se reproduce en muy pocos clientes de correo, así que no es una opción fiable. Usa un GIF animado, o una imagen fija que enlace al vídeo. ### ¿Por qué mi GIF no se anima en Outlook? Algunas versiones de Outlook para Windows muestran solo el primer fotograma de los GIF animados. Es un límite del cliente, no de tu archivo, y por eso el primer fotograma debe llevar el mensaje completo. ### ¿Cómo reduzco el tamaño de un GIF para email? Acorta el bucle, baja la frecuencia a unos 10 o 15 fps, mantén quieta la mayor parte del encuadre y plantéate exportarlo a 600 px de ancho.