Teď je rok 2019 a je na čase se rozhodnout ohledně GIFů ( — tady jde o výslovnost v angličtině, pro nás to není aktuální — pozn. překl.). GIFy zabírají obrovské množství místa (obvykle několik megabajtů!), což, pokud jste webový vývojář, zcela odporuje vašim přáním! Jako webový vývojář chcete minimalizovat věci, které si uživatelé musí stáhnout, aby se webové stránky načítaly rychle. Ze stejného důvodu minimalizujete JavaScript, optimalizujete PNG, JPEG a někdy převádíte . Co ale s tím starým GIFem?
Kam směřujeme, GIFy nebudeme potřebovat!
Pokud je vaším cílem zlepšit rychlost načítání webových stránek, měli byste se GIFů zbavit! Ale jak tedy dělat animované obrázky? Odpověď zní — video. A ve většině případů získáte lepší kvalitu a ušetříte místo až o 50-90%! Ve skutečnosti mají většina věcí své klady a zápory. Když nahradíte GIF videem, zápory obvykle nenajdete.
S bohem GIFů!
Naštěstí se náhrada GIFů videem stala v posledních letech běžnou praxí, takže všechny potřebné nástroje jsou již k dispozici. V tomto příspěvku nevynalezneme kolo, ale jen mírně vylepšíme existující řešení. Takže tady je to podstatné:
- Vezměte GIF a převeďte ho na video
- Kódujte video pomocí H.264 nebo VP9, tedy ho komprimujte a zabalte do kontejneru MP4 nebo WebM
- Nahraďte
<img>animovaný GIFvideem - Povolte automatické přehrávání bez zvuku a opakujte, abyste dosáhli efektu GIFu
Teď je rok 2019
Teď je rok 2019. Pokrok jde kupředu a my mu musíme následovat. Doposud jsme měli dvě varianty kodeků, které jsou široce podporovány ve všech prohlížečích a nástrojích pro kódování videa:
- H.264 — který se objevil v roce 2003 a je dnes nejvíce používaný
- VP9 — který se objevil v roce 2013 a dosáhl téměř 50% zlepšení komprese oproti H.264, ačkoliv ne vše je tak růžové
Poznámka: ačkoliv standard H.265 — následující verze H.264, může konkurovat VP9, nezvažuji ho kvůli slabé podpoře prohlížeči, což je uvedeno na stránce Náklady na licencování jsou hlavním důvodem, proč se H.265 neprosadil tak široce jako H.264 a proč konsorcium Alliance of Open Media pracuje s kodekem bez poplatků – s AV1.
Pamatujte, že naším cílem je zmenšit obrovské GIFy na co nejmenší velikost, aby se urychlilo načítání. Rok 2019 by byl zvláštní, kdybychom neměli nový standard pro kompresi videa. Ten máme a jmenuje se AV1. S AV1 můžeme . Krása! 🙂
AV1 je vám k dispozici od roku 2019!
Na desktopu
Podpora dekódování videa AV1 byla nedávno přidána do desktopových verzí a . Aktuálně má podpora ve Firefoxu problémy a může způsobit pády, ale situace by se měla zlepšit s přidáním již ve Firefoxu 67 ( — pozn. překl.). Pro podrobnosti o nové verzi si přečtěte –
Na smartphonech
Na smartphonech v současnosti chybí hardwarová podpora kvůli nedostatku odpovídajících dekodérů. Je možné provést softwarové dekódování, ale to zvýší spotřebu baterie. První mobilní SOC s podporou hardwarového dekódování AV1 se objeví v roce 2020.
A čtenáři článku si říkají: „tak pokud mobily zatím normálně nepodporují, proč tedy používat AV1?“
AV1 je poměrně nový kodek a jsme na začátku jeho adaptace. Vnímejte tento článek jako fázi „zatímco připravujete, lidé se připojují“. Podpora na desktopu sama o sobě již urychlí weby pro část publika. Staré kodeky lze použít jako fallback scénář, když na cílovém zařízení AV1 není podporováno. Jak se však uživatelé přechází na zařízení s podporou AV1, všechno už bude připraveno. Abychom toho dosáhli, musíme vytvořit video tag, jak je uvedeno níže, což umožní prohlížeči vybrat preferovaný formát – AV1 ->> VP9 ->> H.264. A pokud má uživatel opravdu staré zařízení nebo prohlížeč, který video vůbec nepodporuje (což je téměř nepravděpodobné s H.264), tak jednoduše uvidí 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>Vytváření AV1
Vytvořit video v AV1 není těžké. a použijte níže uvedené příkazy. Používáme 2 průchody k dosažení cílové bitrate. Nejprve spustíme ffmpeg a výstup zapíšeme do neexistujícího souboru. To vytvoří protokol, který budeme potřebovat pro druhé spuštění 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.mp4Zde je rozbor parametrů:
-i - Vstupní soubor.
-pix_fmt - Použijeme formát 4:2:0 pro výběr informací o barevnosti ve videu. Existuje mnoho dalších možných formátů, ale 4:2:0 je nejvíce kompatibilní.
-c:v - Jaký kodek použít, v našem případě - AV1.<br />
-b:v – Průměrný bitrate, kterého chceme dosáhnout.
-filter:v scale - Filtr měřítka ffmpeg se používá ke snížení rozlišení videa. Nastavujeme X:-1, což říká ffmpeg, aby snížil šířku na X při zachování poměru stran.
-strict experimental - Musí být uvedeno, protože AV1 je poměrně nový kodek.
-cpu-used - Hrozně pojmenovaný parametr, který se ve skutečnosti používá pro výběr úrovně kvality videa. Možné hodnoty 0-4. Čím je nižší hodnota, tím je kvalita lepší a odpovídajícím způsobem delší doba, kterou bude zabírat kódování.
-tile-columns - Pro použití více vláken. Říká AV1, aby rozbil video na jednotlivé sloupce, které mohou být překódovány nezávisle pro lepší využití CPU.
-row-mt – Totéž jako předchozí parametr, ale rozbíjí také na řádky uvnitř sloupců.
-threads - Počet vláken.
-pass - Jaký průchod se nyní provádí.
-f - Používá se pouze při prvním průchodu. Určuje formát výstupního souboru, tj. MP4 v našem případě.
-movflags faststart - Zapneme rychlý start videa, přemístěním části dat na začátek souboru. To umožní začít přehrávání ještě před úplným načtením souboru.
Vytváření GIFu
K vytvoření GIFu jsem použil následující příkaz. Pro snížení velikosti jsem zmenšil GIF na šířku 720px a snímkovou frekvenci 12 fps místo původních 24 fps videa.
./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 testů
Lepší je jednou vidět, než stokrát číst, že? Ujistíme se, že AV1 je pro naše cíle správnou volbou. Vzal jsem zdarma video Tears Of Steel, dostupné zde , a převedl ho, používající přibližně stejnou bitrate pro kodeky AV1, VP9, H.264. Výsledky jsou níže, abyste si je mohli porovnat sami.
Poznámka 1: Pokud se níže uvedený soubor nenačte, možná byste měli aktualizovat svůj prohlížeč. Doporučuji prohlížeč založený na Chromu, jako je Chrome, Vivaldi, Brave nebo Opera. Zde jsou poslední informace o podpoře AV1
Poznámka 2: Pro Firefox 66 na Linuxu bude potřeba nastavit flag media.av1.enabled na hodnotu true v about:config
Poznámka 3: Rozhodl jsem se nezahrnout běžné GIFy níže kvůli jejich velké velikosti a objemu dat, který by mohl být potřebný k načtení této stránky! (Což by bylo ironické, jelikož se tato stránka zaměřuje na zmenšení objemu dat na stránce :)). Ale můžete si prohlédnout konečné GIFy zde
Poznámka překladatele: Habr neumožňuje povolit automatické přehrávání a smyčku souboru, takže bude možné posoudit pouze kvalitu. Jak budou vypadat „animované obrázky“ naživo, můžete vidět v .
Scéna 1 @ 200 Kbps
Tady je hodně pohybu, což je obzvlášť citlivé na nízké bitrate. Okamžitě je vidět, jak špatný je H.264 na této bitrate, okamžitě viditelné čtverce. VP9 situaci o něco vylepšuje, ale čtverce jsou stále viditelné. AV1 zřetelně vítězí, poskytující očividně lepší obraz.
H.264
VP9
AV1
Scéna 2 @ 200 Kbps
Tady je hodně poloprůhledného CGI obsahu. Výsledky se už tolik neliší jako minule, ale celkově AV1 vypadá lépe.
H.264
VP9
AV1
Scéna 3 @ 100 Kbps
V této scéně snižujeme bitrate na 100 Kbps a výsledky tomu odpovídají. AV1 si udržuje vedení i na nízkých bitratech!
H.264
VP9
AV1
Třešnička na dortu
Abychom zakončili článek s pocitem množství ušetřeného provozu ve srovnání s GIFy — celková velikost všech výše uvedených videí… 1.62 MB!! Správně. Nějakých zatracených 1,708,032 bajtů! Pro srovnání, zde je velikost videí GIF a AV1 pro každou 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
To je prostě úžasné! Není pravda?
Poznámka: Velikosti souborů VP9 a H264 nejsou uvedeny, protože se prakticky neliší od AV1 díky použití stejného bitratu. Bylo by zbytečné přidávat další dva sloupce se stejnými velikostmi jen proto, abychom zdůraznili, že tyto kodeky poskytují mnohem lepší kvalitu než GIF při výrazně menších velikostech souborů.
Zdroj: habr.com
