Het is 2019 en het wordt tijd dat we voor GIF's kiezen ( - hier hebben we het over de uitspraak in het Engels, voor ons is dit niet relevant - ca. vertaling). GIF's nemen enorm veel ruimte in beslag (meestal meerdere megabytes!), wat, als je een webontwikkelaar bent, volledig in strijd is met je wensen! Als webontwikkelaar wilt u de dingen die gebruikers moeten downloaden minimaliseren, zodat de site snel laadt. Om dezelfde reden verklein je JavaScript, optimaliseer je PNG, JPEG en converteer je soms . Maar wat te doen met de oude GIF?
We hebben geen GIF's nodig waar we heen gaan!
Als het uw doel is om de laadsnelheid van de site te verbeteren, dan moet u GIF's verwijderen! Maar hoe maak je dan bewegende beelden? Het antwoord is video. En in de meeste gevallen krijgt u een betere kwaliteit en een ruimtebesparing van 50-90%! In het leven hebben de meeste dingen hun voor- en nadelen. Wanneer je GIF vervangt door video, zul je meestal geen nadelen kunnen ontdekken.
Weg met alle GIF's!
Gelukkig is het vervangen van GIF's door video's de laatste jaren gebruikelijk, dus alle benodigde tools zijn al in gebruik. In dit bericht zal ik het wiel niet opnieuw uitvinden, maar de bestaande oplossingen slechts lichtjes verbeteren. Dus hier is de essentie:
- Neem een GIF en converteer deze naar een video
- Codeer de video met H.264 of VP9, d.w.z. comprimeer het en verpak het in een MP4- of WebM-container
- Vervangen
<img>met geanimeerde GIF aan<video>met rol - Schakel autoplay in zonder geluid en loop voor een GIF-effect
Het is 2019
Het is nu 2019. De vooruitgang gaat vooruit, en wij moeten die bijhouden. Tot nu toe hebben we twee codec-opties gehad die breed worden ondersteund in alle browsers en videocoderingstools:
- H.264 - geïntroduceerd in 2003 en tegenwoordig het meest gebruikt
- VP9 - verscheen in 2013 en bereikte echter compressieverbeteringen van bijna 50% vergeleken met H.264 niet alles is niet altijd zo rooskleurig
Opmerking: Hoewel H.265 de volgende versie van H.264 is en kan concurreren met VP9, beschouw ik dit niet als gevolg van slechte browserondersteuning, zoals weergegeven op de pagina . Licentiekosten zijn de belangrijkste reden waarom H.265 niet zo wijdverspreid is als H.264 en waarom het Alliance of Open Media-consortium werkt met een royaltyvrije codec, AV1.
Vergeet niet dat het ons doel is om grote GIF's tot de kleinst mogelijke grootte te verkleinen om de laadtijden te versnellen. Het zou een vreemd 2019 zijn als we geen nieuwe standaard voor videocompressie in ons arsenaal hadden. Maar het bestaat en heet AV1. Met AV1 kan dat . Lepota! 🙂
AV1 staat sinds 2019 tot uw dienst!
Op desktops
Onlangs is ondersteuning voor AV1-videodecodering toegevoegd aan desktopversies и . Op dit moment bevat de ondersteuning voor Firefox fouten en kan deze crashes veroorzaken, maar de zaken zouden moeten verbeteren met de toevoeging van al in Firefox 67 ( — ca. vert.). Voor meer informatie over de nieuwe versie lees -
Op smartphones
Er is momenteel geen hardwareondersteuning voor smartphones vanwege het ontbreken van geschikte decoders. U kunt softwarematige decodering uitvoeren, hoewel dit tot een hoger batterijverbruik zal leiden. De eerste mobiele SOC's die AV1-hardwaredecodering ondersteunen, zullen in 2020 verschijnen.
En dan zeggen de lezers van het artikel: “Dus als mobiele telefoons dit nog niet goed ondersteunen, waarom zou je dan AV1 gebruiken?”
AV1 is een vrij nieuwe codec en we staan nog maar aan het begin van de aanpassing ervan. Beschouw dit artikel als de fase ‘terwijl je kookt, zal de menigte volgen’. Desktopondersteuning op zichzelf zal sites voor een deel van het publiek sneller maken. En oude codecs kunnen worden gebruikt als fallback-scenario wanneer AV1 niet wordt ondersteund op het doelapparaat. Maar als gebruikers overstappen op apparaten met AV1-ondersteuning, zal alles klaar zijn. Om dit te bereiken moeten we een videotag maken, zoals hieronder weergegeven, waarmee de browser het gewenste formaat kan selecteren AV1 - >> VP9 - >> H.264. Welnu, als de gebruiker een heel oud apparaat of navigator heeft dat helemaal geen video ondersteunt (wat uiterst onwaarschijnlijk is met H264), dan ziet hij alleen de 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>Oprichting van AV1
Video's maken in AV1 is eenvoudig. en gebruik de onderstaande commando's. We gebruiken 2 passen om de beoogde bitrate te bereiken. Om dit te doen, zullen we ffmpeg twee keer uitvoeren. De eerste keer schrijven we het resultaat naar een niet-bestaand bestand. Hierdoor wordt een logboek gemaakt dat nodig is voor de tweede keer dat ffmpeg wordt uitgevoerd.
# 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 een overzicht van de parameters:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Een GIF maken
Om de GIF te maken, heb ik de onderstaande opdracht gebruikt. Om de grootte te verkleinen, heb ik de GIF geschaald naar 720 px breed en 12 fps in plaats van de originele 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.gifTest resultaten
Het is beter om één keer te zien dan honderd keer te lezen, toch? Laten we ervoor zorgen dat de AV1 de juiste keuze is voor onze doeleinden. Ik heb de gratis Tears Of Steel-video gebruikt die hier beschikbaar is , en converteerde het met ongeveer dezelfde bitsnelheid voor AV1-, VP9- en H.264-codecs. Hieronder vindt u de resultaten, zodat u ze zelf kunt vergelijken.
Notitie 1: Als het onderstaande bestand niet voor u wordt geladen, is het wellicht tijd om uw browser bij te werken. Ik zou een Chromium-gebaseerde browser zoals Chrome, Vivaldi, Brave of Opera aanbevelen. Hier vindt u de nieuwste informatie over AV1-ondersteuning
Notitie 2: Voor Firefox 66 op Linux moet u de vlag instellen media.av1.enabled in betekenis true в about:config
Notitie 3: Ik heb besloten om hieronder geen reguliere GIF's op te nemen vanwege hun grote formaat en de hoeveelheid gegevens die nodig zijn om deze pagina te laden! (Wat ironisch zou zijn, aangezien deze pagina gaat over het verminderen van de hoeveelheid gegevens op een pagina :)). Maar je kunt de laatste GIF's hier zien
Noot van de vertaler: Habr staat niet toe dat je automatisch afspelen inschakelt en het bestand in een lus plaatst, dus je kunt alleen de kwaliteit beoordelen. U kunt live zien hoe de “geanimeerde afbeeldingen” er uit zullen zien .
Scène 1 @ 200 Kbps
Er is hier veel beweging, wat vooral gevoelig is bij lage bitrates. Je ziet meteen hoe slecht H.264 is bij deze bitrate; vierkantjes zijn direct zichtbaar. VP9 verbetert de situatie een beetje, maar de vierkanten zijn nog steeds zichtbaar. AV1 wint duidelijk en levert een duidelijk beter beeld op.
H.264
VP9
AV1
Scène 2 @ 200 Kbps
Er is hier veel doorschijnende CGI-inhoud. De resultaten zijn niet zo verschillend als de vorige keer, maar over het algemeen ziet de AV1 er beter uit.
H.264
VP9
AV1
Scène 3 @ 100 Kbps
In deze scène verlagen we de bitsnelheid naar 100 Kbps en de resultaten zijn consistent. AV1 behoudt zijn leiderschap, zelfs bij lage bitrates!
H.264
VP9
AV1
Kers op de taart
Om dit artikel af te sluiten met een gevoel van de hoeveelheid bespaarde bandbreedte in vergelijking met GIF: de totale grootte van alle video's is hoger... 1.62MB!! Rechts. Een verdomde 1,708,032 bytes! Ter vergelijking zijn hier de GIF- en AV1-videoformaten voor elke scène
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
Gewoon verbluffend! Is het niet?
Opmerking: De bestandsgroottes van VP9 en H264 worden niet gegeven, omdat ze praktisch niet verschillen van AV1 vanwege het gebruik van dezelfde bitrate. Het zou overbodig zijn om nog twee kolommen met dezelfde grootte toe te voegen, alleen maar om te benadrukken dat deze codecs een veel betere kwaliteit produceren dan GIF bij veel kleinere bestandsgroottes.
Bron: www.habr.com