Ahora es el año 2019, y es hora de que tomemos una decisión con respecto al GIF (¡ no, no se trata de esa decisión! ¡Aquí nunca estaremos de acuerdo! - Aquí estamos hablando de la pronunciación en inglés, para nosotros no es relevante - aprox. Transl. ). Los GIF ocupan una gran cantidad de espacio (¡generalmente unos pocos megabytes!) ¡Que si eres un desarrollador web, contradice completamente 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 JPEG a WebP . ¿Pero qué hacer con el viejo GIF?
¡A dónde vamos, no necesitamos GIF!
Si su objetivo es mejorar la velocidad de carga del sitio, ¡debe deshacerse del GIF! ¿Pero cómo entonces hacer imágenes animadas? La respuesta es video. ¡Y en la mayoría de los casos, obtendrá la mejor calidad y ahorro de espacio del 50-90%! En la vida, la mayoría de las cosas tienen sus pros y sus contras. Cuando reemplaza GIFs con video, no se pueden encontrar los inconvenientes más comunes.
¡Abajo todos los gifs!
Afortunadamente, reemplazar GIF por video ha sido común en los últimos años, por lo que todas las herramientas necesarias ya están en uso. En esta publicación, no reinventaré la rueda, sino que solo mejoraré ligeramente las soluciones existentes. Así que aquí está la esencia:
- Toma un GIF y conviértelo a video
- Codifique video usando H.264 o VP9, es decir exprimirlo y empacarlo en un contenedor MP4 o WebM
- Reemplace
<img> con GIF animado con <video> con película - Active la reproducción automática silenciosa y realice un bucle para lograr el efecto GIF
Google tiene buena documentación que describe el proceso.
Ahora es 2019
Ahora es el año 2019. El progreso avanza y debemos seguirle el ritmo. Hasta ahora, hemos tenido dos versiones de códecs que son ampliamente compatibles con todos los navegadores y herramientas de codificación de video:
- H.264 : introducido en 2003 y más utilizado hoy en día
- VP9 : apareció en 2013 y logró una mejora de la compresión en casi un 50% en comparación con H.264, aunque como dicen aquí, no todo es y no siempre es tan optimista
Nota: aunque el estándar H.265 es la próxima versión de H.264 y puede competir con VP9, no lo considero debido a la poca compatibilidad del navegador, que se muestra en la página https://caniuse.com/#feat=hevc . Los gastos de licencia son la razón principal por la que H.265 no se ha generalizado tanto como H.264 y por qué el consorcio Alliance of Open Media trabaja con un códec libre de regalías, con AV1.
Recuerde que nuestro objetivo es reducir los GIF enormes al tamaño más pequeño posible para acelerar la carga. Sería un año 2019 extraño si no tuviéramos un nuevo estándar para la compresión de video en nuestro arsenal. Pero él es y se llama AV1. Con AV1, puede lograr aproximadamente un 30% de mejora en la compresión en comparación con VP9 . Lepota! :)
¡AV1 a su servicio desde 2019!
En escritorios
Recientemente, se ha agregado soporte para decodificar video AV1 en las versiones de escritorio de Google Chrome 70 y Mozilla Firefox 65 . En este momento, el soporte en Firefox es defectuoso y puede causar fallas, pero las cosas deberían cambiar con la adición del decodificador dav1d en Firefox 67 ( ya está disponible, pero ha aparecido el soporte - aprox. Transl.) . Para obtener más información sobre la nueva versión, lea la versión dav1d 0.3.0: ¡incluso más rápido!
En teléfonos inteligentes
Para los teléfonos inteligentes, actualmente no existe soporte de hardware debido a la falta de decodificadores apropiados. Puede hacer decodificación de software, aunque esto conducirá a un mayor consumo de batería. El primer SOC móvil con soporte para decodificación de hardware AV1 aparecerá en 2020.
Y aquí los lectores del artículo están "así que si el móvil aún no es compatible normalmente, entonces ¿por qué usar AV1?"
AV1 es un códec bastante nuevo, y estamos en el comienzo de su adaptación. Piense en este artículo como la etapa "mientras cocina, la gente se está levantando". El soporte de escritorio solo acelerará los sitios para parte de la audiencia. Y los códecs antiguos se pueden usar como secuencia de comandos alternativa, cuando AV1 no es compatible con el dispositivo de destino. Pero a medida que los usuarios cambien a dispositivos con soporte para AV1, todo estará listo. Para lograr esto, necesitamos crear una etiqueta de video, como se muestra a continuación, que permite al navegador seleccionar el formato preferido - AV1 - >> VP9 - >> H.264 . Bueno, si el usuario tiene un dispositivo o navegador completamente antiguo que el video no admite (lo cual es poco probable que sea robado con H264) , entonces solo ve 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>
Creando AV1
Crear un video en AV1 es fácil. Descargue la última compilación de ffmpeg para su sistema desde aquí y use los comandos a continuación. Usamos 2 pases para lograr el bitrate objetivo. Para hacer esto, ejecutaremos ffmpeg dos veces. La primera vez que escribimos el resultado en un archivo inexistente. Esto creará el registro que se necesitará 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.mp4
Aquí hay una descripción 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 - , . .
Creación de GIF
Para crear el GIF, utilicé el siguiente comando. Para reducir el tamaño, escalé el GIF a 720px 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.gif
Resultados de la prueba
Es mejor ver una vez que leer cien veces, ¿verdad? Asegurémonos de que AV1 sea la elección correcta para nuestros propósitos. Tomé el video gratuito Tears Of Steel, disponible aquí https://mango.blender.org/ , y lo convertí usando aproximadamente la misma tasa de bits para los códecs AV1, VP9, H.264. Los resultados están a continuación, para que pueda compararlos usted mismo.
Nota 1: Si el archivo a continuación no se descarga, es posible que deba actualizar su navegador. Recomendaría un navegador basado en Chromium como Chrome, Vivaldi, Brave u Opera. Aquí está la información de soporte más reciente para AV1 https://caniuse.com/#feat=av1
Nota 2: Para Firefox 66 en Linux, deberá establecer el indicador media.av1.enabled en true en about:config
Nota 3: ¡Decidí no incluir GIFs regulares a continuación debido a su gran tamaño y la cantidad de datos que podrían ser necesarios para cargar esta página! (Lo cual sería irónico, porque esta página trata de reducir la cantidad de datos en la página :)). Pero puedes ver los GIF finales aquí https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs
Nota del traductor: Habr no le permite habilitar la reproducción automática y repetir el archivo, por lo que solo se evaluará la calidad. Puede ver cómo se ven las "imágenes animadas" en vivo en el artículo original .
Escena 1 a 200 Kbps
Hay mucho movimiento, que es especialmente sensible a bajas tasas de bits. Puede ver de inmediato cuán malo es H.264 en esta tasa de bits, los cuadrados son inmediatamente visibles. VP9 mejora un poco la situación, pero los cuadrados aún son visibles. AV1 claramente gana, dando obviamente la mejor imagen.
H.264
VP9
AV1
Escena 2 @ 200 Kbps
Hay mucho contenido translúcido de CGI. Los resultados ya no difieren tanto como la última vez, pero en general el AV1 se ve mejor.
H.264
VP9
AV1
Escena 3 @ 100 Kbps
En esta escena, reducimos la velocidad de bits a 100 Kbps y los resultados son consistentes. ¡AV1 conserva el liderazgo a bajas tasas de bits!
H.264
VP9
AV1
Cereza en el pastel
Para completar el artículo, sintiendo la cantidad de tráfico guardado en comparación con GIF: el tamaño total de todos los videos es mayor ... 1.62 MB !! Derecho ¡Unos malditos 1.708.032 bytes! A modo de comparación, aquí está el tamaño de los videos GIF y AV1 para cada una de las escenas.
Simplemente impresionante! Derecho?
Nota: Los tamaños de archivo VP9 y H264 no se muestran, ya que prácticamente no difieren de AV1 debido al uso de la misma tasa de bits. Sería redundante agregar dos columnas más con las mismas dimensiones, solo para enfatizar que estos códecs producen una calidad mucho mejor que los GIF con archivos de tamaños mucho más pequeños.