Bhinish Dhiman
Cómo hacer un GIF animado con imágenes sin que pese demasiado
Traducido del original en inglés. Leer el original
Arrastra las imágenes al GIF maker, ordénalas, elige un ancho, define el retardo entre fotogramas y lee 'What this will weigh' antes de presionar Build the GIF. El peso crece con ancho × alto × fotogramas: con este codificador, las fotografías cuestan de 0.56 a 0.75 bytes por píxel por fotograma, y una captura de una interfaz, 0.006. Reducir el ancho a la mitad deja el archivo en una cuarta parte, y eso funciona mejor que recortar colores.
Hacer un GIF con un puñado de imágenes fijas lleva un minuto. Hacer uno que no pese varios megabytes requiere saber cómo te cobra el formato, y te cobra de una manera fácil de calcular antes de presionar nada. Esta guía trata sobre imágenes fijas; si partes de un clip de video, las mediciones de video a GIF: los bytes por píxel por fotograma cubren ese caso.
Cómo te cobra un GIF
Un GIF animado es una pila de imágenes fijas completas, cada una guardada como índices de paleta de 8 bits y comprimida con LZW, con un retardo escrito junto a cada una. No hay estimación de movimiento ni fotograma de referencia: nada en el formato se da cuenta de que dos fotogramas son casi la misma imagen. Así que el peso se acerca mucho a una multiplicación:
bytes ≈ ancho × alto × fotogramas codificados × bytes por píxel por fotograma
El último término lo fija la imagen, no ningún ajuste. Medido con el codificador que usa esta herramienta, en Chromium, el 27 de septiembre de 2026:
| Contenido | Bytes por píxel por fotograma |
|---|---|
| Fotografía, 800 × 533, 8 fotogramas | 0.56 a 0.69 |
| Fotografía, 480 × 320, 8 fotogramas | 0.59 a 0.75 |
| Franjas de color plano | 0.033 |
| Captura de una interfaz | 0.006 a 0.013 |
Son dos órdenes de magnitud entre una fotografía y una captura de pantalla. LZW comprime muy bien las tiras largas de píxeles idénticos y gana muy poco con el grano fotográfico, así que ningún ajuste de paleta o de tramado cierra la brecha.
Cómo calcular el peso antes de crearlo
La herramienta muestra su estimación bajo What this will weigh (cuánto va a pesar), encima del botón para crear el GIF. Toma una muestra de 64 × 64 de tus píxeles, cuenta los colores distintos y elige una tasa entre 0.03 bytes por píxel por fotograma (64 colores o menos en la muestra, que interpreta como imagen plana) y 0.65 (2 000 o más, que interpreta como fotografía). Luego suma 800 bytes por el archivo y 24 por cada fotograma. Este es el cálculo para seis fotografías en 4:3:
| Configuración | Fotogramas codificados | Tamaño del fotograma | Tasa usada | Estimación |
|---|---|---|---|---|
| Seis fotos, ancho 480 | 6 | 480 × 360 | 0.65 | 674 864 B |
| Seis fotos, ancho 240 | 6 | 240 × 180 | 0.65 | 169 424 B |
| Seis fotos, ancho 480, fundido de 2, en bucle | 18 | 480 × 360 | 0.65 | 2 022 992 B |
| Doce fotos, ancho 800 | 12 | 800 × 600 | 0.65 | 3 745 088 B |
| Seis capturas planas, ancho 480 | 6 | 480 × 360 | 0.03 | 32 048 B |
La primera fila es 800 + 6 × (24 + 480 × 360 × 0.65) = 674 864. De la tabla salen tres conclusiones.
El ancho es la palanca. Reducir el ancho de 480 a 240 deja los píxeles en una cuarta parte y llevó la estimación al 25% de la primera fila (169 424 ÷ 674 864 = 0.251). Ningún otro control se le acerca en relación con lo que cuesta visualmente.
El fundido se paga en fotogramas completos. Cada paso de mezcla es un fotograma extra completo. Con dos pasos entre cada una de seis imágenes, y la última imagen fundiéndose de nuevo con la primera porque la animación está en bucle, 6 imágenes se convierten en 6 + 6 × 2 = 18 fotogramas codificados, y la estimación se triplica. Cada mezcla se muestra durante 40 ms, así que la duración total solo crece de 1.2 segundos a 1.68 (6 × 200 ms + 12 × 40 ms).
La línea roja está en 3 000 000 bytes. Si la pasas, la estimación se pone en rojo. Doce fotos a 800 píxeles de ancho la superan con holgura.
La estimación se muestra como un rango de 35% hacia cada lado de la cifra probable, y se reemplaza por el conteo real de bytes una vez creado el archivo. Tiene dos límites que conviene conocer. No cambia cuando mueves Colours o Dithering, porque depende solo del tamaño, la cantidad de fotogramas y la muestra de píxeles. Y para capturas planas de interfaces, su tasa más baja, 0.03, está por encima del rango de 0.006 a 0.013 que se midió en la realidad, así que un GIF hecho con capturas puede quedar muy por debajo del rango que se muestra.
Cómo hacerlo en el GIF maker
- Abre el GIF maker y presiona Choose images (elegir imágenes), o arrástralas al recuadro; se convierten en los fotogramas en el orden en que las añades. Una imagen HEIC recién salida de un iPhone normalmente hay que convertirla primero.
- Ordena los fotogramas bajo Frames · drag to reorder (fotogramas, arrastra para reordenar). Arrastra una miniatura o usa los botones ← y → que tiene debajo; × quita un fotograma y Add more images (añadir más imágenes) agrega al final.
- Elige un ancho: 240, 320, 480 (el valor inicial), 640 u 800, o escribe uno en Exact width (ancho exacto). La altura sigue la proporción del primer fotograma.
- Define el ritmo con el control deslizante Frame delay (retardo entre fotogramas), que empieza en 200 ms (5 fps). Para dar a cada fotograma su propio tiempo, presiona One delay for all (un retardo para todos) hasta que diga Per-frame delays (retardo por fotograma) y escribe en la casilla de ms bajo cada miniatura.
- Ajusta Loops · 0 is forever (repeticiones, 0 es infinito). Los fotogramas con una proporción distinta de la del primero se colocan con Fit inside (encajar dentro) o Fill and crop (rellenar y recortar), sobre un fondo White, Black o Grey.
- Lee What this will weigh. Si está en rojo o simplemente es demasiado grande, baja el ancho antes de tocar cualquier otra cosa.
- Presiona Build the GIF (crear el GIF) y luego Download (el botón muestra el tamaño real). Bajo The actual file (el archivo real), la herramienta muestra los bytes por píxel por fotograma reales de lo que acaba de crear.
El retardo que escribes y el retardo que obtienes
El formato guarda cada retardo como una cantidad de centésimas de segundo, así que todo valor cae en una cuadrícula de 10 ms: 33 ms se guarda como 30, que se reproduce a 33.3 fotogramas por segundo y no a 30. Por debajo de eso, todos los navegadores principales reemplazan un retardo de 10 ms o menos por 100 ms, una regla heredada de Netscape que nada informa. El control deslizante se detiene en 20 ms. Las casillas por fotograma aceptan 10, y si lo escribes, la herramienta avisa en rojo que los navegadores lo van a sustituir por 100 ms, y la vista previa se reproduce a la velocidad más lenta que realmente tendrá el archivo.
Colores y tramado
Colours (colores) ofrece 32, 64, 128 (el valor inicial) y 255, el máximo que permite el formato una vez que se reserva una posición para la transparencia. Se crea una sola paleta a partir de todos los fotogramas y se comparte, que es lo que evita que las zonas planas cambien de color de un fotograma a otro. Dithering on (tramado activado) disimula las bandas en los degradados dispersando el error, y normalmente agranda el archivo, porque los píxeles dispersos le dan a LZW menos tiras que comprimir. Menos colores sí reducen un GIF, a costa de bandas visibles; las mediciones de video a GIF ponen cifras a ese intercambio.
GIF tiene una posición de paleta totalmente transparente y ninguna transparencia parcial, así que un fotograma PNG con bordes suaves se aplana sobre el color de fondo que elegiste en lugar de quedar con un borde irregular.
Otras formas de hacerlo
FFmpeg puede crear un GIF a partir de imágenes fijas numeradas con una paleta compartida:
ffmpeg -framerate 2 -i frame%03d.png -vf "split[a][b];[a]palettegen[p];[b][p]paletteuse" out.gif-framerate 2 muestra dos fotogramas por segundo, es decir, 500 ms por fotograma (1 000 ÷ 2). frame%03d.png lee archivos numerados con tres dígitos, de frame001.png en adelante. La cadena de filtros genera una paleta a partir de los fotogramas y luego la aplica, la misma idea de paleta compartida que usa la herramienta. macOS y Windows no tienen ninguna forma integrada de hacer un GIF animado que podamos recomendarte.
Antes de hacer uno, comprueba si el destino acepta video. La misma animación en MP4 o WebM suele ser de diez a cincuenta veces más liviana y se reproduce con más fluidez; el GIF es la respuesta correcta cuando el destino solo acepta imágenes.
Cómo comprobar que no se subió nada
Abre las herramientas para desarrolladores de tu navegador en la pestaña Network antes de crear el GIF. La primera vez que presionas Build the GIF se descarga el codificador, 11.6 KB comprimidos con gzip desde este sitio; ninguna solicitud lleva tus fotogramas a ninguna parte, porque se componen y codifican en la pestaña.
Crea el tuyo en el GIF maker y lee el peso antes de presionar el botón. Si primero hay que recortar o enderezar los fotogramas, hazlo en el editor de imágenes, que los codifica una sola vez en lugar de tres.