Este 2019 și a venit timpul să ne hotărâm pentru GIF-uri ( - aici vorbim de pronunție în engleză, pentru noi acest lucru nu este relevant - aprox. traducere). GIF-urile ocupă o cantitate imensă de spațiu (de obicei câțiva megaocteți!), ceea ce, dacă ești un dezvoltator web, este complet contrar dorințelor tale! În calitate de dezvoltator web, doriți să minimizați lucrurile pe care utilizatorii trebuie să le descarce, astfel încât site-ul să se încarce rapid. Din același motiv, reduceți JavaScript, optimizați PNG, JPEG și, uneori, convertiți . Dar ce să faci cu vechiul GIF?
Nu vom avea nevoie de GIF-uri unde mergem!
Dacă scopul tău este să îmbunătățești viteza de încărcare a site-ului, atunci trebuie să scapi de GIF-urile! Dar atunci cum faci poze animate? Răspunsul este video. Și în majoritatea cazurilor, veți obține o calitate mai bună și economii de spațiu de 50-90%! În viață, majoritatea lucrurilor au avantajele și dezavantajele lor. Când înlocuiți GIF cu video, cel mai adesea nu veți putea găsi niciun dezavantaj.
Jos toate GIF-urile!
Din fericire, înlocuirea GIF-urilor cu videoclipuri a fost obișnuită în ultimii ani, așa că toate instrumentele necesare sunt deja utilizate. În această postare, nu voi reinventa roata, ci voi îmbunătăți doar puțin soluțiile existente. Deci, iată esenta:
- Luați un GIF și convertiți-l într-un videoclip
- Codificați videoclipul folosind H.264 sau VP9, de exemplu. comprimați-l și împachetați-l într-un container MP4 sau WebM
- A inlocui
<img>cu GIF animat activat<video>cu rola - Activați redarea automată fără sunet și buclă pentru un efect GIF
Este 2019
Este 2019 acum. Progresul merge înainte și trebuie să ținem pasul cu el. Până acum am avut două opțiuni de codec care sunt acceptate pe scară largă în toate browserele și instrumentele de codificare video:
- H.264 - introdus în 2003 și cel mai utilizat astăzi
- VP9 - a apărut în 2013 și a realizat îmbunătățiri ale compresiei de aproape 50% față de H.264, deși nu totul nu este întotdeauna atât de roz
Nota: Deși H.265 este următoarea versiune a H.264 și este capabil să concureze cu VP9, nu o consider din cauza suportului slab al browserului, așa cum se arată în pagină . Costurile de licențiere sunt principalul motiv pentru care H.265 nu a devenit la fel de răspândit ca H.264 și pentru care consorțiul Alliance of Open Media lucrează cu un codec fără drepturi de autor, AV1.
Amintiți-vă, scopul nostru este să micșorăm GIF-urile uriașe la cea mai mică dimensiune posibilă pentru a accelera timpul de încărcare. Ar fi un 2019 ciudat dacă nu am avea un nou standard pentru compresia video în arsenalul nostru. Dar există și se numește AV1. Cu AV1 poți . Lepota! 🙂
AV1 vă stă la dispoziție din 2019!
Pe desktop-uri
Recent, a fost adăugat suport pentru decodarea video AV1 la versiunile desktop и . Momentan, suportul pentru Firefox are probleme și poate provoca blocări, dar lucrurile ar trebui să se îmbunătățească odată cu adăugarea lui deja în Firefox 67 ( - aprox. traducere). Pentru detalii despre noua versiune citiți -
Pe smartphone-uri
În prezent, nu există suport hardware pentru smartphone-uri din cauza lipsei decodoarelor adecvate. Puteți face decodare software, deși acest lucru va duce la un consum crescut de baterie. Primele SOC-uri mobile care acceptă decodarea hardware AV1 vor apărea în 2020.
Și apoi cititorii articolului spun: „Deci, dacă telefoanele mobile nu îl acceptă încă corect, de ce să folosiți AV1?”
AV1 este un codec destul de nou și suntem la începutul adaptării sale. Gândiți-vă la acest articol ca la etapa „în timp ce gătiți, mulțimea va urma”. Suportul desktop în sine va accelera site-urile pentru o parte din public. Și codecurile vechi pot fi folosite ca scenariu alternativ atunci când AV1 nu este acceptat pe dispozitivul țintă. Dar pe măsură ce utilizatorii trec la dispozitive cu suport AV1, totul va fi gata. Pentru a realiza acest lucru, trebuie să creăm o etichetă video așa cum se arată mai jos, care va permite browserului să selecteze formatul preferat - AV1 - >> VP9 - >> H.264. Ei bine, dacă utilizatorul are un dispozitiv sau un navigator foarte vechi care nu acceptă video deloc (ceea ce este extrem de puțin probabil cu H264), apoi va vedea doar GIF-ul
<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>Crearea AV1
Crearea videoclipurilor în AV1 este ușoară. și folosiți comenzile de mai jos. Folosim 2 treceri pentru a atinge rata de biți țintă. Pentru a face acest lucru, vom rula ffmpeg de două ori. Prima dată scriem rezultatul într-un fișier inexistent. Acest lucru va crea un jurnal care va fi necesar pentru a doua rulare a 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.mp4Iată o defalcare a parametrilor:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Realizarea GIF-urilor
Pentru a crea GIF-ul am folosit comanda de mai jos. Pentru a reduce dimensiunea, am scalat GIF-ul la 720px lățime și 12 fps în loc de videoclipul 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.gifRezultatele testelor
E mai bine să vezi o dată decât să citești de o sută de ori, nu? Să ne asigurăm că AV1 este alegerea potrivită pentru scopurile noastre. Am luat videoclipul gratuit Tears Of Steel disponibil aici și l-a convertit folosind aproximativ aceeași rată de biți pentru codecurile AV1, VP9, H.264. Rezultatele sunt mai jos, astfel încât să le puteți compara singur.
Nota 1: Dacă fișierul de mai jos nu se încarcă pentru dvs., poate fi timpul să vă actualizați browserul. Aș recomanda un browser bazat pe Chromium, cum ar fi Chrome, Vivaldi, Brave sau Opera. Iată cele mai recente informații despre suportul AV1
Nota 2: Pentru Firefox 66 pe Linux va trebui să setați steag media.av1.enabled în sens true в about:config
Nota 3: Am decis să nu includ mai jos GIF-uri obișnuite din cauza dimensiunii lor mari și a cantității de date necesare pentru a încărca această pagină! (Ceea ce ar fi ironic, deoarece această pagină este despre reducerea cantității de date pe o pagină :)). Dar puteți vedea GIF-urile finale aici
Nota traducatorului: Habr nu vă permite să activați redarea automată și să bucleți fișierul, așa că puteți evalua doar calitatea. Puteți vedea cum vor arăta „imaginile animate” în direct .
Scena 1 la 200 Kbps
Există multă mișcare aici, care este deosebit de sensibilă la rate de biți scăzute. Puteți vedea imediat cât de rău este H.264 la această rată de biți; pătratele sunt imediat vizibile. VP9 îmbunătățește puțin situația, dar pătratele sunt încă vizibile. AV1 câștigă clar, producând o imagine evident mai bună.
H.264
VP9
AV1
Scena 2 la 200 Kbps
Există o mulțime de conținut CGI translucid aici. Rezultatele nu sunt la fel de diferite ca data trecută, dar în general AV1 arată mai bine.
H.264
VP9
AV1
Scena 3 la 100 Kbps
În această scenă, reducem rata de biți la 100 Kbps și rezultatele sunt consistente. AV1 își menține liderul chiar și la rate de biți scăzute!
H.264
VP9
AV1
Cireșe pe tort
Pentru a finaliza acest articol simțind cantitatea de lățime de bandă salvată în comparație cu GIF - dimensiunea totală a tuturor videoclipurilor este mai mare... 1.62 MB!! Dreapta. Câteva 1,708,032 de octeți! Pentru comparație, iată dimensiunile video GIF și AV1 pentru fiecare scenă
GIF
AV1
Scena 1
11.7 MB
0.33 MB
Scena 2
7.27 MB
0.18 MB
Scena 3
5.62 MB
0.088 MB
Pur și simplu uluitor! Nu-i așa?
Nota: Dimensiunile fișierelor VP9 și H264 nu sunt date, deoarece practic nu sunt diferite de AV1 datorită utilizării aceleiași rate de biți. Ar fi redundant să adăugați încă două coloane cu aceleași dimensiuni, doar pentru a evidenția faptul că aceste codecuri produc o calitate mult mai bună decât GIF la dimensiuni mult mai mici ale fișierelor.
Sursa: www.habr.com