Por qué los GIF salen mal en la etapa de extracción
La mayoría de los GIF malos se deciden antes de abrir cualquier software GIF. Alguien extrae cada fotograma de un clip de cinco segundos, obtiene 150 imágenes, las ensambla y termina con un archivo de 14 MB que una aplicación de chat se niega a insertar. El instinto entonces es comprimir más fuerte, lo que lo enturbia sin hacerlo mucho más pequeño.
El problema real está en sentido ascendente. Un GIF no es un códec de vídeo: no tiene compensación de movimiento, ni predicción entre fotogramas que merezca ese nombre, y tiene un límite máximo de 256 colores por fotograma. Cada cuadro está cerca de una imagen independiente. Ese único hecho impulsa todas las decisiones a continuación.
Así que la secuencia a considerar es: decidir primero el recuento de fotogramas, luego la paleta y solo después preocuparse por la compresión.
Paso 1: elija el intervalo de muestreo
La pregunta no es "cuántos fotogramas tiene la fuente" sino "cuántos necesita realmente el movimiento". Algunos puntos de partida aproximados:
- 10–12 fps : la configuración de caballo de batalla. Lo suficientemente fluido para gestos, demostraciones de UI y la mayoría de clips de reacción. En una fuente de 30 fps, eso es cada tercer fotograma; a 60 fps, cada cinco.
- 15 fps — para movimiento continuo donde 12 comienza a parpadear, como una cámara panorámica o un objeto que rebota.
- 5–8 fps — para contenido tipo diapositiva: un gráfico que se acumula, un antes/después, un zoom lento. A menudo parece más deliberado que barato.
- 24+ fps — rara vez vale la pena. El tamaño del archivo aproximadamente se duplica frente a 12 fps y la mayoría de los espectadores no pueden notarlo en una pequeña imagen en bucle.
En el extractor de fotogramas, use el modo "Frame Rate (FPS)" e ingrese el divisor: 3 por cada tercer cuadro, 5 por cada quinto. El recuento de fotogramas se actualiza a medida que escribe, que es el número que realmente predice el tamaño de su archivo.
Comprobación de cordura antes de extraer: multiplique el recuento de fotogramas previsto por aproximadamente 30 a 60 KB. Se trata de un estadio realista para un fotograma GIF de 480 píxeles de ancho después de la reducción de la paleta. Sesenta fotogramas ocupan entre 2 y 3 MB. Si eso supera su presupuesto, corte los fotogramas ahora; es mucho más eficaz que comprimirlos más adelante.
Paso 2: mantén la duración corta
GIF no tiene ningún caso de uso de formato largo. De dos a cuatro segundos cubren casi todo lo que funciona como un bucle, y el punto del bucle importa más que la duración: un clip que termina cerca de donde comenzó se lee como continuo, mientras que uno que se corta a mitad del movimiento llama la atención sobre la unión en cada repetición.
Utiliza el control deslizante de rango de tiempo para recortar antes de extraer en lugar de eliminar fotogramas después. Las marcas de tiempo son visibles a medida que arrastras, por lo que puedes colocar el punto de salida en la misma pose que el punto de entrada.
Paso 3: comprende el límite de 256 colores
Esta es la restricción que sorprende a la gente y vale la pena comprenderla en lugar de luchar.
Cada fotograma GIF se indexa en una paleta de 256 colores como máximo. Tu vídeo fuente tiene millones. Algo tiene que descartar la diferencia, y cómo lo hace eso decide cómo se ve el resultado.
Dos estrategias, y la correcta depende completamente del contenido:
- Tramado dispersa píxeles de colores de paleta adyacentes para falsificar los que faltan. Los degradados (cielos, iluminación suave, sombras en una cara) sobreviven mucho mejor con él. El costo es un patrón de moteado visible y un archivo notablemente más grande, porque ese ruido vence la compresión.
- Sin vacilaciones ofrece áreas de color limpias y planas y archivos mucho más pequeños. Ideal para grabaciones de pantalla, demostraciones de UI, arte lineal y cualquier cosa con grandes regiones uniformes. En degradados fotográficos produce bandas duras.
Regla práctica: contenido de la pantalla, sin tramas. Imágenes de la cámara, vacilantes. Si no está seguro, exporte ambos y mírelos en tamaño real; la diferencia es obvia y lleva un minuto.
Esta es también la razón por la cual extraer PNG es la decisión correcta aunque el GIF final tenga 256 colores. Cada elemento JPEG en la fuente se convierte en un color en el que la paleta debe dedicar una entrada. Introducir cuadros limpios y sin pérdidas en el paso de la paleta le da al cuantificador un mejor punto de partida.
Paso 4: haga coincidir el retraso del fotograma con el intervalo que extrajo
Los GIF no almacenan una velocidad de fotogramas. Almacenan un retraso por fotograma, en centésimas de segundo, y aquí es donde muchos GIF terminan reproduciéndose a la velocidad incorrecta.
La aritmética es simple: retraso = 100 ÷ tu fps objetivo.
- 12 fps → retraso 8 (0,08 s)
- 10 fps → retraso 10 (0,10 s)
- 15 fps → retardo 7 (redondeando a 6,67)
- 5 fps → retraso 20 (0,20 s)
Dos cosas que debes saber. En primer lugar, el redondeo es real: 15 fps no se pueden expresar exactamente, por lo que el bucle se desvía ligeramente. Para cualquier cosa donde el tiempo importe, prefiera 10, 12,5, 20 o 25 fps, que se dividen claramente. En segundo lugar, la mayoría de los navegadores reducen silenciosamente los retrasos por debajo de 2 (0,02 s) hasta 10, por lo que un GIF creado a 50 fps se reproducirá a 10 fps para la mayoría de los espectadores, cinco veces el tamaño del archivo y sin ninguna suavidad.
Paso 5: corte el tamaño, en el orden que funcione
Si el archivo aún es demasiado grande, aplíquelos en orden. Cada uno cuesta menos calidad por byte guardado que el siguiente.
- Reduzca las dimensiones. Reducir a la mitad el ancho y cuartar el número de píxeles. Un GIF de 480 píxeles de ancho está bien para la mayoría de contextos de incrustación; Rara vez se necesitan más de 800.
- Eliminar fotogramas. Pasar de 15 a 10 fps elimina un tercio de los datos para un cambio que la mayoría de los espectadores no registrarán.
- Acorte el clip. Sin piedad. Casi todos los GIF tienen un segundo al principio o al final sin hacer nada.
- Reduzca la paleta por debajo de 256. 128 o incluso 64 colores es a menudo el contenido es invisible en la pantalla y significativamente más pequeño.
- Desactivar el tramado si lo tenía activado y el contenido puede soportarlo.
Observe que "comprimir más fuerte" no está en la lista. La compresión del GIF es LZW sin pérdidas: no hay control de calidad. Todo lo que puedes hacer es decidir qué datos incluir en primer lugar.
Cuando no deberías hacer ningún GIF
Vale la pena decirlo claramente, porque ahorra mucho esfuerzo:
- Cualquier cosa que dure más de cinco segundos. Un MP4 o WebM tendrá una fracción del tamaño con mejor calidad. La mayoría de las plataformas que aceptan "GIF" ahora los convierten a vídeo internamente de todos modos.
- Contenido fotográfico con mucho degradado. 256 colores simplemente no son suficientes y no hay trucos de paleta lo soluciona.
- Cualquier cosa que necesite audio. El GIF no tiene ninguno, y el bucle se sentirá mal si la fuente tenía un ritmo.
- Cualquier cosa que tenga más de 800 píxeles de ancho. Para entonces, la penalización de tamaño es lo suficientemente grave como para que el vídeo sea la respuesta correcta.
GIF gana su lugar exactamente en una situación: un bucle corto, silencioso y de reproducción automática que debe funcionar en cualquier lugar sin un reproductor. Por eso, sigue invicto, siempre que los fotogramas incluidos se hayan elegido deliberadamente.
Un ejemplo resuelto
Digamos que desea un GIF de un Interacción de interfaz de usuario de tres segundos a partir de una grabación de pantalla de 60 fps, menos de 1 MB.
- Recortar a los 3,2 segundos que contiene la interacción, con el último fotograma cerca del primero.
- Extraer en modo FPS con N = 5: cada quinto fotograma de 60 fps da 12 fps, aproximadamente 38 fotogramas. Salida PNG.
- Ensamblar en el retraso 8, se difumina (es contenido de pantalla con colores planos).
- Escalar a 600 píxeles de ancho si la fuente fuera mayor.
- Comprueba el resultado. Alrededor de 38 fotogramas de contenido de interfaz de usuario plano normalmente ocupan menos de 1 MB. De lo contrario, baje la paleta a 128 colores antes de tocar cualquier otra cosa.
Todo lleva unos minutos y cada paso es una decisión que tomó en lugar de un valor predeterminado que heredó.