La versión corta
- 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.
En esta página
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.
Por qué
Recomendación
Por qué
Recomendación
Por qué
Recomendación
Por qué
Recomendación
Por qué
Recomendación
Por qué
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.
Fotograma uno: completo. Todas las palabras están en su sitio, así que quien solo vea este fotograma no se pierde nada.
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.
- 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.
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.
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td bgcolor="#2e1065" style="background-color:#2e1065;">
<img src="https://example.com/header-october.gif"
width="600" height="300"
alt="The October issue: new work, three reads and a studio update"
style="display:block; width:100%; max-width:600px; height:auto; border:0;
color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
</td>
</tr>
</table>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 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.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil