Logo animado en firmas de email: compatibilidad con GIF

¿Qué clientes de correo reproducen GIF animados?

La mayoría. Can I email, que prueba funciones de HTML y CSS en distintos clientes, indica compatibilidad total con GIF animados en Apple Mail, Gmail (web, iOS y Android), Yahoo Mail, AOL, Outlook.com, Outlook para Mac, iOS y Android, Samsung Email, Thunderbird y ProtonMail, entre otros.

La entrada sobre GIF de Can I email se probó por última vez en febrero de 2020, y los clientes se actualizan con frecuencia. La nueva app de Outlook para Windows se basa en Outlook en la web y puede no comportarse como el Outlook de escritorio clásico. Usa la tabla como guía y envíate correos de prueba en los clientes que realmente usan tus destinatarios.

¿Por qué Outlook en Windows no anima mi firma?

Las versiones antiguas de Outlook de escritorio para Windows renderizan el correo HTML con un motor limitado que no reproduce animaciones GIF. Can I email indica que Outlook para Windows 2007 a 2019 no admite GIF animados. Litmus dice lo mismo y recomienda que "el primer fotograma contenga todo lo que necesitas como alternativa estática".

Outlook con una cuenta de Microsoft 365 en Windows se comporta de otra manera: según Can I email, "reproduce la animación 3 veces, luego se detiene y muestra un botón de reproducción para reactivarla". Así que incluso los destinatarios que sí ven el movimiento lo ven por poco tiempo, y después ven una imagen fija con un control encima.

No hay ninguna configuración que puedas agregar a tu firma para forzar la animación en esos clientes. La solución está en el diseño, no en el código: crea el GIF para que siga funcionando cuando no se mueve.

¿Cómo debo diseñar el primer fotograma?

Da por hecho que una gran parte de los destinatarios solo verá una imagen fija. Luego diseña el loop alrededor de esa imagen:

• Empieza con el logo terminado. El primer fotograma debe ser el logo completo y con los colores correctos, no un lienzo vacío en el que luego aparece el logo.
• Anima hacia fuera y de vuelta. Un salto, una inclinación o un parpadeo que empieza y termina en la pose de reposo se ve intencional cuando se detiene.
• Termina en la misma pose. Los clientes que se detienen tras unos pocos loops muestran el fotograma en el que quedan; si el primero y el último coinciden, el resultado se ve limpio.
• Evita el texto dentro de la animación. Pon tu nombre, cargo y enlaces como texto HTML real junto a la imagen, para que sigan siendo legibles y se puedan pulsar.

Las animaciones de logo basadas en compresión, estiramiento e inclinación funcionan bien en firmas porque cada fotograma sigue mostrando el logo completo. Las revelaciones, los barridos y los efectos de partículas no, porque sus primeros fotogramas están incompletos.

¿Qué tamaño debe tener un GIF de firma?

No existe un estándar de correo para las imágenes de firma, así que las cifras siguientes son recomendaciones, no reglas. Xink, proveedor de firmas, recomienda que un GIF de firma pese menos de unos 200 KB y sea corto, con unos 10 a 15 fotogramas. Litmus, al hablar de GIF en el cuerpo de los correos, recomienda 1 MB como máximo; una firma se repite en cada mensaje, así que apunta a mucho menos.

Para crear uno a partir de un loop MP4 cuadrado con FFmpeg, reduce la paleta y también los cuadros por segundo:

ffmpeg -t 2 -i logo-hop.mp4 \
  -vf "fps=12,scale=240:-1:flags=lanczos,split[a][b];[a]palettegen=max_colors=64[p];[b][p]paletteuse" \
  -loop 0 signature.gif

Si el archivo sigue pesando demasiado, prueba max_colors=32 o fps=10, o acorta el clip.

¿Gmail admite firmas con GIF?

Sí. Según Can I email, Gmail reproduce GIF animados en la web y en sus apps para iOS y Android. Puedes insertar una imagen en una firma de Gmail desde el editor de firmas en Configuración.

El límite con el que se topa la gente es la longitud. La documentación de soporte de Xink describe un error de "firma demasiado larga" a los 10,000 caracteres, contando el HTML de la firma. No pudimos confirmar esa cifra en una página de ayuda de Google, así que tómala como un límite reportado. Importa en el caso de las imágenes porque una imagen pegada como datos incrustados (un URI data: en base64) convierte todo el archivo en texto y puede superar ese límite por sí sola. Enlazar a una imagen alojada reduce la firma a una sola etiqueta <img> corta, sin importar el peso del archivo GIF.

