On vuosi 2019 ja on aika päättää GIF-tiedostoista ( - tässä puhutaan englanninkielisestä ääntämisestä, meille tämä ei ole relevantti - noin. käännös). GIF-tiedostot vievät valtavan määrän tilaa (yleensä useita megatavuja!), mikä, jos olet verkkokehittäjä, on täysin toiveidesi vastaista! Verkkokehittäjänä haluat minimoida käyttäjien ladattavat asiat, jotta sivusto latautuu nopeasti. Samasta syystä pienennät JavaScriptiä, optimoit PNG:n, JPEG:n ja joskus muunnat . Mutta mitä tehdä vanhalle GIF:lle?
Emme tarvitse GIF-tiedostoja minne olemme menossa!
Jos tavoitteesi on parantaa sivuston latausnopeutta, sinun on päästävä eroon GIF-tiedostoista! Mutta miten sitten teet animoituja kuvia? Vastaus on video. Ja useimmissa tapauksissa saat paremman laadun ja 50-90 % tilansäästön! Elämässä useimmilla asioilla on hyvät ja huonot puolensa. Kun korvaat GIF:n videolla, et useimmiten löydä haittoja.
Alas kaikki GIFit!
Onneksi GIFien korvaaminen videoilla on ollut yleistä viime vuosina, joten kaikki tarvittavat työkalut ovat jo käytössä. Tässä postauksessa en keksi pyörää uudelleen, vaan parantelen vain hieman olemassa olevia ratkaisuja. Tässä siis ydin:
- Ota GIF ja muunna se videoksi
- Koodaa video käyttämällä H.264:ää tai VP9:ää, ts. pakkaa se ja pakkaa se MP4- tai WebM-säiliöön
- Korvata
<img>animoitu GIF päällä<video>rullalla - Ota käyttöön automaattinen toisto ilman ääntä ja loo GIF-tehoste
On vuosi 2019
Nyt on vuosi 2019. Edistys kulkee eteenpäin, ja meidän on pysyttävä sen mukana. Tähän mennessä meillä on ollut kaksi koodekkivaihtoehtoa, joita tuetaan laajasti kaikissa selaimissa ja videokoodaustyökaluissa:
- H.264 - otettiin käyttöön vuonna 2003 ja käytetään nykyään eniten
- VP9 - ilmestyi vuonna 2013 ja saavutti lähes 50 %:n pakkausparannuksia H.264:ään verrattuna, vaikka kaikki ei ole aina niin ruusuista
Huom: Vaikka H.265 on H.264:n seuraava versio ja pystyy kilpailemaan VP9:n kanssa, en pidä sitä huonon selaintuen vuoksi, kuten sivulla näkyy . Lisenssikustannukset ovat tärkein syy siihen, miksi H.265 ei ole levinnyt yhtä laajalle kuin H.264 ja miksi Alliance of Open Media -konsortio työskentelee rojaltivapaan AV1-koodekin kanssa.
Muista, että tavoitteemme on pienentää suuret GIF-tiedostot mahdollisimman pieniksi latausaikojen nopeuttamiseksi. Olisi outo vuosi 2019, jos arsenaalissamme ei olisi uutta standardia videoiden pakkaamiselle. Mutta se on olemassa ja sitä kutsutaan nimellä AV1. AV1:llä voit . Lepota! 🙂
AV1 on palveluksessasi vuodesta 2019!
pöytäkoneilla
Äskettäin AV1-videon dekoodauksen tuki lisättiin työpöytäversioihin и . Tällä hetkellä Firefox-tuki on buginen ja voi aiheuttaa kaatumisia, mutta asioiden pitäisi parantua lisäämällä jo Firefox 67:ssä ( - noin käännös.). Lisätietoja uudesta versiosta:
Älypuhelimissa
Älypuhelimille ei tällä hetkellä ole laitteistotukea asianmukaisten dekooderien puutteen vuoksi. Voit tehdä ohjelmistodekoodauksen, vaikka tämä lisää akun kulutusta. Ensimmäiset AV1-laitteistodekoodausta tukevat mobiili-SOC:t ilmestyvät vuonna 2020.
Ja sitten artikkelin lukijat ovat kuin: "Joten jos matkapuhelimet eivät vielä tue sitä kunnolla, miksi käyttää AV1:tä?"
AV1 on melko uusi koodekki, ja olemme sen mukauttamisen alussa. Ajattele tätä artikkelia "kun teet ruokaa, yleisö seuraa" -vaihetta. Työpöytätuki itsessään nopeuttaa sivustoja osan yleisöstä. Ja vanhoja koodekkeja voidaan käyttää varaskenaariona, kun kohdelaite ei tue AV1:tä. Mutta kun käyttäjät vaihtavat AV1-tuella varustettuihin laitteisiin, kaikki on valmis. Tämän saavuttamiseksi meidän on luotava alla olevan kuvan mukainen videotunniste, jonka avulla selain voi valita haluamasi muodon − AV1 - >> VP9 - >> H.264. No, jos käyttäjällä on erittäin vanha laite tai navigaattori, joka ei tue videota ollenkaan (mikä on erittäin epätodennäköistä H264:n kanssa), hän näkee vain GIF-tiedoston
<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:n luominen
Videoiden luominen AV1:ssä on helppoa. ja käytä alla olevia komentoja. Käytämme 2 passia saavuttaaksemme tavoitebittinopeuden. Tätä varten suoritamme ffmpeg-komennon kahdesti. Ensimmäisellä kerralla kirjoitamme tuloksen olemattomaan tiedostoon. Tämä luo lokin, jota tarvitaan toisella ffmpeg-ajolla.
# 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.mp4Tässä on parametrien erittely:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
GIFien tekeminen
GIF:n luomiseen käytin alla olevaa komentoa. Kokoa pienentääkseni skaalasin GIF:n leveyteen 720 pikseliä ja 12 kuvaa sekunnissa alkuperäisen 24 fps videon sijaan.
./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.gifTestitulokset
On parempi nähdä kerran kuin lukea sata kertaa, eikö niin? Varmistetaan, että AV1 on oikea valinta tarkoitukseemme. Otin tästä ilmaisen Tears Of Steel -videon , ja muunsi sen käyttämällä suunnilleen samaa bittinopeutta AV1-, VP9- ja H.264-koodekeille. Tulokset ovat alla, jotta voit verrata niitä itse.
Huomautus 1: Jos alla oleva tiedosto ei lataudu puolestasi, voi olla aika päivittää selaimesi. Suosittelen Chromium-pohjaista selainta, kuten Chrome, Vivaldi, Brave tai Opera. Tässä on uusimmat tiedot AV1-tuesta
Huomautus 2: Firefox 66 Linuxissa sinun on asetettava lippu media.av1.enabled merkitykseen true в about:config
Huomautus 3: Olen päättänyt olla sisällyttämättä alle tavallisia GIF-kuvia niiden suuren koon ja tämän sivun lataamiseen tarvittavan tietomäärän vuoksi! (Mikä olisi ironista, koska tällä sivulla on tarkoitus vähentää sivun datamäärää :)). Mutta voit nähdä lopulliset GIF-kuvat täältä
Kääntäjän huomautus: Habr ei salli automaattisen toiston ja tiedoston silmukan ottamista käyttöön, joten voit vain arvioida laatua. Voit nähdä miltä "animoidut kuvat" näyttävät livenä .
Kohtaus 1 @ 200 Kbps
Täällä on paljon liikettä, mikä on erityisen herkkää alhaisilla bittinopeuksilla. Näet heti kuinka huono H.264 on tällä bittinopeudella, neliöt näkyvät heti. VP9 parantaa hieman tilannetta, mutta ruudut ovat silti näkyvissä. AV1 voittaa selvästi ja tuottaa selvästi paremman kuvan.
H.264
VP9
AV1
Kohtaus 2 @ 200 Kbps
Täällä on paljon läpikuultavaa CGI-sisältöä. Tulokset eivät ole yhtä erilaisia kuin viime kerralla, mutta kaiken kaikkiaan AV1 näyttää paremmalta.
H.264
VP9
AV1
Kohtaus 3 @ 100 Kbps
Tässä kohtauksessa vähennämme bittinopeuden 100 Kbps:iin ja tulokset ovat yhdenmukaisia. AV1 säilyttää johtajuutensa jopa alhaisilla bittinopeuksilla!
H.264
VP9
AV1
Kirsikka kakun päällä
Tämän artikkelin lopuksi tuntemalla säästetty kaistanleveys verrattuna GIF-tiedostoon - kaikkien videoiden kokonaiskoko on suurempi... 1.62 Mt!! Oikein. Vitun 1,708,032 1 XNUMX tavua! Vertailun vuoksi tässä on kunkin kohtauksen GIF- ja AVXNUMX-videokoot
GIF
AV1
Kohtaus 1
11.7 MB
0.33 MB
Kohtaus 2
7.27 MB
0.18 MB
Kohtaus 3
5.62 MB
0.088 MB
Yksinkertaisesti upea! Eikö ole?
Huom: VP9:n ja H264:n tiedostokokoja ei ole annettu, koska ne eivät käytännössä eroa AV1:stä saman bittinopeuden käytön vuoksi. Olisi tarpeetonta lisätä vielä kaksi samankokoista saraketta vain korostaaksesi, että nämä koodekit tuottavat paljon parempaa laatua kuin GIF paljon pienemmillä tiedostokooilla.
Lähde: will.com