Estamos en 2019 e xa é hora de que nos decidamos polos GIF ( - aquí estamos a falar de pronuncia en inglés, para nós isto non é relevante - aprox. tradución). Os GIF ocupan unha enorme cantidade de espazo (xeralmente varios megabytes!), o que, se es un programador web, é totalmente contrario aos teus desexos. Como programador web, queres minimizar as cousas que os usuarios deben descargar para que o sitio se cargue rapidamente. Polo mesmo motivo, minimiza JavaScript, optimiza PNG, JPEG e ás veces converte . Pero que facer co GIF antigo?
Non necesitaremos GIFs onde imos!
Se o teu obxectivo é mellorar a velocidade de carga do sitio, entón tes que desfacerte dos GIF. Pero, entón, como fas imaxes animadas? A resposta é vídeo. E na maioría dos casos, obterás unha mellor calidade e un aforro de espazo do 50-90%! Na vida, a maioría das cousas teñen os seus pros e contras. Cando substitúes GIF por vídeo, a maioría das veces non poderás atopar ningunha desvantaxe.
Abaixo con todos os GIF!
Afortunadamente, a substitución de GIF por vídeos é habitual nos últimos anos, polo que xa están en uso todas as ferramentas necesarias. Neste post, non vou reinventar a roda, senón que só mellorarei lixeiramente as solucións existentes. Entón, aquí está a esencia:
- Colle un GIF e convérteo nun vídeo
- Codifica o vídeo usando H.264 ou VP9, é dicir. comprimilo e empaquetalo nun contenedor MP4 ou WebM
- Substituír
<img>con GIF animado activado<video>con rolo - Activa a reprodución automática sen son e bucle para obter un efecto GIF
É 2019
Agora é 2019. O progreso avanza, e hai que seguir con el. Ata agora tivemos dúas opcións de códec que son amplamente compatibles en todos os navegadores e ferramentas de codificación de vídeo:
- H.264 - introducido en 2003 e o máis utilizado na actualidade
- VP9 - apareceu en 2013 e logrou melloras de compresión de case un 50% en comparación co H.264, aínda que non todo non sempre é tan rosado
Nota: Aínda que H.265 é a seguinte versión de H.264 e é capaz de competir con VP9, non o considero debido á mala compatibilidade do navegador, como se mostra na páxina . Os custos de licenza son a principal razón pola que H.265 non se estendeu tanto como o H.264 e polo que o consorcio Alliance of Open Media está a traballar cun códec sen dereitos de autor, AV1.
Lembra que o noso obxectivo é reducir os GIF grandes ao menor tamaño posible para acelerar os tempos de carga. Sería un 2019 estraño se non tivésemos un novo estándar para a compresión de vídeo no noso arsenal. Pero existe e chámase AV1. Con AV1 podes . Lepota! 🙂
AV1 está ao teu servizo desde 2019!
En escritorios
Recentemente engadiuse soporte para a decodificación de vídeo AV1 ás versións de escritorio и . Neste momento, o soporte de Firefox ten erros e pode causar fallos, pero as cousas deberían mellorar coa adición de xa en Firefox 67 ( - aprox. transl.). Para obter máis información sobre a nova versión, lea:
En teléfonos intelixentes
Actualmente non hai soporte de hardware para teléfonos intelixentes debido á falta de decodificadores axeitados. Podes facer decodificación de software, aínda que isto levará a un aumento do consumo da batería. Os primeiros SOC móbiles compatibles coa decodificación de hardware AV1 aparecerán en 2020.
E entón os lectores do artigo son como, "entón, se os teléfonos móbiles aínda non o admiten correctamente, por que usar AV1?"
AV1 é un códec bastante novo e estamos no inicio da súa adaptación. Pense neste artigo como a etapa de "mentres cociñas, a multitude seguirá". O soporte de escritorio en si mesmo acelerará os sitios para parte da audiencia. E os códecs antigos pódense usar como escenario alternativo cando AV1 non é compatible co dispositivo de destino. Pero a medida que os usuarios cambian a dispositivos compatibles con AV1, todo estará listo. Para conseguilo, necesitamos crear unha etiqueta de vídeo como se mostra a continuación, que permitirá ao navegador seleccionar o seu formato preferido - AV1 - >> VP9 - >> H.264. Ben, se o usuario ten un dispositivo ou navegador moi antigo que non admite vídeo en absoluto (o que é moi improbable con H264), entón só verá o 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 é sinxelo. e use os comandos seguintes. Usamos 2 pasadas para acadar a taxa de bits obxectivo. Para iso executaremos ffmpeg dúas veces. A primeira vez que escribimos o resultado nun ficheiro inexistente. Isto creará un rexistro que será necesario para a segunda execució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í tes un desglose dos 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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Facendo GIFs
Para crear o GIF usei o seguinte comando. Para reducir o tamaño, escalei o GIF a 720 píxeles de ancho e 12 fps en lugar do vídeo orixinal 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 da proba
É mellor ver unha vez que ler cen veces, non? Asegurémonos de que o AV1 sexa a opción correcta para os nosos propósitos. Tomei o vídeo gratuíto de Tears Of Steel dispoñible aquí , e converteuno usando aproximadamente a mesma taxa de bits para os códecs AV1, VP9 e H.264. Os resultados están a continuación para que poidas comparalos por ti mesmo.
Nota 1: Se o ficheiro que aparece a continuación non se carga para ti, quizais sexa o momento de actualizar o teu navegador. Recomendaría un navegador baseado en Chromium como Chrome, Vivaldi, Brave ou Opera. Aquí tes a información máis recente sobre a compatibilidade con AV1
Nota 2: Para Firefox 66 en Linux terás que establecer a bandeira media.av1.enabled en significado true в about:config
Nota 3: Decidín non incluír GIF habituais a continuación debido ao seu gran tamaño e á cantidade de datos que necesitaría para cargar esta páxina. (O que sería irónico, xa que esta páxina trata de reducir a cantidade de datos nunha páxina :)). Pero podes ver os GIF finais aquí
Nota do tradutor: Habr non che permite activar a reprodución automática nin o bucle do ficheiro, polo que só podes avaliar a calidade. Podes ver como serán as "imaxes animadas" en directo .
Escena 1 @ 200 Kbps
Aquí hai moito movemento, que é especialmente sensible a taxas de bits baixas. Podes ver de inmediato o malo que é H.264 a esta taxa de bits; os cadrados son inmediatamente visibles. VP9 mellora un pouco a situación, pero as prazas seguen sendo visibles. AV1 gaña claramente, producindo unha imaxe obviamente mellor.
H.264
VP9
AV1
Escena 2 @ 200 Kbps
Aquí hai moito contido CGI translúcido. Os resultados non son tan diferentes como a última vez, pero en xeral o AV1 parece mellor.
H.264
VP9
AV1
Escena 3 @ 100 Kbps
Nesta escena, reducimos a taxa de bits a 100 Kbps e os resultados son consistentes. AV1 mantén o seu liderado mesmo a taxas de bits baixas.
H.264
VP9
AV1
Cereixa no bolo
Para rematar este artigo sentindo a cantidade de ancho de banda gardado en comparación co GIF: o tamaño total de todos os vídeos é maior... 1.62 MB!! Certo. Uns putos 1,708,032 bytes! Para comparación, aquí están os tamaños de vídeo GIF e 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 abraiante! Non é?
Nota: Non se indican os tamaños de ficheiro de VP9 e H264, xa que practicamente non son diferentes do AV1 debido ao uso da mesma taxa de bits. Sería redundante engadir dúas columnas máis cos mesmos tamaños, só para destacar que estes códecs producen unha calidade moito mellor que os GIF en tamaños de ficheiro moito máis pequenos.
Fonte: www.habr.com