2019 van, és itt az ideje, hogy a GIF-ek mellett döntsünk ( - itt az angol kiejtésről van szó, nekünk ez nem releváns - kb. fordítás). A GIF-ek hatalmas helyet foglalnak el (általában több megabájtot!), ami ha webfejlesztő vagy, teljesen ellentétes a vágyaiddal! Webfejlesztőként minimalizálni szeretné a felhasználóknak letöltendő tartalmakat, hogy a webhely gyorsan betöltődjön. Ugyanezen okból csökkenti a JavaScriptet, optimalizálja a PNG-t, a JPEG-et, és néha konvertálja . De mi a teendő a régi GIF-fel?
Nem lesz szükségünk GIF-ekre, ahová megyünk!
Ha a cél a webhely betöltési sebességének javítása, akkor meg kell szabadulnia a GIF-ektől! De hogyan készíthetsz animált képeket? A válasz videó. És a legtöbb esetben jobb minőséget és 50-90%-os helymegtakarítást érhet el! Az életben a legtöbb dolognak megvannak az előnyei és hátrányai. Ha a GIF-et videóra cseréli, leggyakrabban nem talál semmilyen hátrányt.
Le minden GIF-pel!
Szerencsére az elmúlt években mindennapossá vált a GIF-ek videókkal való helyettesítése, így már minden szükséges eszköz használatban van. Ebben a bejegyzésben nem fogom újra feltalálni a kereket, hanem csak kicsit javítom a meglévő megoldásokat. Tehát itt a lényeg:
- Vegyünk egy GIF-et, és alakítsuk át videóvá
- Kódolja a videót H.264 vagy VP9 használatával, pl. tömörítse és csomagolja MP4 vagy WebM tárolóba
- Cserélje ki
<img>animált GIF funkcióval<video>hengerrel - Kapcsolja be az automatikus lejátszást hang nélkül, és ismételje meg a GIF-effektust
2019 van
Most 2019 van. A haladás halad előre, és lépést kell tartanunk vele. Eddig két kodekbeállításunk volt, amelyek széles körben támogatottak minden böngészőben és videókódoló eszközben:
- H.264 - 2003-ban vezették be, és ma a legszélesebb körben használják
- VP9 - 2013-ban jelent meg, és csaknem 50%-os tömörítési javulást ért el a H.264-hez képest, bár nem mindig minden olyan rózsás
Megjegyzés: Bár a H.265 a H.264 következő verziója, és képes felvenni a versenyt a VP9-cel, nem tartom ezt a gyenge böngésző támogatás miatt, ahogy az az oldalon látható . A licencköltségek a fő oka annak, hogy a H.265 nem terjedt el olyan széles körben, mint a H.264, és hogy az Alliance of Open Media konzorcium egy jogdíjmentes kodekkel, az AV1-el dolgozik.
Ne feledje, a célunk az, hogy a hatalmas GIF-eket a lehető legkisebb méretre zsugorítsuk a betöltési idő felgyorsítása érdekében. Furcsa lenne 2019, ha nem lenne új szabvány a videotömörítésre az arzenálunkban. De létezik és AV1-nek hívják. AV1-el megteheted . Lepota! 🙂
Az AV1 2019 óta az Ön szolgálatában!
Asztali számítógépeken
A közelmúltban az AV1 videó dekódolás támogatását hozzáadták az asztali verziókhoz и . Jelenleg a Firefox támogatása hibás, és összeomlásokat okozhat, de a dolgoknak javulniuk kell a hozzáadással már Firefox 67-ben ( - kb. fordítás.). Az új verzióval kapcsolatos részletekért olvassa el -
Okostelefonokon
Jelenleg nincs hardveres támogatás az okostelefonokhoz a megfelelő dekóderek hiánya miatt. Elvégezheti a szoftveres dekódolást, bár ez megnövekedett akkumulátorfogyasztáshoz vezet. Az első AV1 hardveres dekódolást támogató mobil SOC-k 2020-ban jelennek meg.
És akkor a cikk olvasói azt mondják, hogy „ha a mobiltelefonok még nem támogatják megfelelően, akkor minek használjuk az AV1-et?”
Az AV1 egy meglehetősen új kodek, és még az adaptáció elején járunk. Tekintse ezt a cikket úgy, mint a „míg főz, a tömeg követi” szakasz. Az asztali számítógépek támogatása önmagában felgyorsítja a webhelyeket a közönség egy része számára. A régi kodekek pedig tartalék forgatókönyvként használhatók, ha az AV1 nem támogatott a céleszközön. De ahogy a felhasználók AV1-támogatással rendelkező eszközökre váltanak, minden készen lesz. Ennek eléréséhez létre kell hoznunk egy videocímkét az alábbiak szerint, amely lehetővé teszi a böngésző számára, hogy kiválassza a kívánt formátumot − AV1 - >> VP9 - >> H.264. Nos, ha a felhasználónak nagyon régi eszköze vagy navigátora van, amely egyáltalán nem támogatja a videót (ami H264 esetén rendkívül valószínűtlen), akkor csak a GIF-et fogja látni
<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
Videók létrehozása AV1-ben egyszerű. és használja az alábbi parancsokat. A cél bitráta eléréséhez 2 lépést használunk. Ehhez kétszer futtatjuk az ffmpeg-et. Az első alkalommal az eredményt egy nem létező fájlba írjuk. Ez létrehoz egy naplót, amelyre az ffmpeg második futtatásához lesz szükség.
# 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.mp4Íme a paraméterek lebontása:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
GIF készítés
A GIF létrehozásához az alábbi parancsot használtam. A méret csökkentése érdekében a GIF-et 720 képpont szélesre és 12 fps-re méreteztem az eredeti 24 fps-es videó helyett.
./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.gifTeszteredmények
Jobb egyszer látni, mint százszor elolvasni, igaz? Győződjön meg arról, hogy az AV1 a megfelelő választás céljainknak. Elkészítettem az itt elérhető ingyenes Tears Of Steel videót , és megközelítőleg azonos bitrátával konvertálta az AV1, VP9, H.264 kodekekhez. Az eredményeket alább találja, így Ön is összehasonlíthatja őket.
1. megjegyzés: Ha az alábbi fájl nem töltődik be, ideje frissíteni a böngészőt. Chromium alapú böngészőt javaslok, például Chrome, Vivaldi, Brave vagy Opera. Itt található a legfrissebb információ az AV1 támogatásáról
2. megjegyzés: A Linux 66-os Firefox esetén be kell állítania a zászlót media.av1.enabled jelentésbe true в about:config
3. megjegyzés: Úgy döntöttem, hogy nem teszek alá normál GIF-eket nagy méretük és az oldal betöltéséhez szükséges adatmennyiség miatt! (Ami ironikus lenne, hiszen ez az oldal az oldal adatmennyiségének csökkentéséről szól :)). De itt láthatod a végleges GIF-eket
A fordító megjegyzése: A Habr nem engedélyezi az automatikus lejátszást és a fájl hurkolását, így csak a minőséget tudja értékelni. Élőben láthatja, hogyan fognak kinézni az „animált képek”. .
1. jelenet @ 200 Kbps
Itt nagy a mozgás, ami különösen érzékeny alacsony bitrátánál. Azonnal láthatja, milyen rossz a H.264 ezen a bitsebességgel, a négyzetek azonnal láthatóak. A VP9 kicsit javít a helyzeten, de a négyzetek még mindig látszanak. Az AV1 egyértelműen nyer, nyilvánvalóan jobb képet produkálva.
H.264
VP9
AV1
2. jelenet @ 200 Kbps
Sok áttetsző CGI tartalom található itt. Az eredmények nem különböznek annyira, mint legutóbb, de összességében az AV1 jobban néz ki.
H.264
VP9
AV1
3. jelenet @ 100 Kbps
Ebben a jelenetben a bitsebességet 100 Kbps-ra csökkentjük, és az eredmények konzisztensek. Az AV1 alacsony bitráta mellett is megőrzi vezető szerepét!
H.264
VP9
AV1
Cseresznye a tortán
A cikk befejezéséhez a GIF-hez képest megtakarított sávszélesség érzékelésével – az összes videó teljes mérete nagyobb... 1.62 MB!! Jobb. Valami kibaszott 1,708,032 1 XNUMX bájt! Összehasonlításképpen itt található az egyes jelenetek GIF és AVXNUMX videómérete
GIF
AV1
1. jelenet
11.7 MB
0.33 MB
2. jelenet
7.27 MB
0.18 MB
3. jelenet
5.62 MB
0.088 MB
Egyszerűen lenyűgöző! Nem?
Megjegyzés: A VP9 és a H264 fájlmérete nincs megadva, mivel gyakorlatilag nem különböznek az AV1-től az azonos bitráta használatának köszönhetően. Fölösleges lenne további két azonos méretű oszlopot hozzáadni, csak hogy kiemeljük, hogy ezek a kodekek sokkal jobb minőséget produkálnak, mint a GIF sokkal kisebb fájlméret mellett.
Forrás: will.com