Het is nu 2019, en het is tijd om een beslissing te nemen over GIF ( — het gaat hier om de uitspraak in het Engels, wat voor ons niet relevant is — opm. vert.). GIF's nemen enorm veel ruimte in (meestal enkele megabytes!) wat, als je een webontwikkelaar bent, volledig tegen je wensen ingaat! Als webontwikkelaar wil je de dingen minimaliseren die gebruikers moeten downloaden, zodat de site snel laadt. Om dezelfde reden minimaliseer je JavaScript, optimaliseer je PNG, JPEG en soms converteer je . Maar wat te doen met de oude GIF?
Waar we heen gaan, hebben we geen GIF's nodig!
Als je doel is om de laadsnelheid van de website te verbeteren, dan moet je van GIF's af! Maar hoe maak je dan geanimeerde afbeeldingen? Het antwoord is video. En in de meeste gevallen krijg je betere kwaliteit en een ruimtebesparing van 50-90%! In het leven hebben de meeste dingen hun voor- en nadelen. Wanneer je een GIF vervangt door video, zijn er meestal weinig nadelen te vinden.
Weg met alle GIF's!
Gelukkig was het vervangen van GIF's door video's de afgelopen jaren heel gebruikelijk, dus alle benodigde tools zijn al in gebruik. In deze post ga ik niet de wiel opnieuw uitvinden, maar zal ik de bestaande oplossingen een beetje verbeteren. Dus, hier is de kern:
- Neem een GIF en converteer deze naar video
- Codeer de video met H.264 of VP9, dat wil zeggen, comprimeer deze en verpakt in een MP4 of WebM-container
- Vervang
<img>met een geanimeerde GIF naarmet een filmpje - Zet de autoplay zonder geluid aan en herhaal om het GIF-effect te bereiken
Het is nu 2019
Het is nu 2019. De vooruitgang gaat door, en we moeten niet achterblijven. Tot nu toe hebben we twee codec-opties gehad die breed worden ondersteund in alle browsers en video-encoding tools:
- H.264 — die in 2003 is verschenen en vandaag de meest gebruikte is
- VP9 — die in 2013 is verschenen en bijna 50% verbeterde compressie heeft vergeleken met H.264, hoewel het niet altijd zo rooskleurig is
Opmerking: hoewel de H.265-standaard de volgende versie van H.264 is en kan concurreren met VP9, overweeg ik deze niet vanwege de slechte ondersteuning door browsers, wat wordt aangetoond op de pagina Licentiekosten zijn de belangrijkste reden waarom H.265 niet zo wijdverspreid is als H.264 en waarom het consortium Alliance of Open Media met een codec zonder royalty's werkt - met AV1.
Vergeet niet dat ons doel is om enorme GIFs tot het kleinste mogelijke formaat te verkleinen om de laadtijd te versnellen. Het zou een vreemde jaar 2019 zijn geweest als we niet een nieuwe standaard voor video-compressie hadden. Maar we hebben die en het heet AV1. Met AV1 kan men . Geweldig! 🙂
AV1 is tot uw dienst sinds 2019!
Op desktop computers
Onlangs is ondersteuning voor AV1 video-decodering toegevoegd in de desktopversies van en . Op dit moment is de ondersteuning in Firefox buggy en kan het crashes veroorzaken, maar de zaken moeten veranderen met de toevoeging van al in Firefox 67 ( – opmerking vert.). Voor details over de nieuwe versie, lees —
Op smartphones
Voor smartphones is er momenteel geen hardwarematige ondersteuning vanwege een gebrek aan geschikte decoders. Softwarematige decodering is mogelijk, maar dit zal het batterijverbruik verhogen. De eerste mobiele SOC's met ondersteuning voor hardwarematige decodering van AV1 zullen in 2020 verschijnen.
En dan zijn er lezers die denken: 'Als mobiele apparaten voorlopig niet goed ondersteunen, waarom dan AV1 gebruiken?'
AV1 is een vrij nieuwe codec, en we staan aan het begin van de adaptatie. Denk aan dit artikel als een fase van: 'terwijl je aan het koken bent, komt het publiek dichterbij'. Ondersteuning op desktops zal op zich al websites versnellen voor een deel van het publiek. En oude codecs kunnen als fallbacks worden gebruikt wanneer AV1 niet wordt ondersteund op het doelapparaat. Maar naarmate gebruikers overstappen op apparaten die AV1 ondersteunen, zal alles al klaar zijn. Om dit te bereiken, moeten we een video-tag creëren, zoals hieronder weergegeven, die de browser in staat stelt om het voorkeursformaat te kiezen — AV1 ->> VP9 ->> H.264. Maar als de gebruiker een echt oud apparaat of browser heeft die video helemaal niet ondersteunt (wat zeer onwaarschijnlijk is met H264), zal hij gewoon een GIF zien.
<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>AV1 maken
Het creëren van een video in AV1 is niet moeilijk. en gebruik de onderstaande opdrachten. We gebruiken 2 passes om de doelbitrate te bereiken. Hiervoor draaien we ffmpeg twee keer. De eerste keer schrijven we het resultaat naar een niet-bestaand bestand. Dit creëert een logboek dat nodig is voor de tweede run van 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.mp4Hier is de uitleg van de parameters:
-i - Ingangsbestand.
-pix_fmt - Gebruik het 4:2:0-formaat om kleurinformatie in de video te selecteren. Er zijn veel andere mogelijke formaten, maar 4:2:0 is het meest compatibel.
-c:v - Welke codec te gebruiken, in ons geval - AV1.<br />
-b:v – Gemiddelde bitrate die we willen bereiken.
-filter:v scale - De ffmpeg-schaalfilter wordt gebruikt om de resolutie van de video te verlagen. We stellen X:-1 in, wat ffmpeg vertelt om de breedte tot X te verkleinen terwijl de aspectverhouding behouden blijft.
-strict experimental - Moet worden opgegeven, omdat AV1 een vrij nieuwe codec is.
-cpu-used - Slecht benoemde parameter die eigenlijk wordt gebruikt om het kwaliteitsniveau van de video te kiezen. Beschikbare waarden 0-4. Hoe lager de waarde, hoe beter de kwaliteit en dus meer tijd die nodig is voor codering.
-tile-columns - Voor het gebruik van meerdere threads. Vertelt AV1 om de video in afzonderlijke kolommen te splitsen die onafhankelijk kunnen worden opnieuw gecodeerd voor een betere CPU-utilisatie.
-row-mt – Hetzelfde als de vorige parameter, maar splitst ook in rijen binnen de kolommen.
-threads - Aantal threads.
-pass - Welke doorloop momenteel wordt uitgevoerd.
-f - Wordt alleen bij de eerste doorloop gebruikt. Geeft het formaat van het uitvoerbestand aan, d.w.z. MP4 in ons geval.
-movflags faststart - Schakel de snelle start van de video in door een deel van de gegevens naar het begin van het bestand te verplaatsen. Dit maakt het mogelijk om met afspelen te beginnen voordat het bestand volledig is geladen.
GIF maken
Voor het maken van de GIF heb ik de onderstaande opdracht gebruikt. Om de bestandsgrootte te verkleinen, heb ik de GIF geschaald naar 720px breed en 12 fps in plaats van de oorspronkelijke video van 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.gifTestresultaten
Beter één keer zien dan honderd keer lezen, toch? Laten we ervoor zorgen dat AV1 de juiste keuze is voor onze doelen. Ik heb een gratis video Tears Of Steel genomen, beschikbaar hier , en heb het geconverteerd met een ongeveer gelijke bitrate voor de codecs AV1, VP9, H.264. De resultaten zijn hieronder, zodat je ze zelf kunt vergelijken.
Opmerking 1: Als het onderstaande bestand niet laadt, is het misschien tijd om je browser bij te werken. Ik zou een Chromium-gebaseerde browser aanbevelen, zoals Chrome, Vivaldi, Brave of Opera. Hier zijn de laatste gegevens over AV1-ondersteuning
Opmerking 2: Voor Firefox 66 op Linux moet je de vlag instellen media.av1.enabled op de waarde van true in about:config
Opmerking 3: Ik besloot de reguliere GIF's hieronder niet op te nemen vanwege hun grote formaat en het gegevensvolume dat nodig zou zijn om deze pagina te laden! (Wat ironisch zou zijn, aangezien deze pagina gaat over het verminderen van het gegevensvolume op de pagina :)). Maar je kunt de uiteindelijke GIF's hier bekijken
Opmerking van de vertaler: Habr staat geen autoplay of herhaling van het bestand toe, dus je kunt alleen de kwaliteit beoordelen. Je kunt zien hoe de "geanimeerde beelden" er live uitzien in .
Scène 1 @ 200 Kbps
Hier is veel beweging, wat vooral merkbaar is bij lage bitrates. Direct zichtbaar is hoe slecht H.264 presteert bij deze bitrate, er zijn meteen blokken zichtbaar. VP9 verbetert de situatie een beetje, maar blokken zijn nog steeds zichtbaar. AV1 wint duidelijk, met een merkbaar betere afbeelding.
H.264
VP9
AV1
Scène 2 @ 200 Kbps
Hier is veel doorzichtige CGI-inhoud. De resultaten verschillen nu niet zo sterk als de vorige keer, maar over het algemeen lijkt AV1 beter.
H.264
VP9
AV1
Scène 3 @ 100 Kbps
In deze scène verlagen we de bitrate tot 100 Kbps en de resultaten weerspiegelen dat. AV1 houdt zijn voorsprong, zelfs bij lage bitrates!
H.264
VP9
AV1
De kers op de taart
Om het artikel te beëindigen en het aantal bespaarde gegevensverkeer in vergelijking met GIF te voelen - de totale grootte van alle video's hierboven… 1.62 MB!! Klopt. Wat een verdomde 1.708.032 bytes! Ter vergelijking, hier is de omvang van de GIF- en AV1-video voor elke scène.
GIF
AV1
Scène 1
11,7 MB
0,33 MB
Scène 2
7,27 MB
0,18 MB
Scène 3
5,62 MB
0,088 MB
Gewoon verbazingwekkend! Nietwaar?
Opmerking: De bestandsgroottes van VP9 en H264 worden niet weergegeven, aangezien ze praktisch niet verschillen van AV1 door het gebruik van dezelfde bitrate. Het zou overbodig zijn om nog eens twee kolommen toe te voegen met dezelfde groottes, alleen om te benadrukken dat deze codecs veel betere kwaliteit leveren dan GIF met veel kleinere bestandsgroottes.
Bron: habr.com
