GIF animados: ligeros, fluidos y fieles a tu marca

Un buen GIF animado es ligero porque se planifica en torno a los límites del formato: un tamaño en píxeles moderado, de 10 a 15 fotogramas por segundo, una paleta de color creada a partir de la propia animación y la menor parte del encuadre en movimiento posible. El GIF guarda como mucho 256 colores por fotograma y comprime mucho peor que el vídeo, así que el mismo bucle que es un MP4 ligero puede ser un GIF pesado. Úsalo donde sea la única opción, sobre todo en el correo y en algunas herramientas de chat y documentos, y hazlo con cuidado.

Lo que un GIF puede y no puede hacer

Además, los navegadores tratan los retardos de fotograma extremadamente cortos como más lentos de lo pedido, así que forzar un GIF hacia frecuencias altas suele darte un archivo más grande que ni siquiera se reproduce más rápido. Para entender por qué importan los fotogramas por segundo, consulta fotogramas por segundo explicados.

Cómo mantener ligero un GIF animado

El peso del archivo se decide casi todo antes de exportar. Estas son las palancas, ordenadas por lo mucho que suelen influir.

1. 1

   Hazlo al tamaño al que se va a ver

   Una cabecera de correo que se muestra a 600 px de ancho no necesita medir 1200 px como GIF si el peso importa más que la nitidez en pantallas densas. Reducir el ancho a la mitad deja más o menos una cuarta parte de los píxeles.

2. 2

   Acorta el bucle

   Dos o tres segundos que se repiten limpiamente ganan a diez que no lo hacen. Cada fotograma añade peso.

3. 3

   Baja los fotogramas por segundo

   De 10 a 15 fps bastan para que el color y el texto se deslicen con fluidez. El movimiento lento necesita menos fotogramas que el rápido.

4. 4

   Mueve menos parte del encuadre

   Los codificadores de GIF pueden guardar solo los píxeles que cambian. Un texto quieto sobre una zona que se mueve despacio pesa mucho menos que un encuadre entero en movimiento.

5. 5

   Limita los colores

   Si el diseño solo usa 64 colores, una paleta de 64 colores pesa menos y se ve igual.

Paletas, tramado y bandas

Cuando un fotograma tiene más de 256 colores, el codificador tiene que elegir. Puede redondear cada píxel al color más cercano de la paleta, lo que hace que los degradados avancen en bandas visibles, o puede aplicar tramado (dithering), salpicando píxeles de colores vecinos para simular los tonos intermedios. El tramado se ve más suave de lejos y granulado de cerca, y hace que los archivos pesen más porque el patrón cambia de un fotograma a otro.

• Crea la paleta a partir de la animación. Una paleta generada con tus propios fotogramas dedica sus 256 huecos a los colores que de verdad usas, no a un conjunto genérico.
• Usa tramado ordenado para animaciones. Un patrón fijo como Bayer se queda quieto entre fotogramas, así que parpadea menos y comprime mejor que la difusión de error.
• Prefiere degradados más contundentes y cortos. Un degradado entre dos colores cercanos sobre una zona grande es el peor caso. Más contraste en una zona más pequeña crea menos bandas.
• Añade grano a propósito. Un poco de textura en el diseño disimula los escalones, aunque añade peso. Prueba las dos opciones.

El mismo problema en imágenes fijas, y cómo resolverlo en origen, está en bandas en degradados.

Ajustes de exportación que funcionan

Si tienes un vídeo y necesitas un GIF, el método de paleta en dos pasos de FFmpeg da un color mucho mejor que una sola pasada. El primer comando crea una paleta a partir de tu clip; el segundo la usa. Después, Gifsicle puede quitar todavía más peso.

# 1. Build a palette from the clip itself
ffmpeg -i loop.mp4 -vf "fps=12,scale=600:-1:flags=lanczos,palettegen=stats_mode=diff" palette.png

# 2. Use it, with ordered dithering that suits animation
ffmpeg -i loop.mp4 -i palette.png -lavfi "fps=12,scale=600:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=3:diff_mode=rectangle" loop.gif

# 3. Optional: optimise further (lossy trades a little quality for size)
gifsicle -O3 --lossy=40 loop.gif -o loop-small.gif

Cómo mantener un GIF fiel a tu marca

Como la paleta es tan pequeña, el GIF revela muy bien si los colores de tu marca se eligieron con cuidado. Los colores de tono cercano se funden, y un fondo que depende de cambios sutiles puede quedarse en escalones planos. Las marcas que mejor quedan en GIF se apoyan en un color de fondo claro, uno o dos acentos potentes y una tipografía lo bastante grande para sobrevivir a una paleta pequeña.

Gradiently exporta GIF con Pro junto a MP4 y WebM, así que puedes diseñar una vez y luego pasar el GIF a tu herramienta de correo y el vídeo a las redes. Como el fondo en movimiento es un Mark que te pertenece, el GIF que llega a la bandeja de entrada de alguien se parece a tu marca y no a un bucle de stock. Para el correo en concreto, lee cabeceras de correo animadas y sus reglas de respaldo.

Si lo que estás haciendo es elegir entre formatos más que pulir un GIF, empieza por GIF vs MP4 y MP4 vs WebM.