Estamos en 2019 y ya es hora de que nos decidamos por los GIF ( - aquí estamos hablando de pronunciación en inglés, para nosotros esto no es relevante - aprox. traducción). Los GIF ocupan una gran cantidad de espacio (¡normalmente varios megabytes!), lo cual, si eres desarrollador web, ¡es completamente contrario a tus deseos! Como desarrollador web, desea minimizar las cosas que los usuarios necesitan descargar para que el sitio se cargue rápidamente. Por la misma razón, minimiza JavaScript, optimiza PNG, JPEG y, a veces, convierte . ¿Pero qué hacer con el antiguo GIF?
¡No necesitaremos GIF donde vamos!
Si tu objetivo es mejorar la velocidad de carga del sitio, ¡entonces debes deshacerte de los GIF! Pero ¿cómo se hacen entonces imágenes animadas? La respuesta es el vídeo. ¡Y en la mayoría de los casos, obtendrá una mejor calidad y un ahorro de espacio del 50 al 90 %! En la vida, la mayoría de las cosas tienen sus pros y sus contras. Cuando reemplazas GIF con video, la mayoría de las veces no podrás encontrar ninguna desventaja.
¡Abajo todos los GIF!
Por suerte, sustituir los GIF por vídeos ha sido algo habitual en los últimos años, por lo que ya se utilizan todas las herramientas necesarias. En esta publicación, no reinventaré la rueda, solo mejoraré ligeramente las soluciones existentes. Así que aquí está la esencia:
- Toma un GIF y conviértelo en un vídeo.
- Codifique el video usando H.264 o VP9, es decir. comprimirlo y empaquetarlo en un contenedor MP4 o WebM
- Reemplazar
<img>con GIF animado activado<video>con rodillo - Active la reproducción automática sin sonido y realice un bucle para obtener un efecto GIF
es 2019
Ya estamos en 2019. El progreso avanza y debemos seguirle el ritmo. Hasta ahora hemos tenido dos opciones de códec que son ampliamente compatibles con todos los navegadores y herramientas de codificación de vídeo:
- H.264 - introducido en 2003 y más utilizado en la actualidad
- VP9 - apareció en 2013 y logró mejoras de compresión de casi el 50% en comparación con H.264, aunque no todo no siempre es tan color de rosa
Nota: Aunque H.265 es la próxima versión de H.264 y es capaz de competir con VP9, no lo considero debido a la mala compatibilidad del navegador, como se muestra en la página. . Los costes de licencia son la razón principal por la que H.265 no se ha extendido tanto como H.264 y por la que el consorcio Alliance of Open Media está trabajando con un códec libre de derechos, AV1.
Recuerde, nuestro objetivo es reducir los GIF enormes al tamaño más pequeño posible para acelerar los tiempos de carga. Sería un año 2019 extraño si no tuviéramos un nuevo estándar para la compresión de vídeo en nuestro arsenal. Pero existe y se llama AV1. Con AV1 puedes . ¡Lepota! 🙂
¡AV1 está a tu servicio desde 2019!
En escritorios
Recientemente se agregó soporte para la decodificación de video AV1 a las versiones de escritorio. и . En este momento, la compatibilidad con Firefox tiene errores y puede causar fallas, pero las cosas deberían mejorar con la adición de ya en Firefox 67 ( - aprox. trad.). Para obtener detalles sobre la nueva versión, lea:
En smartphones
Actualmente no existe soporte de hardware para teléfonos inteligentes debido a la falta de decodificadores adecuados. Puede realizar la decodificación de software, aunque esto aumentará el consumo de batería. Los primeros SOC móviles que admitan la decodificación de hardware AV1 aparecerán en 2020.
Y luego los lectores del artículo dicen: "Entonces, si los teléfonos móviles aún no lo admiten correctamente, ¿por qué usar AV1?"
AV1 es un códec bastante nuevo y estamos en el comienzo de su adaptación. Piensa en este artículo como la etapa "mientras cocinas, la multitud te seguirá". El soporte de escritorio por sí solo acelerará los sitios para parte de la audiencia. Y los códecs antiguos se pueden utilizar como escenario alternativo cuando AV1 no es compatible con el dispositivo de destino. Pero a medida que los usuarios cambien a dispositivos compatibles con AV1, todo estará listo. Para lograr esto, necesitamos crear una etiqueta de video como se muestra a continuación, que permitirá al navegador seleccionar su formato preferido: AV1 - >> VP9 - >> H.264. Bueno, si el usuario tiene un dispositivo o navegador muy antiguo que no admite vídeo en absoluto (lo cual es extremadamente improbable con H264), entonces solo verá el 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 vídeos en AV1 es fácil. y use los siguientes comandos. Usamos 2 pases para lograr la tasa de bits objetivo. Para ello ejecutaremos ffmpeg dos veces. La primera vez escribimos el resultado en un archivo inexistente. Esto creará un registro que será necesario 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í hay un desglose de los parámetros:
-i - Входной файл.
-pix_fmt - Используем формат 4:2:0 для выбора информации о цветности в видео. Существует много других возможных форматов, но 4:2:0 наиболее совместимый.
-c:v - Какой кодек использовать, в нашем случае - AV1.<br />
-b:v – Средний битрейт, которого мы хотим добиться.
-filter:v scale - Фильтр масштаба ffmpeg используется для уменьшения разрешения видео. Мы устанавливаем X:-1 что говорит ffmpeg уменьшить ширину до X, сохранив соотношение сторон.
-strict experimental - Надо указать, т.к. AV1 достаточно новый кодек.
-cpu-used - Ужасно названный параметр, который на самом деле используется для выбора уровня качества видео. Возможные значения 0-4. Чем меньше значение, тем лучше качество и, соответственно, больше время, которое займёт кодировка.
-tile-columns - Для использования нескольких тредов. Говорит AV1 разбить видео на отдельные колонки, которые могут быть перекодированы независимо для лучшей утилизации ЦПУ.
-row-mt – Тоже, что и предыдущий параметр, но разбивает так же на строки внутри колонок.
-threads - Количество тредов.
-pass - Какой проход сейчас выполняется.
-f - Используется только при первом проходе. Указывает формат выходного файла, т.е. MP4 в нашем случае.
-movflags faststart - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Hacer GIF
Para crear el GIF utilicé el siguiente comando. Para reducir el tamaño, escalé el GIF a 720 px de ancho y 12 fps en lugar del video original de 24 fps.
./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 la prueba
Es mejor ver una vez que leer cien veces, ¿verdad? Asegurémonos de que el AV1 sea la elección correcta para nuestros propósitos. Tomé el video gratuito de Tears Of Steel disponible aquí. y lo convirtió usando aproximadamente la misma tasa de bits para los códecs AV1, VP9, H.264. Los resultados se encuentran a continuación para que pueda compararlos usted mismo.
Nota 1: Si el archivo siguiente no se carga, puede que sea el momento 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 la compatibilidad con AV1
Nota 2: Para Firefox 66 en Linux necesitarás configurar la bandera media.av1.enabled en significado true в about:config
Nota 3: ¡He decidido no incluir GIF normales a continuación debido a su gran tamaño y la cantidad de datos que se necesitarían para cargar esta página! (Lo cual sería irónico, ya que esta página trata de reducir la cantidad de datos en una página :)). Pero puedes ver los GIF finales aquí.
Nota del traductor: Habr no le permite habilitar la reproducción automática y reproducir el archivo en bucle, por lo que sólo puede evaluar la calidad. Puedes ver cómo se verán las “imágenes animadas” en vivo en .
Escena 1 a 200 Kbps
Aquí hay mucho movimiento, lo que es especialmente sensible a tasas de bits bajas. Se puede ver inmediatamente lo malo que es H.264 con esta tasa de bits; los cuadrados son inmediatamente visibles. VP9 mejora un poco la situación, pero los cuadrados siguen siendo visibles. AV1 claramente gana, produciendo una imagen obviamente mejor.
H.264
VP9
AV1
Escena 2 a 200 Kbps
Aquí hay mucho contenido CGI translúcido. Los resultados no son tan diferentes como la última vez, pero en general el AV1 luce mejor.
H.264
VP9
AV1
Escena 3 a 100 Kbps
En esta escena, bajamos la tasa de bits a 100 Kbps y los resultados son consistentes. ¡AV1 mantiene su liderazgo incluso con tasas de bits bajas!
H.264
VP9
AV1
Cereza en el pastel
Para terminar este artículo sintiendo la cantidad de ancho de banda ahorrado en comparación con GIF: el tamaño total de todos los videos es mayor... 1.62MB!! Bien. ¡Unos putos 1,708,032 bytes! A modo de comparación, aquí están los tamaños de vídeo GIF y AV1 para cada escena.
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 impresionante! ¿No es?
Nota: No se proporcionan los tamaños de archivo de VP9 y H264, ya que prácticamente no se diferencian de AV1 debido al uso de la misma tasa de bits. Sería redundante agregar dos columnas más con los mismos tamaños, solo para resaltar que estos códecs producen una calidad mucho mejor que GIF en tamaños de archivo mucho más pequeños.
Fuente: habr.com