Som el 2019 i ja era hora de decidir-nos pels GIF ( - aquí estem parlant de pronunciació en anglès, per a nosaltres això no és rellevant - aprox. traducció). Els GIF ocupen una gran quantitat d'espai (normalment diversos megabytes!), cosa que, si sou un desenvolupador web, és completament contrari als vostres desitjos! Com a desenvolupador web, voleu minimitzar les coses que els usuaris han de baixar perquè el lloc es carregui ràpidament. Per la mateixa raó, reduïu JavaScript, optimitzeu PNG, JPEG i, de vegades, feu conversions . Però què fer amb el GIF antic?
No necessitarem GIF on anem!
Si el vostre objectiu és millorar la velocitat de càrrega del lloc, heu de desfer-vos dels GIF! Però, llavors, com es fan imatges animades? La resposta és el vídeo. I en la majoria dels casos, obtindreu una millor qualitat i un estalvi d'espai del 50-90%! A la vida, la majoria de les coses tenen els seus pros i contres. Quan substituïu GIF per vídeo, la majoria de vegades no podreu trobar cap desavantatge.
A baix amb tots els GIF!
Afortunadament, la substitució dels GIF per vídeos ha estat habitual en els últims anys, de manera que ja s'utilitzen totes les eines necessàries. En aquest post, no reinventaré la roda, sinó que només milloraré lleugerament les solucions existents. Així que aquí teniu l'essència:
- Agafeu un GIF i convertiu-lo en un vídeo
- Codificar el vídeo amb H.264 o VP9, és a dir. comprimiu-lo i empaqueteu-lo al contenidor MP4 o WebM
- Substitueix
<img>amb GIF animat activat<video>amb corró - Activa la reproducció automàtica sense so i bucle per obtenir un efecte GIF
És el 2019
Ara som el 2019. El progrés avança, i hem de seguir-lo. Fins ara hem tingut dues opcions de còdec que són àmpliament compatibles amb tots els navegadors i eines de codificació de vídeo:
- H.264 - introduït l'any 2003 i el més utilitzat actualment
- VP9 - va aparèixer el 2013 i va aconseguir millores de compressió de gairebé el 50% en comparació amb H.264, tot i que no tot no sempre és tan rosat
Nota: Tot i que H.265 és la següent versió d'H.264 i és capaç de competir amb VP9, no ho considero a causa del mal suport del navegador, com es mostra a la pàgina . Els costos de llicència són el principal motiu pel qual H.265 no s'ha estès tan com l'H.264 i per què el consorci Alliance of Open Media treballa amb un còdec lliure de drets d'autor, AV1.
Recordeu que el nostre objectiu és reduir els GIF enormes a la mida més petita possible per accelerar els temps de càrrega. Seria un 2019 estrany si no tinguéssim un nou estàndard per a la compressió de vídeo al nostre arsenal. Però existeix i s'anomena AV1. Amb AV1 pots . Lepota! 🙂
AV1 està al vostre servei des del 2019!
En ordinadors de sobretaula
Recentment, s'ha afegit suport per a la descodificació de vídeo AV1 a les versions d'escriptori и . Ara mateix, el suport de Firefox té errors i pot provocar errors, però les coses haurien de millorar amb l'addició de ja al Firefox 67 ( -aprox. trad.). Per obtenir més informació sobre la nova versió, llegiu -
En telèfons intel·ligents
Actualment no hi ha suport de maquinari per a telèfons intel·ligents a causa de la manca de descodificadors adequats. Podeu fer descodificació de programari, tot i que això comportarà un augment del consum de bateria. Els primers SOC mòbils que admeten la descodificació de maquinari AV1 apareixeran el 2020.
I aleshores els lectors de l'article diuen: "Així que si els telèfons mòbils encara no ho admeten correctament, per què utilitzar AV1?"
AV1 és un còdec força nou i estem al començament de la seva adaptació. Penseu en aquest article com l'etapa "mentre cuineu, la multitud seguirà". El suport d'escriptori en si mateix accelerarà els llocs per a part del públic. I els còdecs antics es poden utilitzar com a escenari de reserva quan AV1 no és compatible amb el dispositiu de destinació. Però a mesura que els usuaris canvien als dispositius amb suport AV1, tot estarà a punt. Per aconseguir-ho, hem de crear una etiqueta de vídeo tal com es mostra a continuació, que permetrà al navegador seleccionar el seu format preferit - AV1 - >> VP9 - >> H.264. Bé, si l'usuari té un dispositiu o navegador molt antic que no admet en absolut el vídeo (cosa molt poc probable amb H264), llavors només veurà 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ó de AV1
Crear vídeos a AV1 és fàcil. i utilitzeu les ordres següents. Utilitzem 2 passades per aconseguir la taxa de bits objectiu. Per fer-ho, executarem ffmpeg dues vegades. La primera vegada que escrivim el resultat en un fitxer inexistent. Això crearà un registre que serà necessari per a la segona execució 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í teniu un desglossament dels paràmetres:
-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ó de GIF
Per crear el GIF he utilitzat l'ordre següent. Per reduir la mida, vaig escalar el GIF a 720 px d'ample i 12 fps en lloc del vídeo 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.gifResultats de la prova
És millor veure-ho una vegada que llegir cent vegades, oi? Assegurem-nos que l'AV1 sigui l'opció correcta per als nostres propòsits. Vaig prendre el vídeo gratuït de Tears Of Steel disponible aquí , i el va convertir utilitzant aproximadament la mateixa taxa de bits per als còdecs AV1, VP9, H.264. Els resultats es mostren a continuació perquè els pugueu comparar vosaltres mateixos.
Nota 1: Si el fitxer següent no us carrega, pot ser que sigui el moment d'actualitzar el vostre navegador. Recomanaria un navegador basat en Chromium com Chrome, Vivaldi, Brave o Opera. Aquí teniu la informació més recent sobre el suport AV1
Nota 2: Per al Firefox 66 a Linux, haureu d'establir la bandera media.av1.enabled en sentit true в about:config
Nota 3: He decidit no incloure GIF habituals a continuació a causa de la seva gran mida i de la quantitat de dades que necessitarien per carregar aquesta pàgina. (La qual cosa seria irònic, ja que aquesta pàgina tracta de reduir la quantitat de dades d'una pàgina :)). Però podeu veure els GIF finals aquí
Nota del traductor: Habr no us permet activar la reproducció automàtica i el bucle del fitxer, de manera que només podeu avaluar la qualitat. Podeu veure com seran les "imatges animades" en directe .
Escena 1 a 200 Kbps
Aquí hi ha molt moviment, que és especialment sensible a velocitats de bits baixes. Podeu veure immediatament com de dolent és H.264 amb aquesta taxa de bits; els quadrats són immediatament visibles. VP9 millora una mica la situació, però les caselles encara són visibles. AV1 guanya clarament, produint una imatge òbviament millor.
H.264
VP9
AV1
Escena 2 a 200 Kbps
Aquí hi ha molt contingut CGI translúcid. Els resultats no són tan diferents com l'última vegada, però en general l'AV1 té un millor aspecte.
H.264
VP9
AV1
Escena 3 a 100 Kbps
En aquesta escena, baixem la taxa de bits a 100 Kbps i els resultats són coherents. AV1 manté el seu lideratge fins i tot a taxes de bits baixes!
H.264
VP9
AV1
Višenka sobre pastissos
Per acabar aquest article sentint la quantitat d'amplada de banda estalviada en comparació amb GIF: la mida total de tots els vídeos és més gran... 1.62 MB!! Dret. Uns putos 1,708,032 bytes! Com a comparació, aquí teniu les mides de vídeo GIF i AV1 per a 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
Simplement impressionant! No és això?
Nota: Les mides dels fitxers de VP9 i H264 no es donen, ja que pràcticament no són diferents de AV1 a causa de l'ús de la mateixa taxa de bits. Seria redundant afegir dues columnes més amb les mateixes mides, només per destacar que aquests còdecs produeixen una qualitat molt millor que el GIF amb mides de fitxer molt més petites.
Font: www.habr.com