Det er 2019, og det er på tide, at vi beslutter os for GIF'er ( - her taler vi om udtale på engelsk, for os er det ikke relevant - ca. oversættelse). GIF'er fylder enormt meget (normalt flere megabyte!), hvilket, hvis du er webudvikler, er helt i modstrid med dine ønsker! Som webudvikler vil du minimere de ting, brugerne skal downloade, så siden indlæses hurtigt. Af samme grund formindsker du JavaScript, optimerer PNG, JPEG og nogle gange konverterer du . Men hvad skal man gøre med den gamle GIF?
Vi har ikke brug for GIF'er, hvor vi skal hen!
Hvis dit mål er at forbedre webstedets indlæsningshastighed, så skal du slippe af med GIF'er! Men hvordan laver man så animerede billeder? Svaret er video. Og i de fleste tilfælde vil du få bedre kvalitet og pladsbesparelser på 50-90%! I livet har de fleste ting deres fordele og ulemper. Når du erstatter GIF med video, vil du oftest ikke kunne finde nogen ulemper.
Ned med alle GIF'er!
Heldigvis har det været almindeligt at erstatte GIF'er med videoer i de senere år, så alle de nødvendige værktøjer er allerede i brug. I dette indlæg vil jeg ikke genopfinde hjulet, men vil kun forbedre de eksisterende løsninger en smule. Så her er kernen:
- Tag en GIF og konverter den til en video
- Indkode videoen ved hjælp af H.264 eller VP9, dvs. komprimer det og pak det i MP4- eller WebM-beholder
- Erstatte
<img>med animeret GIF på<video>med rulle - Slå autoplay til uden lyd og loop for en GIF-effekt
Det er 2019
Det er 2019 nu. Fremskridt går fremad, og vi skal følge med. Indtil videre har vi haft to codec-muligheder, der er bredt understøttet på tværs af alle browsere og videokodningsværktøjer:
- H.264 - introduceret i 2003 og mest udbredt i dag
- VP9 - dukkede op i 2013 og opnåede kompressionsforbedringer på næsten 50 % sammenlignet med H.264, selvom ikke alt er ikke altid så rosenrødt
Note: Selvom H.265 er den næste version af H.264 og er i stand til at konkurrere med VP9, overvejer jeg det ikke på grund af dårlig browserunderstøttelse, som vist på siden . Licensomkostninger er hovedårsagen til, at H.265 ikke er blevet så udbredt som H.264, og hvorfor Alliance of Open Media-konsortiet arbejder med et royaltyfrit codec, AV1.
Husk, vores mål er at krympe enorme GIF'er til den mindst mulige størrelse for at fremskynde indlæsningstiderne. Det ville være et mærkeligt 2019, hvis vi ikke havde en ny standard for videokomprimering i vores arsenal. Men den findes og hedder AV1. Med AV1 kan du . Lepota! 🙂
AV1 står til din tjeneste siden 2019!
På desktops
For nylig blev understøttelse af AV1-videoafkodning tilføjet til desktopversioner и . Lige nu er Firefox-understøttelse buggy og kan forårsage nedbrud, men tingene skulle forbedres med tilføjelsen af allerede i Firefox 67 ( - ca. oversættelse). For detaljer om den nye version læs -
På smartphones
Der er i øjeblikket ingen hardwareunderstøttelse til smartphones på grund af manglen på passende dekodere. Du kan lave softwareafkodning, selvom dette vil føre til øget batteriforbrug. De første mobile SOC'er, der understøtter AV1-hardwareafkodning, vises i 2020.
Og så er artiklens læsere sådan, "så hvis mobiltelefoner ikke understøtter det ordentligt endnu, hvorfor så bruge AV1?"
AV1 er et ret nyt codec, og vi er helt i begyndelsen af dets tilpasning. Tænk på denne artikel som stadiet "mens du laver mad, vil mængden følge". Desktop support i sig selv vil fremskynde websteder for nogle af publikummet. Og gamle codecs kan bruges som et fallback-scenarie, når AV1 ikke understøttes på målenheden. Men når brugerne skifter til enheder med AV1-understøttelse, vil alt være klar. For at opnå dette skal vi oprette et video-tag som vist nedenfor, som giver browseren mulighed for at vælge sit foretrukne format − AV1 - >> VP9 - >> H.264. Nå, hvis brugeren har en meget gammel enhed eller navigator, der slet ikke understøtter video (hvilket er ekstremt usandsynligt 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>Oprettelse af AV1
Det er nemt at oprette videoer i AV1. og brug kommandoerne nedenfor. Vi bruger 2 gennemløb for at opnå målbithastigheden. For at gøre dette vil vi køre ffmpeg to gange. Første gang skriver vi resultatet til en ikke-eksisterende fil. Dette vil oprette en log, der er nødvendig for den anden kørsel af 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 oversigt 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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
At lave GIF'er
For at oprette GIF'en brugte jeg nedenstående kommando. For at reducere størrelsen skalerede jeg GIF'en til 720 px bred og 12 fps i stedet for den originale 24 fps video.
./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 at se én gang end at læse hundrede gange, ikke? Lad os sikre os, at AV1 er det rigtige valg til vores formål. Jeg tog den gratis Tears Of Steel-video, der er tilgængelig her , og konverterede det ved hjælp af omtrent samme bitrate for AV1, VP9, H.264 codecs. Resultaterne er nedenfor, så du kan sammenligne dem selv.
Note 1: Hvis nedenstående fil ikke indlæses for dig, kan det være tid til at opdatere din browser. Jeg vil anbefale en Chromium-baseret browser som Chrome, Vivaldi, Brave eller Opera. Her er de seneste oplysninger om AV1-support
Note 2: For Firefox 66 på Linux skal du indstille flaget media.av1.enabled i betydning true в about:config
Note 3: Jeg har besluttet ikke at inkludere almindelige GIF'er nedenfor på grund af deres store størrelse og mængden af data, det ville kræve for at indlæse denne side! (Hvilket ville være ironisk, da denne side handler om at reducere mængden af data på en side :)). Men du kan se de endelige GIF'er her
Oversætterens bemærkning: Habr tillader dig ikke at aktivere autoplay og loop filen, så du kan kun evaluere kvaliteten. Du kan se, hvordan de "animerede billeder" vil se ud live på .
Scene 1 @ 200 Kbps
Der er meget bevægelse her, hvilket er særligt følsomt ved lave bithastigheder. Du kan med det samme se, hvor dårlig H.264 er ved denne bitrate; firkanter er umiddelbart synlige. VP9 forbedrer situationen lidt, men firkanterne er stadig synlige. AV1 vinder klart, hvilket giver et klart bedre billede.
H.264
VP9
AV1
Scene 2 @ 200 Kbps
Der er en masse gennemsigtigt CGI-indhold her. Resultaterne er ikke så forskellige som sidste gang, men generelt ser AV1 bedre ud.
H.264
VP9
AV1
Scene 3 @ 100 Kbps
I denne scene skruer vi bithastigheden ned til 100 Kbps, og resultaterne er konsistente. AV1 bevarer sit lederskab selv ved lave bithastigheder!
H.264
VP9
AV1
Višenka på kager
For at afslutte denne artikel ved at mærke mængden af sparet båndbredde sammenlignet med GIF - den samlede størrelse af alle videoer er højere... 1.62 MB!! Højre. Nogle forbandede 1,708,032 bytes! Til sammenligning er her GIF- og AV1-videostørrelserne 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
Simpelthen fantastisk! Er det ikke?
Note: Filstørrelserne for VP9 og H264 er ikke angivet, da de praktisk talt ikke adskiller sig fra AV1 på grund af brugen af samme bitrate. Det ville være overflødigt at tilføje yderligere to kolonner med samme størrelser, bare for at fremhæve, at disse codecs producerer meget bedre kvalitet end GIF ved meget mindre filstørrelser.
Kilde: www.habr.com