¿Debo alojar el GIF o incrustarlo?

Alójalo. Pon el GIF en una URL HTTPS pública y estable, como los archivos estáticos de tu sitio web, y enlázalo con dimensiones explícitas y texto alternativo:

<img src="https://example.com/email/logo-120.gif"
     width="120" height="120"
     alt="Acme logo"
     style="display:block;border:0;">

• El ancho y el alto evitan que el diseño salte y hacen que los clientes muestren el archivo de 240 píxeles a 120 píxeles.
• El texto alternativo se muestra cuando las imágenes están bloqueadas, algo que muchos clientes hacen por defecto con remitentes desconocidos.
• Una URL estable hace que los correos antiguos sigan funcionando. No borres ni cambies el nombre del archivo más adelante.

Evita las imágenes incrustadas en base64 por el motivo anterior, y evita los archivos de video o Lottie: los clientes de correo no ejecutan scripts ni reproductores de video en las firmas, y por eso aquí el formato es GIF.

Para obtener un loop de origen limpio, Charmotion anima un logo subido en modo Motion, que mueve el logo original de IA, 3D o texto sin volver a dibujarlo, y exporta MP4 de 1080×1080 más vistas previas en GIF de 480 píxeles en cada set. Ejecuta el comando de FFmpeg de arriba sobre el MP4 para obtener un GIF del tamaño de una firma.

Cómo agregar un logo animado a una firma de correo

1. Elige un loop que empiece y termine con el logo completo. Elige un salto, una inclinación o un parpadeo corto cuyo primer y último fotograma muestren el logo completo.
2. Conviértelo en un GIF liviano. Usa FFmpeg con fps=12, un ancho de 240 píxeles y palettegen=max_colors=64, y luego revisa el peso del archivo.
3. Aloja el archivo. Sube el GIF a una URL HTTPS pública y estable que no vayas a renombrar ni borrar.
4. Insértalo con dimensiones. Enlázalo con una etiqueta img que defina ancho, alto y texto alternativo, o insértalo por URL en el editor de firmas de tu cliente de correo.
5. Prueba en clientes reales. Envía correos de prueba a Gmail, Apple Mail y Outlook de escritorio para Windows, y revisa el fotograma fijo.

Preguntas frecuentes

¿Puedo usar un MP4 o un Lottie en una firma de correo?

No de forma fiable. Los clientes de correo no ejecutan JavaScript, así que Lottie y Rive no se pueden reproducir, y los elementos de video no son una opción confiable en las firmas. Un GIF animado es la opción práctica, con un primer fotograma que funcione como logo estático en los clientes que no reproducen animaciones.

¿Por qué el GIF de mi firma se detiene después de unos pocos loops en Outlook?

Can I email informa que Outlook para Windows con una cuenta de Microsoft 365 reproduce un GIF animado tres veces, luego se detiene y muestra un botón de reproducción. Diseña el loop para que termine con el logo completo, así el fotograma detenido se ve intencional.

¿Un GIF en la firma afecta la entregabilidad?

No hay ninguna regla oficial que relacione una imagen de firma pequeña y alojada en un servidor con los filtros de spam. Mantén el archivo liviano, alójalo en un dominio que controles e incluye texto real en la firma, en lugar de poner todos tus datos de contacto dentro de la imagen.

¿Con qué dimensiones debo exportar el GIF de la firma?

Una práctica común es exportar al doble del tamaño de visualización, por ejemplo 240 píxeles de ancho para un logo de 120 píxeles, y luego definir los atributos width y height con el tamaño de visualización. Así el logo se ve nítido en pantallas de alta densidad sin que el archivo pese mucho más.

Respuestas rápidas de esta guía

• ¿Funcionan los GIF animados en las firmas de correo de Outlook?
• ¿Qué tamaño debe tener un GIF para la firma de correo?

Fuentes

• GIF image format support in email clients, Can I email
• How to create and add an animated GIF to an email, Litmus
• Recommended GIF specs for email signatures, Xink Support
• Gmail signature too long error (10,000 character limit), Xink Support
• FFmpeg filters documentation (palettegen, paletteuse, scale, pad), FFmpeg