Ahora estamos en 2019, y es hora de tomar una decisión sobre los GIF ( — aquí se trata de la pronunciación en inglés, para nosotros no es relevante — nota del traductor.). Los GIF ocupan una gran cantidad de espacio (¡generalmente varios megabytes!) que, si eres un desarrollador web, contradice completamente tus deseos. Como desarrollador web, quieres minimizar las cosas que los usuarios necesitan descargar para que el sitio cargue rápido. Por la misma razón, minimizas JavaScript, optimizas PNG, JPEG, y a veces incluso conviertes . Pero, ¿qué hacer con el viejo GIF?
¡A donde vamos, no necesitaremos GIF!
Si tu objetivo es mejorar la velocidad de carga del sitio, ¡debemos deshacernos de los GIF! Pero, ¿cómo haremos imágenes animadas? La respuesta es video. Y en la mayoría de los casos, obtendrás mejor calidad y un ahorro de espacio del 50-90%. En la vida, la mayoría de las cosas tienen sus pros y sus contras. Cuando reemplazas GIF por video, generalmente no puedes encontrar desventajas.
¡Fuera todos los GIF!
Afortunadamente, reemplazar GIF por video ha sido algo habitual en los últimos años, por lo que ya están en uso todas las herramientas necesarias. En esta publicación, no reinventaré la rueda, solo mejoraré un poco las soluciones existentes. Así que esto es lo que hay que hacer:
- Toma un GIF y recodifícalo a video
- Codifica el video con H.264 o VP9, es decir, comprímelo y empaquétalo en un contenedor MP4 o WebM
- Reemplace
<img>con un GIF animado encon un clip - Activa la reproducción automática sin sonido y haz que se repita para lograr el efecto GIF
Ahora estamos en 2019
Ahora estamos en 2019. El progreso avanza, y debemos mantenernos al día. Hasta ahora, hemos tenido dos opciones de códecs que son ampliamente compatibles en todos los navegadores y herramientas para codificar video:
- H.264 — introducido en 2003 y el más utilizado hoy en día
- VP9 — presentado en 2013 y que ha logrado mejorar la compresión casi en un 50% en comparación con H.264, aunque no siempre es tan sencillo
Nota: aunque el estándar H.265 — la siguiente versión de H.264 y capaz de competir con VP9, no lo considero debido a la débil compatibilidad con los navegadores, como se muestra en la página. . Los costos de licencia son la principal razón por la que H.265 no se ha vuelto tan común como H.264 y por la que el consorcio Alliance of Open Media trabaja con un códec sin regalías: AV1.
Recuerden que nuestro objetivo es reducir los enormes GIFs al tamaño más pequeño posible para acelerar la carga. Sería un año extraño en 2019 si no tuviéramos un nuevo estándar para la compresión de video. Pero lo tenemos y se llama AV1. Con AV1 se puede . ¡Es maravilloso! 🙂
¡AV1 está a su disposición desde 2019!
En computadoras de escritorio
Recientemente se añadió soporte para la decodificación de video AV1 en las versiones de escritorio de y . En este momento, el soporte en Firefox tiene fallos y puede causar bloqueos, pero debería mejorar con la adición del ya en Firefox 67 ( — nota del traductor). Para detalles sobre la nueva versión, lea —
En smartphones
Actualmente, no hay soporte hardware para smartphones debido a la falta de decodificadores compatibles. Se puede hacer una decodificación por software, pero esto aumentará el consumo de batería. Los primeros SOC móviles con soporte para decodificación hardware de AV1 aparecerán en 2020.
Y aquí los lectores del artículo dirán: "si los móviles aún no lo soportan bien, ¿por qué usar AV1 entonces?"
AV1 es un códec relativamente nuevo y estamos al principio de su adopción. Piensen en este artículo como una etapa de "mientras ustedes se preparan, la gente se adapta". El soporte en computadoras de escritorio por sí solo acelerará los sitios para una parte de la audiencia. Y los códecs antiguos se pueden usar como un escenario de respaldo cuando AV1 no es compatible en el dispositivo objetivo. A medida que más usuarios cambien a dispositivos con soporte AV1, todo estará listo. Para lograr esto, necesitamos crear una etiqueta de video, como se muestra a continuación, que permita al navegador elegir el formato preferido — AV1 ->> VP9 ->> H.264. Pero si un usuario tiene un dispositivo o navegador muy antiguo que no soporta video en absoluto (lo cual es poco probable con H.264), simplemente verá un GIF.
<video style="display:block; margin: 0 auto;" autoplay loop muted playsinline poster="RollingCredits.jpg">
<source src="media/RollingCredits.av1.mp4" type="video/mp4">
<source src="media/RollingCredits.vp9.webm" type="video/webm">
<source src="media/RollingCredits.x264.mp4" type="video/mp4">
<img src="media/RollingCredits.gif">
</video>Creación de AV1
Crear un video en AV1 no es complicado. y utilice los comandos a continuación. Usamos 2 pasadas para alcanzar la tasa de bits objetivo. Para esto, ejecutaremos ffmpeg dos veces. La primera vez escribiremos el resultado en un archivo inexistente. Esto creará un registro que necesitaremos para la segunda ejecución de ffmpeg.
# Linux or Mac
## Проход 1
ffmpeg -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 /dev/null &&
## Проход 2
ffmpeg -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4
# Windows
## Проход 1
ffmpeg.exe -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 NUL && ^
## Проход 2
ffmpeg.exe -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4Aquí está la descripción de los parámetros:
-i - Archivo de entrada.
-pix_fmt - Utiliza el formato 4:2:0 para seleccionar la información de color en el video. Existen muchos otros formatos posibles, pero el 4:2:0 es el más compatible.
-c:v - Qué códec utilizar, en nuestro caso - AV1.<br />
-b:v – La tasa de bits media que queremos alcanzar.
-filter:v scale - El filtro de escala de ffmpeg se utiliza para reducir la resolución del video. Establecemos X:-1, lo que le dice a ffmpeg que reduzca el ancho a X, manteniendo la relación de aspecto.
-strict experimental - Debe especificarse, ya que AV1 es un códec bastante nuevo.
-cpu-used - Parámetro mal nombrado que en realidad se utiliza para seleccionar el nivel de calidad del video. Los valores posibles son 0-4. Cuanto menor sea el valor, mejor será la calidad y, por lo tanto, más tiempo llevará la codificación.
-tile-columns - Para usar múltiples subprocesos. Indica a AV1 que divida el video en columnas separadas que pueden ser recodificadas de forma independiente para una mejor utilización de la CPU.
-row-mt – Igual que el parámetro anterior, pero también divide en filas dentro de las columnas.
-threads - Número de subprocesos.
-pass - Qué paso se está realizando actualmente.
-f - Se utiliza solo en el primer paso. Indica el formato de salida del archivo, es decir, MP4 en nuestro caso.
-movflags faststart - Activamos el inicio rápido del video moviendo parte de los datos al principio del archivo. Esto permitirá comenzar la reproducción incluso antes de que se complete la carga del archivo.
Creación de GIF
Para crear el GIF, utilicé el comando que se muestra a continuación. Para reducir el tamaño, escalé el GIF a 720px de ancho y a 12 fps en lugar de los 24 fps del video original.
./ffmpeg -i /mnt/c/Users/kasing/Desktop/ToS.mov -ss 00:08:08 -t 12
-filter_complex "[0:v] fps=12,scale=720:-1" -y scene2.gifResultados de pruebas
Es mejor ver una vez que leer cien veces, ¿verdad? Asegurémonos de que AV1 sea la elección correcta para nuestros objetivos. Tomé un video gratuito, Tears Of Steel, disponible aquí , y lo convertí, utilizando una tasa de bits aproximadamente igual para los códecs AV1, VP9, H.264. Los resultados están a continuación, así que puede compararlos por sí mismo.
Nota 1: Si el archivo a continuación no se carga, puede que sea hora de actualizar su navegador. Recomendaría un navegador basado en Chromium, como Chrome, Vivaldi, Brave u Opera. Aquí está la información más reciente sobre el soporte de AV1
Nota 2: Para Firefox 66 en Linux, necesitará habilitar la bandera media.av1.enabled en true en about:config
Nota 3: Decidí no incluir los GIF normales a continuación debido a su gran tamaño y volumen de datos que podrían ser necesarios para cargar esta página. (¡Lo cual sería irónico, dado que esta página trata sobre la reducción del volumen de datos en la página :)). Pero puede ver los GIF finales aquí
Nota del traductor: Habr no permite habilitar la reproducción automática y ciclar el archivo, por lo que solo se podrá evaluar la calidad. Puede ver cómo se verán las "imágenes animadas" en vivo en .
Escena 1 @ 200 Kbps
Hay mucho movimiento aquí, lo que es especialmente sensible a tasas de bits bajas. Es evidente cómo H.264 se ve mal a esta tasa de bits; los cuadros son evidentes. VP9 mejora un poco la situación, pero los cuadros aún son visibles. AV1 claramente gana, ofreciendo una imagen visiblemente mejor.
H.264
VP9
AV1
Escena 2 @ 200 Kbps
Aquí hay mucho contenido CGI semitransparente. Los resultados ya no difieren tanto como la vez anterior, pero en general AV1 se ve mejor.
H.264
VP9
AV1
Escena 3 @ 100 Kbps
En esta escena, disminuimos la tasa de bits a 100 Kbps y los resultados corresponden. ¡AV1 mantiene su liderazgo incluso a tasas de bits bajas!
H.264
VP9
AV1
La guinda del pastel
Para concluir el artículo, sintamos la cantidad de tráfico ahorrado en comparación con GIF: el tamaño total de todos los videos anteriores es... 1.62 MB!! Correcto. ¡Unos malditos 1,708,032 bytes! Para comparar, aquí está el tamaño del video GIF y AV1 para cada una de las escenas
GIF
AV1
Escena 1
11.7 MB
0.33 MB
Escena 2
7.27 MB
0.18 MB
Escena 3
5.62 MB
0.088 MB
¡Simplemente asombroso! ¿No es así?
Nota: Los tamaños de archivos VP9 y H264 no se presentan, ya que prácticamente no difieren de AV1 debido al uso de la misma tasa de bits. Sería redundante añadir otras dos columnas con tamaños idénticos solo para destacar que estos códecs ofrecen una calidad mucho mejor que GIF con tamaños de archivo mucho menores.
Fuente: habr.com
