Jelenleg 2019 van, és itt az ideje, hogy döntést hozzunk a GIF-ekről ( — itt a kiejtésről van szó angolul, ami számunkra nem releváns — megj. a ford.). A GIF-ek hatalmas mennyiségű helyet foglalnak el (általában több megabájt!), ami teljesen ellentmond a webfejlesztői kérdéseknek! Webfejlesztőként arra törekszik, hogy minimalizálja a letöltendő elemeket, hogy a weboldal gyorsan betöltődjön. Ugyanezért minimalizálja a JavaScriptet, optimalizálja a PNG-t, JPEG-t, és néha konvertálja . De mi a helyzet a régi GIF-ekkel?
Ahol tartunk, ott nincs szükség GIF-ekre!
Ha a célja a weboldal betöltési sebességének javítása, akkor a GIF-ek megszüntetése elkerülhetetlen! De akkor hogyan készítsünk animált képeket? A válasz — videó. A legtöbb esetben pedig jobb minőséget kap, és 50-90%-os helymegtakarítást! Az életben minden dolognak vannak előnyei és hátrányai. Ha a GIF-et videóra cseréli, ritkán találhat hátrányokat.
Tűnjenek el a GIF-ek!
Szerencsére az utóbbi években a GIF-ek videóra cserélése normává vált, így minden szükséges eszköz már rendelkezésre áll. Ebben a bejegyzésben nem fogok új kerekeket feltalálni, csak egy kis javítást végzek a meglévő megoldásokon. Íme a lényeg:
- Vegye a GIF-et és konvertálja át videóra
- Kódolja a videót H.264 vagy VP9 formátumban, tehát tömörítse és csomagolja MP4 vagy WebM konténerbe
- Cserélje
<img>az animált GIF-etvideóra - Kapcsolja be az automatikus lejátszást hang nélkül és ciklikus lejátszást, hogy elérje a GIF hatását
Jelenleg 2019 van
Jelenleg 2019 van. A fejlődés előrehalad, és nekünk is lépést kell tartanunk. Eddig két kódolási opció állt rendelkezésünkre, amelyeket széles körben támogatnak minden böngésző és video kódoló eszköz:
- H.264 — ami 2003-ban jelent meg, és ma a legszélesebb körben használt
- VP9 — ami 2013-ban jelent meg, és körülbelül 50%-os tömörítési javulást mutat H.264-hez képest, bár nem mindenhol és nem mindig rózsás a helyzet
Megjegyzés: bár a H.265 szabvány — a H.264 következő verziója, amely képes versenyezni a VP9-el, miatt gyenge böngésző támogatása miatt nem veszem figyelembe, amit az oldalon is látható. A licenciadó költségek a fő oka annak, hogy a H.265 nem terjedt el úgy, mint a H.264, és amiért az Alliance of Open Media konzorcium nyílt forráskódú codec-et fejleszt, amely nem jár díjfizetéssel — ez az AV1.
Ne feledje, hogy a célunk az óriási GIF-ek méretének a lehető legkisebbre csökkentése a betöltés felgyorsítása érdekében. 2019 igazán különös év lenne, ha nem lenne egy új szabványunk a videó tömörítésére. De van, és ezt AV1-nek hívják. Az AV1 segítségével Csodás! 🙂
Az AV1 2019 óta a rendelkezésére áll!
Asztali számítógépeken
Nemrégiben az AV1 videó dekódolásának támogatását hozzáadták az asztali verziókhoz. és . Jelenleg a Firefoxban a támogatás hibás, és összeomlásokat okozhat, de a helyzet javulni fog a már a Firefox 67-ben. ( — a fordító megjegyzése)A részletekért olvassa el —
Okostelefonokon
Okostelefonokon a hardveres támogatás jelenleg hiányzik a megfelelő dekóderek hiánya miatt. Programozott dekódolás is lehetséges, de ez növelni fogja az akkumulátor használatát. Az első mobil SOC-k, amelyek hardveres AV1 dekódolással rendelkeznek, 2020-ban jelennek meg.
És itt az olvasók úgy érzik: „Ha a mobilok jelenleg nem támogatják rendesen, akkor miért használjuk az AV1-et?”
Az AV1 egy viszonylag új codec, és még az alkalmazásának kezdeténél tartunk. Gondoljon erre a cikkre úgy, mint egy olyan szakaszra, ahol „míg készül a kaja, a nép gyülekezik”. Az asztali támogatás önmagában is felgyorsítja az oldalakat a közönség egy részénél. A régi kodekeket használhatjuk alsó verzióban, amikor az adott eszköz nem támogatja az AV1-et. De ahogy a felhasználók áttérnek az AV1 támogatású eszközökre, minden készen áll majd. Ennek érdekében létre kell hoznunk egy videó tageket, ahogy alább látható, amely lehetővé teszi a böngésző számára, hogy válassza ki a preferált formát — AV1 ->> VP9 ->> H.264. Ha pedig a felhasználónak teljesen régi eszköze vagy böngészője van, amely egyáltalán nem támogatja a videót (ami a H264-cel alig valószínű), akkor egyszerűen GIF-et lát.
<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>AV1 létrehozása
AV1 videó készítése nem nehéz. és használja az alábbi parancsokat. Két átmenetet használunk a célnyomás eléréséhez. Ehhez az ffmpeg-et kétszer fogjuk futtatni. Először egy nem létező fájlba rögzítjük az eredményt. Ez létrehoz egy naplót, amelyre szükség lesz a második ffmpeg futtatásához.
# 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.mp4Itt van a paraméterek dekódolása:
-i - Bemeneti fájl.
-pix_fmt - Az 4:2:0 színformátumot használjuk a videó színinformációinak kiválasztásához. Sok más formátum is létezik, de a 4:2:0 a legkompatibilisebb.
-c:v - Melyik kodeket használjunk, a mi esetünkben - AV1.<br />
-b:v – Az átlagos bitrát, amelyet el szeretnénk érni.
-filter:v scale - Az ffmpeg skálázási szűrője a videó felbontásának csökkentésére szolgál. Beállítjuk X:-1, ami azt mondja az ffmpeg-nek, hogy csökkentse a szélességet X-re, megőrizve az oldalarányt.
-strict experimental - Meg kell adni, mivel az AV1 egy viszonylag új kodek.
-cpu-used - Borzasztóan elnevezett paraméter, amely valójában a videó minőségi szintjének kiválasztására szolgál. Lehetséges értékek 0-4. Minél kisebb az érték, annál jobb a minőség, és így annál hosszabb ideig tart a kódolás.
-tile-columns - Több szál használatához. Az AV1-nek azt mondja, hogy ossza fel a videót külön oszlopokra, amelyeket függetlenül lehet kódolni a CPU jobb kihasználása érdekében.
-row-mt – Ugyanaz, mint az előző paraméter, de a sorokat is felosztja az oszlopokon belül.
-threads - A szálak száma.
-pass - A jelenleg végrehajtott áthaladás.
-f - Csak az első áthaladás során használják. Megadja a kimeneti fájl formátumát, azaz MP4 a mi esetünkben.
-movflags faststart - A gyors videóindítást engedélyezzük, a fájl elejére helyezve néhány adatot. Ez lehetővé teszi a lejátszást a fájl teljes betöltése előtt.
GIF létrehozása
A GIF létrehozásához az alábbi parancsot használtam. A méret csökkentése érdekében a GIF-et 720 px szélességben és 12 fps sebességgel méreteztem, a 24 fps helyett az eredeti videónál.
./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.gifA teszteredmények
Jobb egyszer látni, mint százszor olvasni, igaz? Győződjünk meg róla, hogy az AV1 a megfelelő választás a céljainkhoz. Az ingyenes Tears Of Steel videót használtam, amely itt érhető el , és konvertáltam, körülbelül azonos bitrátával az AV1, VP9, H.264 kodekekhez. Az eredmények lent láthatók, így önállóan összehasonlíthatja őket.
Megjegyzés 1: Ha az alábbi fájl nem töltődik be, lehet, hogy ideje lenne frissíteni a böngészőt. Én a Chromium alapú böngészőt, például a Chrome-ot, Vivaldit, Brave-t vagy Operát javasolnám. Itt van a legfrissebb információ az AV1 támogatásáról.
Megjegyzés 2: A Firefox 66 Linux verzióban aktiválnia kell a media.av1.enabled az értékre igaz be. about:config
Megjegyzés 3: Úgy döntöttem, hogy nem tartalmazom az alábbi hagyományos GIF-eket a nagy méretük és az oldal betöltéséhez szükséges adatforgalom miatt! (Ami ironikus lenne, hiszen ez az oldal az adatforgalom csökkentéséről szól :)). De a végső GIF-eket itt megnézheti
Fordító megjegyzése: A Habr nem teszi lehetővé az automatikus lejátszást és a fájl ciklikus lejátszását, így a minőséget csak értékelni tudja. Az "animált képek" élő bemutatását a következő címen láthatja: .
Jelenet 1 @ 200 Kbps
Itt sok a mozgás, amit különösen érzékenyen érzékelnek alacsony bitráták esetén. Azonnal látszik, mennyire rossz az H.264 ezen a bitrátán – azonnal látszanak a kockák. A VP9 kicsit javít a helyzeten, de a kockák még mindig láthatók. Az AV1 egyértelműen jobb, nyilvánvalóan jobb képet ad.
H.264
VP9
AV1
Jelenet 2 @ 200 Kbps
Itt sok áttetsző CGI tartalom van. Az eredmények már nem annyira eltérőek, mint az előző alkalommal, de összességében az AV1 jobban néz ki.
H.264
VP9
AV1
Jelenet 3 @ 100 Kbps
Ebben a jelenetben a bitrátát 100 Kbps-ra állítjuk, és az eredmények ezt tükrözik. Az AV1 továbbra is vezet, még alacsony bitráták esetén is!
H.264
VP9
AV1
Az üveg cseresznye
Az írás befejezéséhez érzékelni a GIF-hez képest megtakarított adatforgalmat – a fenti videók összes mérete... 1.62 MB!! Helyes. Kb. 1,708,032 bájt! Összehasonlításképpen, itt van a GIF és AV1 videó mérete minden egyes jelenethez
GIF
AV1
Jelenet 1
11.7 MB
0.33 MB
Jelenet 2
7.27 MB
0.18 MB
Jelenet 3
5.62 MB
0.088 MB
Egyszerűen lenyűgöző! Ugye?
Megjegyzés: A VP9 és H264 fájlméretek nincsenek feltüntetve, mivel gyakorlatilag nem különböznek az AV1-től a hasonló bitráta miatt. Túlzó lenne még két oszlopot hozzáadni az azonos méretekhez, hogy hangsúlyozzuk, hogy ezek a kodekek sokkal jobb minőséget adnak, mint a GIF, sokkal kisebb fájlméretek mellett.
Forrás: habr.com
