Nu Ă€r det 2019 och vi borde ta ett beslut om GIF ( â hĂ€r handlar det om uttal pĂ„ engelska, vilket inte Ă€r relevant för oss â anm. övers.). GIF:er tar upp en enorm mĂ€ngd utrymme (vanligtvis flera megabyte!), vilket helt gĂ„r emot dina önskemĂ„l som webbprogrammerare! Som webbprogrammerare vill du minimera det som anvĂ€ndarna mĂ„ste ladda ner för att webbplatsen ska ladda snabbt. Av samma anledning minimerar du JavaScript, optimerar PNG, JPEG, och ibland konverterar du . Men vad ska vi göra med den gamla GIF:en?
Dit vi Àr pÄ vÀg kommer vi inte att behöva GIF:er!
Om ditt mÄl Àr att förbÀttra webbplatsens laddningstid, sÄ mÄste du bli av med GIF:er! Men hur ska vi dÄ göra animerade bilder? Svaret Àr video. Och i de flesta fall fÄr du bÀttre kvalitet och platsbesparingar pÄ 50-90%! I livet har de flesta saker bÄde fördelar och nackdelar. NÀr du ersÀtter GIF med video Àr det oftast svÄrt att hitta nackdelar.
Bort med alla GIF:er!
Som tur Àr har det varit en vanlig sak att ersÀtta GIF med video de senaste Ären, sÄ alla nödvÀndiga verktyg finns redan tillgÀngliga. I det hÀr inlÀgget kommer jag inte att uppfinna hjulet pÄ nytt, utan bara förbÀttra befintliga lösningar. SÄ hÀr Àr kÀrnan:
- Ta en GIF och konvertera den till video
- Koda videon med H.264 eller VP9, det vill sÀga komprimera den och packa den i MP4 eller WebM-container
- Byt ut
<img>med animerad GIF tillmed video - Aktivera autoplay utan ljud och loopa för att Ästadkomma en GIF-effekt
Nu Àr det 2019
Nu Àr det 2019. Utvecklingen gÄr framÄt och vi mÄste hÀnga med. Hittills har vi haft tvÄ codec-alternativ som Àr allmÀnt stödda i alla webblÀsare och videoencodingverktyg:
- H.264 â som dök upp 2003 och anvĂ€nds mest idag
- VP9 â som dök upp 2013 och har uppnĂ„tt en nĂ€stan 50% förbĂ€ttring i komprimering jĂ€mfört med H.264, Ă€ven om inte allt alltid ser sĂ„ bra ut
AnmĂ€rkning: Ă€ven om H.265-standarden Ă€r nĂ€sta version av H.264 och kan konkurrera med VP9, övervĂ€ger jag inte den pĂ„ grund av svag webblĂ€sarstöd, vilket framgĂ„r pĂ„ sidan . Licenskostnader Ă€r den frĂ€msta orsaken till att H.265 inte blivit lika utbredd som H.264 och varför konsortiet Alliance of Open Media arbetar med en codec utan avgifter â med AV1.
Kom ihĂ„g att vĂ„rt mĂ„l Ă€r att minska stora GIF-filer till den minsta möjliga storleken för att snabba upp laddningstider. Det vore en konstig 2019 om vi inte hade ett nytt standard för videokompression i vĂ„rt arsenal. Men vi har det, och det kallas AV1. Med AV1 kan man . Fantastiskt! đ
AV1 har stÄtt till tjÀnst sedan 2019!
PÄ stationÀra datorer
Nyligen har stöd för AV1-videokodning lagts till i stationĂ€ra versioner av och . Just nu har Firefox problem med stödet som kan leda till krascher, men saker och ting bör förĂ€ndras med tillĂ€gget av redan i Firefox 67 ( â anm. red.). För detaljer om den nya versionen, lĂ€s â
PĂ„ smartphones
För smartphones finns det för nÀrvarande inget hÄrdvarustöd pÄ grund av bristen pÄ lÀmpliga dekodrar. Man kan utföra programvarudekodning, men det kommer att öka batteriförbrukningen. De första mobila SOC:erna med stöd för hÄrdvarudekodning av AV1 kommer att komma 2020.
Och hÀr sitter lÀsarna och tÀnker "om mobiler inte stödjer det bra, varför ska vi dÄ anvÀnda AV1?"
AV1 Ă€r en ganska ny codec, och vi Ă€r i början av dess anpassning. Betrakta denna artikel som ett stadium av "medan ni lagar mat, kommer folket att hinna ikapp". Stödet pĂ„ stationĂ€ra datorer kommer redan att snabba upp webbplatser för en del av publiken. De gamla codeckerna kan anvĂ€ndas som fallback-scenario nĂ€r AV1 inte stöds pĂ„ den aktuella enheten. Men allteftersom anvĂ€ndare byter till enheter som har stöd för AV1, kommer allt att vara klart. För att uppnĂ„ detta behöver vi skapa en video-tag, som visas nedan, som lĂ„ter webblĂ€saren vĂ€lja det föredragna formatet â AV1 ->> VP9 ->> H.264. Men om anvĂ€ndaren har en helt gammal enhet eller webblĂ€sare som inte stödjer video överhuvudtaget (vilket Ă€r ganska osannolikt med H264), sĂ„ kommer de bara att se en 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>Skapa AV1
Att skapa video i AV1 Àr inte svÄrt. och anvÀnd kommandona nedan. Vi anvÀnder 2 genomgÄngar för att uppnÄ det önskade bitrate. För detta kommer vi att köra ffmpeg tvÄ gÄnger. Första gÄngen sparar vi resultatet i en icke-existerande fil. Detta kommer att skapa en logg som behövs för den andra körningen av 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.mp4HÀr Àr avkodningen av parametrarna:
-i - Inmatningsfil.
-pix_fmt - Använd den 4:2:0-format för att välja färginformation i videon. Det finns många andra möjliga format, men 4:2:0 är det mest kompatibla.
-c:v - Vilken codec som ska användas, i vårt fall - AV1.<br />
-b:v – Den genomsnittliga bitrate vi vill uppnå.
-filter:v scale - ffmpeg:s skalfilter används för att minska videons upplösning. Vi sätter X:-1 vilket berättar för ffmpeg att minska bredden till X, samtidigt som bildförhållandet bibehålls.
-strict experimental - Måste anges, eftersom AV1 är en relativt ny codec.
-cpu-used - Dåligt namngiven parameter som faktiskt används för att välja kvalitetsnivå för videon. Möjliga värden är 0-4. Ju lägre värde, desto bättre kvalitet och därmed längre tid för kodning.
-tile-columns - För att använda flera trådar. Berättar AV1 att dela upp videon i separata kolumner som kan omkodas oberoende för bättre CPU-användning.
-row-mt – Samma som den tidigare parametern, men delar också upp i rader inom kolumnerna.
-threads - Antal trådar.
-pass - Vilket pass som för närvarande utförs.
-f - Används endast vid första passet. Anger formatet på utdatafilen, det vill säga MP4 i vårt fall.
-movflags faststart - Aktiverar snabbstart av videon genom att flytta en del av datan i början av filen. Detta gör att uppspelningen kan börja innan hela filen har laddats.
Skapa GIF
För att skapa GIF-anvÀndning anvÀnde jag kommandot nedan. För att minska storleken skalade jag GIF till 720px i bredd och 12 fps istÀllet för den ursprungliga videon 24 fps.
./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.gifTestresultat
BÀttre att se en gÄng Àn att lÀsa hundra, eller hur? LÄt oss sÀkerstÀlla att AV1 Àr det rÀtta valet för vÄra mÄl. Jag tog en gratis video av Tears Of Steel, som finns hÀr , och konverterade den med ungefÀr samma bitrate för AV1-, VP9- och H.264-codecs. Resultaten Àr nedan sÄ att du kan jÀmföra dem sjÀlv.
Obs 1: Om filen nedan inte laddas, kanske det Àr dags att uppdatera din webblÀsare. Jag skulle rekommendera en Chromium-baserad webblÀsare, som Chrome, Vivaldi, Brave eller Opera. HÀr Àr den senaste informationen om AV1-stöd
Obs 2: För Firefox 66 pÄ Linux mÄste du aktivera flaggan media.av1.enabled till vÀrdet true pÄ about:config
Obs 3: Jag har valt att inte inkludera vanliga GIF:ar nedan pÄ grund av deras stora storlek och mÀngden data som skulle krÀvas för att ladda denna sida! (Vilket skulle vara ironiskt, eftersom denna sida handlar om att minska datamÀngden pÄ sidan :)). Men du kan se de slutgiltiga GIF:arna hÀr
ĂversĂ€ttarens anmĂ€rkning: Habr tillĂ„ter inte automatisk uppspelning och loopning av filen, sĂ„ kvaliteten kan bara bedömas. Du kan se hur de 'animerade bilderna' kommer att se ut live i .
Scen 1 @ 200 Kbps
Det finns mycket rörelse hÀr, vilket Àr sÀrskilt kÀnsligt vid lÄga bitrates. Man ser omedelbart hur dÄlig H.264 Àr vid denna bitrate, kvadraterna syns tydligt. VP9 förbÀttrar situationen nÄgot, men kvadraterna Àr fortfarande synliga. AV1 vinner tydligt, med en uppenbart bÀttre bild.
H.264
VP9
AV1
Scen 2 @ 200 Kbps
HÀr finns mycket genomskinligt CGI-innehÄll. Resultaten skiljer sig inte sÄ mycket som förra gÄngen, men överlag ser AV1 bÀttre ut.
H.264
VP9
AV1
Scen 3 @ 100 Kbps
I denna scen sÀnker vi bitrate till 100 Kbps och resultaten motsvarar. AV1 behÄller sin ledning Àven vid lÄga bitrates!
H.264
VP9
AV1
KörsbÀret pÄ toppen
För att avsluta artikeln och kĂ€nna av mĂ€ngden sparad trafik jĂ€mfört med GIF â den totala storleken pĂ„ alla ovanstĂ„ende videor ... 1.62 MB!! RĂ€tt. Helt jĂ€kla 1,708,032 byte! För jĂ€mförelse, hĂ€r Ă€r storleken pĂ„ GIF- och AV1-video för varje scen
GIF
AV1
Scen 1
11,7 MB
0,33 MB
Scen 2
7,27 MB
0,18 MB
Scen 3
5,62 MB
0,088 MB
Helt fantastiskt! Eller hur?
AnmÀrkning: Filstorlekar för VP9 och H264 anges inte, eftersom de praktiskt taget inte skiljer sig frÄn AV1 pÄ grund av anvÀndningen av samma bitrate. Det skulle vara överflödigt att lÀgga till tvÄ kolumner med samma storlekar, bara för att understryka att dessa codec ger mycket bÀttre kvalitet Àn GIF med betydligt mindre filstorlekar.
KĂ€lla: habr.com
