Je rok 2019 a je načase, aby sme sa rozhodli pre GIFy ( - tu hovoríme o výslovnosti v angličtine, pre nás to nie je relevantné - cca. preklad). GIFy zaberajú obrovské množstvo miesta (zvyčajne niekoľko megabajtov!), čo, ak ste webový vývojár, je úplne v rozpore s vašimi túžbami! Ako webový vývojár chcete minimalizovať veci, ktoré si používatelia musia stiahnuť, aby sa stránka načítala rýchlo. Z rovnakého dôvodu minimalizujete JavaScript, optimalizujete PNG, JPEG a niekedy konvertujete . Ale čo robiť so starým GIFom?
Kam ideme, nebudeme potrebovať GIF!
Ak je vaším cieľom zlepšiť rýchlosť načítania stránok, musíte sa zbaviť GIFov! Ale ako potom vytvoríte animované obrázky? Odpoveďou je video. A vo väčšine prípadov získate lepšiu kvalitu a úsporu miesta o 50-90%! V živote má väčšina vecí svoje pre a proti. Keď nahradíte GIF videom, väčšinou nebudete môcť nájsť žiadne nevýhody.
Preč so všetkými GIFmi!
Našťastie nahradenie GIFov videami je v posledných rokoch bežné, takže všetky potrebné nástroje sa už používajú. V tomto príspevku nebudem znovu objavovať koleso, ale iba mierne vylepším existujúce riešenia. Takže tu je podstata:
- Vezmite GIF a preveďte ho na video
- Kódujte video pomocou H.264 alebo VP9, t.j. komprimujte ho a zabaľte do kontajnera MP4 alebo WebM
- vymeniť
<img>so zapnutým animovaným GIF<video>s valčekom - Zapnite automatické prehrávanie bez zvuku a slučky pre efekt GIF
Je rok 2019
Teraz je rok 2019. Pokrok ide dopredu a my s ním musíme držať krok. Doteraz sme mali dve možnosti kodekov, ktoré sú široko podporované vo všetkých prehliadačoch a nástrojoch na kódovanie videa:
- H.264 - predstavený v roku 2003 a dnes najpoužívanejší
- VP9 - objavil sa v roku 2013 a dosiahol zlepšenie kompresie takmer o 50 % v porovnaní s H.264, hoci nie vždy je všetko také ružové
Poznámka: Aj keď je H.265 ďalšou verziou H.264 a je schopná konkurovať VP9, neuvažujem o tom kvôli zlej podpore prehliadača, ako je uvedené na stránke . Licenčné náklady sú hlavným dôvodom, prečo sa H.265 nerozšíril tak ako H.264 a prečo konzorcium Alliance of Open Media pracuje s kodekom AV1, ktorý je bezplatný.
Pamätajte, že naším cieľom je zmenšiť obrovské GIFy na najmenšiu možnú veľkosť, aby sme urýchlili načítavanie. Bol by zvláštny rok 2019, keby sme v našom arzenáli nemali nový štandard pre kompresiu videa. Ale existuje a volá sa AV1. S AV1 môžete . Lepota! 🙂
AV1 je k vašim službám od roku 2019!
Na stolných počítačoch
Nedávno bola do desktopových verzií pridaná podpora pre dekódovanie videa AV1 и . V súčasnosti je podpora Firefoxu chybná a môže spôsobiť zlyhania, ale veci by sa mali zlepšiť pridaním už vo Firefoxe 67 ( - približne. preklad.). Podrobnosti o novej verzii si prečítajte -
Na smartfónoch
V súčasnosti neexistuje hardvérová podpora pre smartfóny kvôli nedostatku vhodných dekodérov. Môžete vykonať softvérové dekódovanie, hoci to povedie k zvýšeniu spotreby batérie. Prvé mobilné SOC podporujúce hardvérové dekódovanie AV1 sa objavia v roku 2020.
A potom si čitatelia článku povedia: "takže ak to mobilné telefóny ešte nepodporujú správne, prečo používať AV1?"
AV1 je pomerne nový kodek a sme na úplnom začiatku jeho adaptácie. Predstavte si tento článok ako fázu „kým budete variť, dav vás bude nasledovať“. Podpora desktopov sama o sebe zrýchli stránky pre časť publika. A staré kodeky môžu byť použité ako záložný scenár, keď AV1 nie je podporované na cieľovom zariadení. Keď však používatelia prejdú na zariadenia s podporou AV1, všetko bude pripravené. Aby sme to dosiahli, musíme vytvoriť značku videa, ako je uvedené nižšie, ktorá prehliadaču umožní vybrať preferovaný formát − AV1 - >> VP9 - >> H.264. No, ak má používateľ veľmi staré zariadenie alebo navigátor, ktorý vôbec nepodporuje video (čo je pri H264 extrémne nepravdepodobné), potom sa mu zobrazí iba 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>Vytvorenie AV1
Vytváranie videí v AV1 je jednoduché. a použite nižšie uvedené príkazy. Na dosiahnutie cieľovej bitovej rýchlosti používame 2 prechody. Aby sme to urobili, dvakrát spustíme ffmpeg. Prvýkrát zapíšeme výsledok do neexistujúceho súboru. Tým sa vytvorí protokol, ktorý bude potrebný pre druhé spustenie 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.mp4Tu je rozpis parametrov:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Vytváranie GIFov
Na vytvorenie GIF som použil nižšie uvedený príkaz. Aby som zmenšil veľkosť, zmenil som veľkosť GIF na šírku 720 pixelov a 12 snímok za sekundu namiesto pôvodného videa s 24 snímkami za sekundu.
./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.gifVýsledky skúšky
Je lepšie raz vidieť ako stokrát čítať, však? Uistime sa, že AV1 je pre naše účely tou správnou voľbou. Vzal som si bezplatné video Tears Of Steel dostupné tu a skonvertovali ho pomocou približne rovnakej bitovej rýchlosti pre kodeky AV1, VP9, H.264. Výsledky sú uvedené nižšie, takže si ich môžete sami porovnať.
Poznámka 1: Ak sa vám súbor nižšie nenačíta, možno je čas aktualizovať prehliadač. Odporučil by som prehliadač založený na prehliadači Chromium, ako je Chrome, Vivaldi, Brave alebo Opera. Tu sú najnovšie informácie o podpore AV1
Poznámka 2: Pre Firefox 66 v systéme Linux budete musieť nastaviť príznak media.av1.enabled do významu true в about:config
Poznámka 3: Rozhodol som sa nezahrnúť nižšie bežné GIFy z dôvodu ich veľkej veľkosti a množstva dát, ktoré by si vyžadovalo načítanie tejto stránky! (Čo by bolo iróniou, keďže táto stránka je o znižovaní množstva dát na stránke :)). Konečné GIFy si však môžete pozrieť tu
Poznámka prekladateľa: Habr vám neumožňuje povoliť automatické prehrávanie a slučku súboru, takže môžete hodnotiť iba kvalitu. Ako budú vyzerať „animované obrázky“ si môžete pozrieť naživo .
Scéna 1 @ 200 Kbps
Je tu veľa pohybu, čo je obzvlášť citlivé pri nízkych bitrate. Okamžite vidíte, aké zlé je H.264 pri tejto bitovej rýchlosti, štvorčeky sú okamžite viditeľné. VP9 situáciu trochu zlepšuje, ale štvorčeky sú stále viditeľné. AV1 jednoznačne vyhráva a vytvára zjavne lepší obraz.
H.264
VP9
AV1
Scéna 2 @ 200 Kbps
Je tu veľa priesvitného CGI obsahu. Výsledky nie sú také odlišné ako naposledy, ale celkovo vyzerá AV1 lepšie.
H.264
VP9
AV1
Scéna 3 @ 100 Kbps
V tejto scéne znížime bitovú rýchlosť na 100 Kbps a výsledky sú konzistentné. AV1 si udržuje svoje vedúce postavenie aj pri nízkych bitrate!
H.264
VP9
AV1
Čerešnička na torte
Aby som tento článok ukončil pocitom ušetrenej šírky pásma v porovnaní s GIF – celková veľkosť všetkých videí je vyššia... 1.62 MB!! Správny. Nejakých 1,708,032 1 XNUMX bajtov! Pre porovnanie uvádzame veľkosti GIF a AVXNUMX videa pre každú scénu
Gif
AV1
scéna 1
11.7 MB
0.33 MB
scéna 2
7.27 MB
0.18 MB
scéna 3
5.62 MB
0.088 MB
Jednoducho ohromujúce! Nieje to?
Poznámka: Veľkosti súborov VP9 a H264 nie sú uvedené, pretože sa prakticky nelíšia od AV1 v dôsledku použitia rovnakej bitovej rýchlosti. Bolo by zbytočné pridať ďalšie dva stĺpce s rovnakými veľkosťami, len aby sa zdôraznilo, že tieto kodeky produkujú oveľa lepšiu kvalitu ako GIF pri oveľa menších veľkostiach súborov.
Zdroj: hab.com