Nu er det 2019, og vi må træffe en beslutning om GIF ( — her drejer det sig om udtalen på engelsk, hvilket ikke er relevant for os — bem. fra oversætteren.). GIF'er optager en enorm mængde plads (som regel flere megabyte!), hvilket, hvis du er webudvikler, fuldstændig strider imod dine ønsker! Som webudvikler vil du minimere de ting, som brugerne skal downloade, for at siden kan indlæses hurtigt. Af samme grund minimerer du JavaScript, optimerer PNG, JPEG og nogle gange konverterer . Men hvad skal der så ske med den gamle GIF?
Hvor vi er på vej hen, får vi ikke brug for GIF'er!
Hvis dit mål er at forbedre indlæsningstiden for hjemmesiden, så skal du skILLE dig af med GIF! Men hvordan laver du så animerede billeder? Svaret er video. Og i de fleste tilfælde vil du få bedre kvalitet og en pladsbesparelse på 50-90%! I livet har de fleste ting både fordele og ulemper. Når du erstatter GIF med video, er der sjældent ulemper at finde.
Væk med alle GIF'er!
Heldigvis har det været normalt at erstatte GIF med video de seneste år, så alle nødvendige værktøjer er allerede tilgængelige. I dette indlæg vil jeg ikke finde på hjulet igen, men blot forbedre de eksisterende løsninger lidt. Så her er essensen:
- Tag GIF'en og konverter den til video
- Koden videoen med H.264 eller VP9, dvs. komprimere den og pakke den i en MP4 eller WebM container
- Erstat
<img>med animeret GIF tiltil en video - Aktiver autoplay uden lyd og loop, så du opnår GIF-effekten
Nu er det 2019
Nu er det 2019. Fremskridtene bevæger sig fremad, og vi må ikke falde bagud. Indtil nu har vi haft to kodeksmuligheder, der er bredt understøttet i alle browsere og videokodningsværktøjer:
- H.264 — introduceret i 2003 og den mest anvendte i dag
- VP9 — introduceret i 2013 og opnået næsten 50% bedre kompression sammenlignet med H.264, selvom ikke alt og ikke altid er så rosenrødt
Bemærk: selvom H.265-standarden er den næste version af H.264 og kan konkurrere med VP9, overvejer jeg ikke den på grund af svag browserunderstøttelse, hvilket vises på siden . Licensomkostninger er den primære grund til, at H.265 ikke er blevet så udbredt som H.264, og derfor arbejder Alliance of Open Media-konsortiet med en royaltyfri codec — AV1.
Husk, at vores mål er at reducere enorme GIF'er til den mindst mulige størrelse for at fremskynde indlæsningen. Det ville være underligt i 2019, hvis vi ikke havde et nyt standard til videokomprimering i vores værktøjskasse. Men vi har det, og det hedder AV1. Med AV1 kan du . Fantastisk! 🙂
AV1 har været tilgængelig siden 2019!
På desktop
For nylig blev understøttelse af AV1-dekodning tilføjet i desktopversionerne af og . Lige nu er understøttelsen i Firefox ustabil og kan forårsage nedbrud, men det burde ændre sig med tilføjelsen af allerede i Firefox 67 ( — red. anm.). For detaljer om den nye version, læs —
På smartphones
For smartphones er der i øjeblikket ikke hardwareunderstøttelse på grund af manglende passende dekodere. Softwaredekodning er mulig, men det vil medføre ekstra batteriforbrug. De første mobile SOC'er med hardwareunderstøttelse af AV1 vil komme i 2020.
Og her sidder læserne og tænker: "Hvis mobiltelefoner ikke understøtter det ordentligt endnu, hvorfor så bruge AV1?"
AV1 er en relativt ny codec, og vi er kun lige begyndt at tilpasse os den. Tænk på denne artikel som en arbejdsfase — "mens du forbereder dig, går folk ind i det". Understøttelse på desktop alene vil allerede fremskynde websider for en del af publikum. Og gamle codecs kan anvendes som fallback, når AV1 ikke understøttes på den målretter enhed. Men efterhånden som brugerne skifter til enheder, der understøtter AV1, vil alt allerede være klar. For at opnå dette skal vi skabe et video-tag, som vist nedenfor, der gør det muligt for browseren at vælge det foretrukne format — AV1 ->> VP9 ->> H.264. Men hvis brugerens enhed eller browser er så gammel, at de slet ikke understøtter video (hvilket er meget usandsynligt med H264), så vil de blot 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>Oprettelse af AV1
Det er ikke svært at lave video i AV1. og og brug kommandoerne nedenfor. Vi bruger 2 gennemgange for at nå den ønskede bitrate. For dette vil vi køre ffmpeg to gange. Første gang gemmer vi resultatet i en ikke-eksisterende fil. Dette vil skabe en log, som vi får brug for til 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 forklaring af indstillingerne:
-i - Indgangsfilen.
-pix_fmt - Den valgte 4:2:0 format for farveinformation i videoen. Der findes mange andre mulige formater, men 4:2:0 er mest kompatibelt.
-c:v - Hvilken codec der skal bruges, i vores tilfælde - AV1.<br />
-b:v – Den gennemsnitlige bitrate, vi ønsker at opnå.
-filter:v scale - ffmpeg's skaleringsfilter bruges til at reducere videoens opløsning. Vi angiver X:-1, hvilket fortæller ffmpeg at reducere bredden til X, mens aspekforholdet bevares.
-strict experimental - Skal angives, da AV1 er en relativt ny codec.
-cpu-used - Dårligt navngivet parameter, der faktisk bruges til at vælge kvalitetsniveauet for videoen. Mulige værdier 0-4. Jo lavere værdi, jo bedre kvalitet og dermed længere tid til kodning.
-tile-columns - For at bruge flere tråde. Angiver til AV1 at opdele videoen i separate søjler, der kan kodes uafhængigt for bedre CPU-udnyttelse.
-row-mt – Ligesom den tidligere parameter, men opdeler også i rækker inden i søjlerne.
-threads - Antallet af tråde.
-pass - Hvilket gennemløb der udføres nu.
-f - Anvendes kun ved første gennemløb. Angiver formatet for outputfilen, dvs. MP4 i vores tilfælde.
-movflags faststart - Aktiverer hurtig start af videoen ved at flytte nogle data til begyndelsen af filen. Dette gør det muligt at starte afspilningen, før filen er helt indlæst.
Oprettelse af GIF
Til at oprette GIF brugte jeg den nedenstående kommando. For at reducere størrelsen skalerede jeg GIF'en til 720px i bredde og 12 fps i stedet for den originale video på 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.gifTest Results
Det er bedre at se én gang end at læse hundrede gange, ikke? Lad os sikre os, at AV1 er det rigtige valg for vores formål. Jeg tog den gratis video Tears Of Steel, som kan findes her , og konverterede den ved hjælp af omtrent ens bitrate for kodekerne AV1, VP9, H.264. Resultaterne er nedenfor, så du kan sammenligne dem selv.
Bemærkning 1: Hvis filen nedenfor ikke indlæses, kan det være tid til at opdatere din browser. Jeg ville anbefale en Chromium-baseret browser som Chrome, Vivaldi, Brave eller Opera. Her er den seneste information om AV1-support
Bemærkning 2: For Firefox 66 på Linux skal du aktivere flaget media.av1.enabled til værdien true i about:config
Bemærkning 3: Jeg har besluttet ikke at inkludere almindelige GIF'er nedenfor på grund af deres store størrelse og mængden af data, der kunne være nødvendig for at indlæse denne side! (Hvilket ville være ironisk, da denne side handler om at reducere datamængden på siden :)). Men du kan se de endelige GIF'er her
Oversætterens note: Habr tillader ikke at aktivere automatisk afspilning og gentage filen, så kvaliteten kan kun vurderes. Du kan se, hvordan "animerede billeder" vil se ud live i .
Scene 1 @ 200 Kbps
Der er meget bevægelse her, hvilket er særligt følsomt ved lave bitrater. Det er straks tydeligt, hvor dårlig H.264 er ved denne bitrate, kvadratene er tydeligt synlige. VP9 forbedrer situationen lidt, men kvadratene er stadig synlige. AV1 vinder klart og leverer en åbenlyst bedre billede.
H.264
VP9
AV1
Scene 2 @ 200 Kbps
Der er meget gennemskinneligt CGI-indhold her. Resultaterne er ikke så forskellige, som de var sidste gang, men generelt ser AV1 bedre ud.
H.264
VP9
AV1
Scene 3 @ 100 Kbps
I denne scene skruer vi bitraten ned til 100 Kbps, og resultaterne stemmer overens. AV1 holder føringen, selv ved lave bitrater!
H.264
VP9
AV1
Kirsebær på toppen
For at afslutte artiklen med en fornemmelse af den mængde trafik, der er sparet i forhold til GIF — den samlede størrelse af alle de ovenstående videoer… 1.62 MB!! Rigtigt. Hvorfor i alverden 1.708.032 byte! Til sammenligning, her er størrelsen for GIF- og AV1-videoerne for hver af scenerne.
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
Bare fantastisk! Er det ikke?
Bemærk: Filstørrelserne for VP9 og H264 er ikke angivet, da de næsten ikke adskiller sig fra AV1 på grund af brugen af samme bitrate. Det ville være overflødigt at tilføje endnu to kolonner med ens størrelser, kun for at understrege, at disse codecs leverer meget bedre kvalitet end GIF med betydeligt mindre filstørrelser.
Kilde: habr.com
