Det är 2019 och det är på tiden att vi bestämmer oss för GIF ( - här pratar vi om uttal på engelska, för oss är detta inte relevant - ca. översättning). GIF:er tar upp enormt mycket utrymme (vanligtvis flera megabyte!), vilket, om du är en webbutvecklare, helt strider mot dina önskemål! Som webbutvecklare vill du minimera de saker som användare behöver ladda ner så att sidan laddas snabbt. Av samma anledning förminskar du JavaScript, optimerar PNG, JPEG och ibland konverterar du . Men vad ska man göra med den gamla GIF?
Vi behöver inga GIF-bilder dit vi ska!
Om ditt mål är att förbättra sajtens laddningshastighet måste du bli av med GIF-filer! Men hur gör man då animerade bilder? Svaret är video. Och i de flesta fall får du bättre kvalitet och utrymmesbesparingar på 50-90%! I livet har det mesta sina för- och nackdelar. När du ersätter GIF med video kommer du oftast inte att kunna hitta några nackdelar.
Ned med alla GIF!
Lyckligtvis har det varit vanligt att ersätta GIF-filer med videor de senaste åren, så alla nödvändiga verktyg är redan i bruk. I det här inlägget kommer jag inte att uppfinna hjulet på nytt, utan bara förbättra de befintliga lösningarna något. Så här är kärnan:
- Ta en GIF och konvertera den till en video
- Koda videon med H.264 eller VP9, d.v.s. komprimera den och packa den i MP4- eller WebM-behållare
- Byta ut
<img>med animerad GIF på<video>med rulle - Aktivera automatisk uppspelning utan ljud och loop för en GIF-effekt
Det är 2019
Det är 2019 nu. Framstegen går framåt, och vi måste hänga med. Hittills har vi haft två codec-alternativ som stöds brett i alla webbläsare och videokodningsverktyg:
- H.264 - introducerades 2003 och används mest idag
- VP9 - dök upp 2013 och uppnådde kompressionsförbättringar på nästan 50 % jämfört med H.264, även om allt är inte alltid så rosa
Notera: Även om H.265 är nästa version av H.264 och kan konkurrera med VP9, anser jag det inte på grund av dåligt webbläsarstöd, som visas på sidan . Licenskostnader är huvudorsaken till att H.265 inte har blivit lika utbredd som H.264 och varför Alliance of Open Media-konsortiet arbetar med en royaltyfri codec, AV1.
Kom ihåg att vårt mål är att krympa enorma GIF-filer till minsta möjliga storlek för att påskynda laddningstiderna. Det skulle vara ett konstigt 2019 om vi inte hade en ny standard för videokomprimering i vår arsenal. Men den finns och heter AV1. Med AV1 kan du . Lepota! 🙂
AV1 står till din tjänst sedan 2019!
På stationära datorer
Nyligen har stöd för AV1-videoavkodning lagts till i skrivbordsversioner и . Just nu är supporten för Firefox buggig och kan orsaka krascher, men saker och ting borde förbättras med tillägget av redan i Firefox 67 ( - cirka. översätt.). För detaljer om den nya versionen läs -
På smartphones
Det finns för närvarande inget hårdvarustöd för smartphones på grund av bristen på lämpliga avkodare. Du kan göra mjukvaruavkodning, även om detta kommer att leda till ökad batteriförbrukning. De första mobila SOC:erna som stöder AV1-hårdvaruavkodning kommer att dyka upp 2020.
Och då är läsarna av artikeln som, "så om mobiltelefoner inte stöder det ordentligt ännu, varför använda AV1?"
AV1 är en ganska ny codec, och vi är i början av dess anpassning. Se den här artikeln som "medan du lagar mat kommer publiken att följa". Desktopstöd i sig kommer att göra webbplatser snabbare för en del av publiken. Och gamla codecs kan användas som ett reservscenario när AV1 inte stöds på målenheten. Men när användarna byter till enheter med AV1-stöd kommer allt att vara klart. För att uppnå detta måste vi skapa en videotagg som visas nedan, vilket gör att webbläsaren kan välja önskat format − AV1 - >> VP9 - >> H.264. Tja, om användaren har en mycket gammal enhet eller navigator som inte stöder video alls (vilket är extremt osannolikt med H264), då kommer han bara att se 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>Skapandet av AV1
Det är enkelt att skapa videor i AV1. och använd kommandona nedan. Vi använder 2 pass för att uppnå målbithastigheten. För att göra detta kommer vi att köra ffmpeg två gånger. Första gången vi skriver resultatet till en fil som inte finns. Detta kommer att skapa en logg som kommer att behövas 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 en uppdelning av parametrarna:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Att göra GIF-filer
För att skapa GIF använde jag kommandot nedan. För att minska storleken skalade jag GIF till 720 px bred och 12 fps istället för den ursprungliga 24 fps videon.
./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
Det är bättre att se en gång än att läsa hundra gånger, eller hur? Låt oss se till att AV1 är rätt val för våra syften. Jag tog den kostnadsfria Tears Of Steel-videon som finns här , och konverterade den med ungefär samma bithastighet för AV1, VP9, H.264 codecs. Resultaten är nedan så att du kan jämföra dem själv.
Anteckning 1: Om filen nedan inte laddas åt dig kan det vara 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
Anteckning 2: För Firefox 66 på Linux måste du ställa in flaggan media.av1.enabled till mening true в about:config
Anteckning 3: Jag har bestämt mig för att inte inkludera vanliga GIF nedan på grund av deras stora storlek och mängden data som det skulle kräva för att ladda den här sidan! (Vilket skulle vara ironiskt, eftersom den här sidan handlar om att minska mängden data på en sida :)). Men du kan se de sista GIF:erna här
Översättarens anmärkning: Habr tillåter inte att du aktiverar autoplay och loopar filen, så du kan bara utvärdera kvaliteten. Du kan se hur de "animerade bilderna" kommer att se ut live på .
Scen 1 @ 200 Kbps
Det är mycket rörelse här, vilket är särskilt känsligt vid låga bithastigheter. Du kan omedelbart se hur dålig H.264 är vid denna bithastighet, rutor är omedelbart synliga. VP9 förbättrar situationen lite, men rutorna är fortfarande synliga. AV1 vinner klart och ger en uppenbart bättre bild.
H.264
VP9
AV1
Scen 2 @ 200 Kbps
Det finns mycket genomskinligt CGI-innehåll här. Resultaten är inte lika annorlunda som förra gången, men överlag ser AV1 bättre ut.
H.264
VP9
AV1
Scen 3 @ 100 Kbps
I den här scenen sänker vi bithastigheten till 100 Kbps och resultaten är konsekventa. AV1 behåller sitt ledarskap även vid låga bithastigheter!
H.264
VP9
AV1
Körsbär på tårtan
För att avsluta den här artikeln med att känna hur mycket bandbredd som sparas jämfört med GIF - den totala storleken på alla videor är högre... 1.62 MB!! Höger. Några jävla 1,708,032 1 XNUMX byte! För jämförelse, här är GIF- och AVXNUMX-videostorlekarna 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 enkelt fantastisk! Är det inte?
Notera: Filstorlekarna för VP9 och H264 anges inte, eftersom de praktiskt taget inte skiljer sig från AV1 på grund av användningen av samma bithastighet. Det skulle vara överflödigt att lägga till ytterligare två kolumner med samma storlekar, bara för att markera att dessa codecs producerar mycket bättre kvalitet än GIF vid mycket mindre filstorlekar.
Källa: will.com