Det er 2019 og det er på tide at vi bestemmer oss for GIF-er ( - her er det snakk om uttale på engelsk, for oss er ikke dette aktuelt - ca. oversettelse). GIF-er tar opp en enorm mengde plass (vanligvis flere megabyte!), noe som, hvis du er en webutvikler, er helt i strid med dine ønsker! Som webutvikler vil du minimere de tingene brukerne trenger å laste ned slik at siden lastes raskt. Av samme grunn forminsker du JavaScript, optimaliserer PNG, JPEG og noen ganger konverterer du . Men hva skal jeg gjøre med den gamle GIF-en?
Vi trenger ikke GIF-er der vi skal!
Hvis målet ditt er å forbedre nettstedets lastehastighet, må du kvitte deg med GIF-er! Men hvordan lager man da animerte bilder? Svaret er video. Og i de fleste tilfeller vil du få bedre kvalitet og plassbesparelser på 50-90 %! I livet har det meste sine fordeler og ulemper. Når du erstatter GIF med video, vil du oftest ikke kunne finne noen ulemper.
Ned med alle GIF-er!
Heldigvis har det vært vanlig å erstatte GIF-er med videoer de siste årene, så alle nødvendige verktøy er allerede i bruk. I dette innlegget skal jeg ikke finne opp hjulet på nytt, men bare forbedre de eksisterende løsningene litt. Så her er kjernen:
- Ta en GIF og konverter den til en video
- Kod videoen med H.264 eller VP9, dvs. komprimer den og pakk den inn i MP4- eller WebM-beholder
- Erstatte
<img>med animert GIF på<video>med rulle - Slå på autoavspilling uten lyd og loop for en GIF-effekt
Det er 2019
Det er 2019 nå. Fremgangen går fremover, og vi må følge med. Så langt har vi hatt to kodekalternativer som støttes bredt på tvers av alle nettlesere og videokodingsverktøy:
- H.264 - introdusert i 2003 og mest brukt i dag
- VP9 - dukket opp i 2013 og oppnådde kompresjonsforbedringer på nesten 50 % sammenlignet med H.264, selv om ikke alt er ikke alltid like rosenrødt
Merk: Selv om H.265 er den neste versjonen av H.264 og er i stand til å konkurrere med VP9, vurderer jeg det ikke på grunn av dårlig nettleserstøtte, som vist på siden . Lisenskostnader er hovedårsaken til at H.265 ikke har blitt like utbredt som H.264 og hvorfor Alliance of Open Media-konsortiet jobber med en royaltyfri kodek, AV1.
Husk at målet vårt er å krympe enorme GIF-er til den minste mulige størrelsen for å øke hastigheten på lastetidene. Det ville vært et merkelig 2019 hvis vi ikke hadde en ny standard for videokomprimering i arsenalet vårt. Men den finnes og heter AV1. Med AV1 kan du . Bable! 🙂
AV1 står til tjeneste siden 2019!
På skrivebord
Nylig ble støtte for AV1-videodekoding lagt til skrivebordsversjoner и . Akkurat nå er Firefox-støtte buggy og kan forårsake krasj, men ting bør forbedres med tillegg av allerede i Firefox 67 ( — ca. oversett.). For detaljer om den nye versjonen les -
På smarttelefoner
Det er for øyeblikket ingen maskinvarestøtte for smarttelefoner på grunn av mangelen på passende dekodere. Du kan gjøre programvaredekoding, selv om dette vil føre til økt batteriforbruk. De første mobile SOC-ene som støtter AV1-maskinvaredekoding vil dukke opp i 2020.
Og så tenker leserne av artikkelen, "så hvis mobiltelefoner ikke støtter det riktig ennå, hvorfor bruke AV1?"
AV1 er en ganske ny kodek, og vi er helt i begynnelsen av tilpasningen. Tenk på denne artikkelen som "mens du lager mat, vil mengden følge"-stadiet. Desktop-støtte i seg selv vil øke hastigheten på nettsteder for noen av publikummet. Og gamle kodeker kan brukes som et reservescenario når AV1 ikke støttes på målenheten. Men når brukerne bytter til enheter med AV1-støtte, vil alt være klart. For å oppnå dette må vi lage en video-tag som vist nedenfor, som lar nettleseren velge ønsket format − AV1 - >> VP9 - >> H.264. Vel, hvis brukeren har en veldig gammel enhet eller navigator som ikke støtter video i det hele tatt (noe som er ekstremt usannsynlig med H264), så vil han bare se GIF-en
<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>Opprettelse av AV1
Det er enkelt å lage videoer i AV1. og bruk kommandoene nedenfor. Vi bruker 2 passeringer for å oppnå målbithastigheten. For å gjøre dette vil vi kjøre ffmpeg to ganger. Første gang skriver vi resultatet til en ikke-eksisterende fil. Dette vil lage en logg som vil være nødvendig for den andre kjøringen 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.mp4Her er en oversikt over parametrene:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Lage GIF-er
For å lage GIF brukte jeg kommandoen nedenfor. For å redusere størrelsen skalert jeg GIF-en til 720 px bred og 12 fps i stedet for den originale 24 fps-videoen.
./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.gifTestresultater
Det er bedre å se én gang enn å lese hundre ganger, ikke sant? La oss sørge for at AV1 er det riktige valget for våre formål. Jeg tok den gratis Tears Of Steel-videoen som er tilgjengelig her , og konverterte den med omtrent samme bithastighet for AV1, VP9, H.264-kodeker. Resultatene er nedenfor, slik at du kan sammenligne dem selv.
Merknad 1: Hvis filen nedenfor ikke laster inn for deg, kan det være på tide å oppdatere nettleseren din. Jeg vil anbefale en Chromium-basert nettleser som Chrome, Vivaldi, Brave eller Opera. Her er den nyeste informasjonen om AV1-støtte
Merknad 2: For Firefox 66 på Linux må du angi flagget media.av1.enabled til mening true в about:config
Merknad 3: Jeg har bestemt meg for ikke å inkludere vanlige GIF-er nedenfor på grunn av deres store størrelse og mengden data det vil kreve for å laste denne siden! (Noe som ville vært ironisk, siden denne siden handler om å redusere mengden data på en side :)). Men du kan se de endelige GIF-ene her
Oversetterens notat: Habr tillater deg ikke å aktivere autoavspilling og løkke filen, så du kan bare evaluere kvaliteten. Du kan se hvordan de "animerte bildene" vil se ut live på .
Scene 1 @ 200 Kbps
Det er mye bevegelse her, noe som er spesielt følsomt ved lave bithastigheter. Du kan umiddelbart se hvor dårlig H.264 er ved denne bithastigheten; firkanter er umiddelbart synlige. VP9 forbedrer situasjonen litt, men rutene er fortsatt synlige. AV1 vinner klart, og gir et åpenbart bedre bilde.
H.264
VP9
AV1
Scene 2 @ 200 Kbps
Det er mye gjennomsiktig CGI-innhold her. Resultatene er ikke så forskjellige som forrige gang, men generelt ser AV1 bedre ut.
H.264
VP9
AV1
Scene 3 @ 100 Kbps
I denne scenen skrur vi bithastigheten ned til 100 Kbps og resultatene er konsistente. AV1 opprettholder sitt lederskap selv ved lave bithastigheter!
H.264
VP9
AV1
Kirsebær på kaken
For å fullføre denne artikkelen ved å føle hvor mye båndbredde som er lagret sammenlignet med GIF - den totale størrelsen på alle videoene er høyere... 1.62 MB!! Ikke sant. Noen jævla 1,708,032 1 XNUMX byte! For sammenligning, her er GIF- og AVXNUMX-videostørrelsene for hver scene
GIF
AV1
Scene 1
11.7 MB
0.33 MB
Scene 2
7.27 MB
0.18 MB
Scene 3
5.62 MB
0.088 MB
Rett og slett fantastisk! Er det ikke?
Merk: Filstørrelsene til VP9 og H264 er ikke gitt, siden de praktisk talt ikke er forskjellige fra AV1 på grunn av bruken av samme bitrate. Det ville være overflødig å legge til ytterligere to kolonner med samme størrelser, bare for å markere at disse kodekene produserer mye bedre kvalitet enn GIF ved mye mindre filstørrelser.
Kilde: www.habr.com