# GIF animados: ligeros, fluidos y fieles a tu marca

[Canonical HTML page](https://gradiently.design/es/guide/gif-maker-tips)

El GIF es antiguo, limitado y sigue estando en todas partes: correo, chats, documentos y README. Trabaja con sus límites en lugar de pelearte con ellos y puede verse sorprendentemente bien.

## The short version

- Un GIF animado puede contener como mucho 256 colores en cada fotograma, y por eso los degradados suaves suelen mostrar bandas o puntitos.
- Lo que más influye en el peso de un GIF son las dimensiones en píxeles, el número de fotogramas y cuánta parte de la imagen cambia entre fotogramas.
- Para la mayoría de los GIF diseñados, de 10 a 15 fotogramas por segundo al tamaño al que se van a mostrar es un buen equilibrio entre fluidez y peso.
- Generar una paleta a medida a partir de la propia animación da un color mucho mejor que una paleta web genérica.
- Usa GIF donde no se puede reproducir vídeo, como en el correo, y MP4 o WebM en todo lo demás.

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

| Límite | Qué significa para tu diseño |
| --- | --- |
| 256 colores por fotograma | Los degradados, las fotos y las sombras suaves tienen que caber en una paleta pequeña |
| La transparencia es todo o nada | Sin bordes suaves: las formas suavizadas crean un halo sobre fondos inesperados |
| Retardos de fotograma en centésimas de segundo | No se pueden conseguir 30 fps exactos; 10, 20, 25 o 50 fps dividen limpiamente |
| Sin sonido | El mensaje tiene que funcionar en silencio, que de todos modos es buena práctica |
| Compresión sencilla | Los archivos crecen rápido con el tamaño, la duración y el movimiento |

Toda decisión sobre un GIF vuelve a estos cinco hechos.

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](https://gradiently.design/es/guide/frame-rate-explained).

## 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. **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. **Acorta el bucle** Dos o tres segundos que se repiten limpiamente ganan a diez que no lo hacen. Cada fotograma añade peso.
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. **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. **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.

- Tal como se diseñó: `linear-gradient(90deg, #3b0764 0%, #a21caf 50%, #f9a8d4 100%)`
- Redondeado a muy pocos colores: `linear-gradient(90deg, #3b0764 0% 16.6%, #5b0f7a 16.6% 33.3%, #7e1594 33.3% 50%, #a21caf 50% 66.6%, #cc62c2 66.6% 83.3%, #f9a8d4 83.3% 100%)`

Una vista exagerada de las bandas. Los GIF reales tienen más escalones, pero en degradados amplios y sutiles los escalones siguen notándose.

- **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](https://gradiently.design/es/guide/gradient-banding).

## 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.

```bash
# 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
```

fps=12 y un ancho de 600 px encajan con una cabecera de correo. stats_mode=diff y diff_mode=rectangle dan prioridad a las partes del encuadre que se mueven.

| Uso | Ancho | Fotogramas por segundo | Duración |
| --- | --- | --- | --- |
| Cabecera de correo | 600 a 1200 px | 10 a 15 fps | 2 a 5 segundos |
| Reacción o sticker de chat | 240 a 480 px | 10 a 15 fps | 1 a 3 segundos |
| Demo en documentación o README | 800 a 1200 px | 10 a 20 fps | Lo más corta que permita la demo |
| Diapositiva o presentación | 960 a 1920 px | 15 a 20 fps | 3 a 6 segundos |

Puntos de partida. Las cabeceras de correo se diseñan a 1200×600 y se muestran a 600 px de ancho, así que elige el ancho según importe más la nitidez o el peso.

## 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.

Cabecera de correo de bienvenida que dice gracias por unirte sobre un degradado que se mueve despacio

Diseñada para una cabecera de correo en GIF: texto grande, un solo fondo y un color que se mueve despacio para que cambien pocos píxeles.

Gráfico animado cuadrado con la única palabra enviado sobre un degradado intenso

Un cuadrado de una sola palabra para chats y documentos. Pocos elementos, contraste fuerte, un bucle corto.

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](https://gradiently.design/es/guide/animated-email-header) y sus reglas de respaldo.

### Evita

- Un GIF en una web donde se podría reproducir vídeo
- Exportar al doble de tamaño y dejar que el HTML lo reduzca sin comprobarlo
- 30 fps para una deriva lenta de color
- Texto que solo aparece en el último fotograma
- Bordes transparentes suaves sobre un fondo desconocido

### Haz

- GIF para el correo y las herramientas que necesitan imágenes; MP4 o WebM en lo demás
- Elige el tamaño a propósito y comprueba el peso del archivo
- De 10 a 15 fps, un bucle corto y limpio
- Un primer fotograma que funcione como imagen fija
- Un fondo sólido que coincida con el sitio donde va a ir

Si lo que estás haciendo es elegir entre formatos más que pulir un GIF, empieza por [GIF vs MP4](https://gradiently.design/es/guide/gif-vs-mp4) y [MP4 vs WebM](https://gradiently.design/es/guide/mp4-vs-webm).

## FAQ

### ¿Cómo hago más ligero un GIF animado?

Reduce sus dimensiones en píxeles, acorta el bucle, baja los fotogramas por segundo a unos 10 a 15 fps y mantén quieta la mayor parte del encuadre. Una paleta creada a partir de la animación y una pasada por un optimizador como gifsicle ayudan todavía más.

### ¿Por qué los degradados se ven a rayas en un GIF?

Un fotograma GIF puede contener como mucho 256 colores, así que un degradado suave se redondea en escalones. Una paleta a medida, el tramado ordenado y un poco de grano reducen el efecto.

### ¿A cuántos fotogramas por segundo debe ir un GIF animado?

De 10 a 15 fps encaja con la mayoría de los GIF diseñados. Como los retardos de fotograma de un GIF se fijan en centésimas de segundo, frecuencias como 10, 20 o 25 fps dividen más limpiamente que 30.

### ¿Uso GIF o MP4?

Usa MP4 o WebM siempre que se pueda reproducir vídeo, porque los archivos pesan menos y el color es mejor. Usa GIF para el correo y para las herramientas que solo aceptan imágenes.

### ¿Un GIF puede tener fondo transparente?

Sí, pero cada píxel es totalmente transparente o totalmente sólido, así que los bordes suaves dejan un halo visible. Haz que el color del borde coincida con el fondo sobre el que va a ir.