Je rok 2019 a je na čase, abychom se rozhodli pro GIFy ( - zde mluvíme o výslovnosti v angličtině, pro nás to není relevantní - cca. překlad). GIFy zabírají obrovské množství místa (obvykle několik megabajtů!), což, pokud jste webový vývojář, je zcela v rozporu s vašimi přáními! Jako webový vývojář chcete minimalizovat věci, které uživatelé potřebují stáhnout, aby se web rychle načítal. Ze stejného důvodu minimalizujete JavaScript, optimalizujete PNG, JPEG a někdy převádíte . Ale co dělat se starým GIFem?
Kam jdeme, nebudeme potřebovat GIFy!
Pokud je vaším cílem zlepšit rychlost načítání stránek, musíte se zbavit GIFů! Ale jak potom udělat animované obrázky? Odpověď je video. A ve většině případů získáte lepší kvalitu a úsporu místa o 50-90%! V životě má většina věcí svá pro a proti. Když GIF nahradíte videem, většinou nebudete moci najít žádné nevýhody.
Pryč se všemi GIFy!
Naštěstí nahrazování GIFů videi je v posledních letech běžnou záležitostí, takže všechny potřebné nástroje se již používají. V tomto příspěvku nebudu znovu vynalézat kolo, ale pouze mírně vylepším stávající řešení. Takže tady je podstata:
- Vezměte GIF a převeďte jej na video
- Kódujte video pomocí H.264 nebo VP9, tj. komprimujte jej a zabalte do kontejneru MP4 nebo WebM
- Nahradit
<img>se zapnutým animovaným GIFem<video>s válečkem - Zapněte automatické přehrávání bez zvuku a smyčky pro efekt GIF
Je rok 2019
Teď je rok 2019. Pokrok jde dopředu a my s ním musíme držet krok. Dosud jsme měli dvě možnosti kodeků, které jsou široce podporovány ve všech prohlížečích a nástrojích pro kódování videa:
- H.264 - představena v roce 2003 a dnes nejrozšířenější
- VP9 - objevil se v roce 2013 a dosáhl zlepšení komprese téměř o 50 % ve srovnání s H.264, ačkoli ne vždy je všechno tak růžové
Poznámka: Přestože je H.265 další verzí H.264 a je schopna konkurovat VP9, neuvažuji o tom kvůli špatné podpoře prohlížeče, jak je uvedeno na stránce . Licenční náklady jsou hlavním důvodem, proč se H.265 nerozšířil tak jako H.264 a proč konsorcium Alliance of Open Media pracuje s kodekem AV1, který je zdarma.
Pamatujte, že naším cílem je zmenšit obrovské GIFy na nejmenší možnou velikost, abychom zrychlili načítání. Byl by divný rok 2019, kdybychom v našem arzenálu neměli nový standard pro kompresi videa. Ale existuje a jmenuje se AV1. S AV1 můžete . Lepota! 🙂
AV1 je k vašim službám od roku 2019!
Na stolních počítačích
Nedávno byla do verzí pro stolní počítače přidána podpora pro dekódování videa AV1 и . V současné době je podpora Firefoxu chybná a může způsobit pády, ale s přidáním by se věci měly zlepšit již ve Firefoxu 67 ( - Cca. překlad.). Podrobnosti o nové verzi si přečtěte -
Na chytrých telefonech
V současné době neexistuje hardwarová podpora pro smartphony kvůli nedostatku vhodných dekodérů. Můžete provést softwarové dekódování, i když to povede ke zvýšené spotřebě baterie. První mobilní SOC podporující hardwarové dekódování AV1 se objeví v roce 2020.
A pak si čtenáři článku řeknou: "takže pokud to mobilní telefony ještě nepodporují správně, proč používat AV1?"
AV1 je poměrně nový kodek a jsme na samém začátku jeho adaptace. Představte si tento článek jako fázi „zatímco budete vařit, dav vás bude následovat“. Podpora desktopů sama o sobě urychlí weby pro část publika. A staré kodeky lze použít jako záložní scénář, když AV1 není na cílovém zařízení podporováno. Jakmile ale uživatelé přejdou na zařízení s podporou AV1, bude vše připraveno. Abychom toho dosáhli, musíme vytvořit značku videa, jak je uvedeno níže, která umožní prohlížeči vybrat preferovaný formát − AV1 - >> VP9 - >> H.264. No, pokud má uživatel velmi staré zařízení nebo navigátor, který video vůbec nepodporuje (což je u H264 extrémně nepravděpodobné), pak teprve 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>Vytvoření AV1
Vytváření videí v AV1 je snadné. a použijte níže uvedené příkazy. K dosažení cílového datového toku používáme 2 průchody. K tomu dvakrát spustíme ffmpeg. Poprvé zapíšeme výsledek do neexistujícího souboru. Tím se vytvoří protokol, který bude potřeba 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 rozpis parametrů:
-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áření GIFů
K vytvoření GIF jsem použil níže uvedený příkaz. Abych zmenšil velikost, změnil jsem velikost GIF na šířku 720 pixelů a 12 snímků za sekundu místo původního videa s 24 snímky 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 zkoušek
Je lepší jednou vidět, než stokrát číst, že? Ujistěte se, že AV1 je pro naše účely tou správnou volbou. Vzal jsem si bezplatné video Tears Of Steel dostupné zde a převedl jej pomocí přibližně stejného datového toku pro kodeky AV1, VP9, H.264. Výsledky jsou níže, takže si je můžete sami porovnat.
Poznámka 1: Pokud se vám níže uvedený soubor nenačte, možná je čas aktualizovat prohlížeč. Doporučil bych prohlížeč založený na Chromiu, jako je Chrome, Vivaldi, Brave nebo Opera. Zde jsou nejnovější informace o podpoře AV1
Poznámka 2: Pro Firefox 66 na Linuxu budete muset nastavit příznak media.av1.enabled do smyslu true в about:config
Poznámka 3: Rozhodl jsem se nezahrnout níže běžné GIFy kvůli jejich velké velikosti a množství dat, které by vyžadovalo načtení této stránky! (Což by byla ironie, protože tato stránka je o snížení množství dat na stránce :)). Finální GIFy si ale můžete prohlédnout zde
Poznámka překladatele: Habr neumožňuje povolit automatické přehrávání a smyčkování souboru, takže můžete hodnotit pouze kvalitu. Naživo se můžete podívat, jak budou „animované obrázky“ vypadat .
Scéna 1 @ 200 Kbps
Dochází zde k velkému pohybu, který je citlivý zejména při nízkých bitratech. Okamžitě vidíte, jak špatné je H.264 při tomto bitrate, čtverečky jsou okamžitě viditelné. VP9 situaci trochu zlepšuje, ale čtverečky jsou stále vidět. AV1 jasně vyhrává a vytváří zjevně lepší obraz.
H.264
VP9
AV1
Scéna 2 @ 200 Kbps
Je zde spousta průsvitného CGI obsahu. Výsledky nejsou tak odlišné jako minule, ale celkově vypadá AV1 lépe.
H.264
VP9
AV1
Scéna 3 @ 100 Kbps
V této scéně snížíme datový tok na 100 Kbps a výsledky jsou konzistentní. AV1 si udržuje své vedení i při nízkých bitratech!
H.264
VP9
AV1
Třešnička na dortu
Abychom zakončili tento článek pocitem ušetřené šířky pásma v porovnání s GIF – celková velikost všech videí je vyšší... 1.62 MB!! Že jo. Nějakých zasraných 1,708,032 1 XNUMX bajtů! Pro srovnání uvádíme velikosti GIF a AVXNUMX videa pro jednotlivé scény
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
Jednoduše úžasné! Není to ono?
Poznámka: Velikosti souborů VP9 a H264 nejsou uvedeny, protože se prakticky neliší od AV1 díky použití stejného datového toku. Bylo by zbytečné přidat další dva sloupce se stejnou velikostí, jen aby se zdůraznilo, že tyto kodeky produkují mnohem lepší kvalitu než GIF při mnohem menších velikostech souborů.
Zdroj: www.habr.com