Jetzt ist das Jahr 2019, und es wird Zeit, eine Entscheidung bezüglich GIF zu treffen ( — hier geht es um die Aussprache im Englischen, das ist für uns nicht relevant — Anm. des Übersetzers.). GIFs nehmen enorm viel Platz ein (meist mehrere Megabyte!), was, wenn Sie Webentwickler sind, völlig Ihren Wünschen widerspricht! Als Webentwickler möchten Sie die Dinge minimieren, die die Benutzer herunterladen müssen, damit die Website schnell lädt. Aus demselben Grund minimieren Sie JavaScript, optimieren PNG, JPEG und konvertieren manchmal . Aber was ist mit dem alten GIF?
Dort, wo wir hingehen, werden wir keine GIFs benötigen!
Wenn Ihr Ziel darin besteht, die Ladegeschwindigkeit der Website zu verbessern, dann sollten Sie GIFs loswerden! Aber wie können Sie dann animierte Bilder machen? Die Antwort ist: Video. In den meisten Fällen erzielen Sie eine bessere Qualität und eine Platzersparnis von 50-90%! Im Leben haben die meisten Dinge ihre Vor- und Nachteile. Wenn Sie GIF durch Video ersetzen, finden Sie meist keine Nachteile.
Weg mit allen GIFs!
Glücklicherweise war der Austausch von GIF durch Video in den letzten Jahren gang und gäbe, sodass alle notwendigen Werkzeuge bereits verfügbar sind. In diesem Beitrag werde ich das Rad nicht neu erfinden, sondern lediglich die bestehenden Lösungen etwas verbessern. Und hier ist der Kern:
- Nehmen Sie ein GIF und konvertieren Sie es in ein Video
- Kodieren Sie das Video mit H.264 oder VP9, d.h. komprimieren Sie es und verpacken Sie es in ein MP4- oder WebM-Container
- Ersetzen Sie
<img>mit animiertem GIF aufmit einem Clip - Aktivieren Sie die stumme Autoplay-Funktion und wiederholen Sie es, um den GIF-Effekt zu erzielen
Jetzt ist das Jahr 2019
Jetzt ist das Jahr 2019. Der Fortschritt schreitet voran, und wir dürfen nicht zurückbleiben. Bisher haben wir zwei Codecs gehabt, die in allen Browsern und Videoencodierungswerkzeugen weit verbreitet sind:
- H.264 — ein Codec, der 2003 eingeführt wurde und heute am weitesten verbreitet ist
- VP9 — ein Codec, der 2013 erschien und eine fast 50-prozentige Verbesserung der Kompression im Vergleich zu H.264 erreicht hat, obwohl nicht alles immer so rosig ist
Hinweis: obwohl der Standard H.265 die nächste Version von H.264 ist und mit VP9 konkurrieren kann, betrachte ich ihn wegen der schwachen Unterstützung durch Browser nicht, was auf der Seite gezeigt wird. . Lizenzkosten sind der Hauptgrund, warum sich H.265 nicht so verbreitet hat wie H.264, und weshalb das Konsortium Alliance of Open Media mit einem Codecs ohne Gebühren - AV1 - arbeitet.
Denken Sie daran, dass unser Ziel darin besteht, riesige GIFs auf die kleinstmögliche Größe zu reduzieren, um das Laden zu beschleunigen. Es wäre ein seltsames Jahr 2019 gewesen, wenn wir keinen neuen Standard zur Videokomprimierung in unserem Repertoire gehabt hätten. Aber das haben wir, und er heißt AV1. Mit AV1 kann man . Wunderbar! 🙂
AV1 steht Ihnen seit 2019 zur Verfügung!
Auf Desktop-Computern
Kürzlich wurde die Unterstützung für die Dekodierung von AV1-Videos in den Desktop-Versionen hinzugefügt und . Derzeit gibt es in Firefox Probleme mit der Unterstützung, die zu Abstürzen führen kann, aber die Situation sollte sich mit der Einführung des schon in Firefox 67 ( — Anm. d. Übersetzer). Für Details zur neuen Version lesen Sie -
Auf Smartphones
Derzeit gibt es keine hardwareseitige Unterstützung auf Smartphones aufgrund fehlender entsprechender Dekoder. Softwaredekodierung ist möglich, führt aber zu einem höheren Akkuverbrauch. Die ersten mobilen SOCs mit Unterstützung für die hardwareseitige Dekodierung von AV1 werden 2020 verfügbar sein.
Und hier sind die Leser des Artikels: „Wenn mobile Geräte momentan nicht gut unterstützen, warum sollten wir dann AV1 verwenden?“
AV1 ist ein recht neuer Codec, und wir stehen noch am Anfang seiner Anpassung. Betrachten Sie diesen Artikel als eine Phase „solange Sie vorbereiten, kommt das Publikum“. Die Unterstützung auf Desktop-Computern wird bereits die Ladezeiten für einen Teil des Publikums verbessern. Ältere Codecs können als Fallback-Szenario verwendet werden, wenn AV1 auf dem Zielgerät nicht unterstützt wird. Aber während die Nutzer auf Geräte mit AV1-Unterstützung umsteigen, wird bereits alles bereit sein. Um dies zu erreichen, müssen wir einen Video-Tag erstellen, wie unten gezeigt, der dem Browser ermöglicht, das bevorzugte Format auszuwählen - AV1 ->> VP9 ->> H.264. Wenn der Benutzer jedoch ein ganz altes Gerät oder einen Browser hat, der Videos überhaupt nicht unterstützt (was bei H264 sehr unwahrscheinlich ist), wird er einfach ein GIF sehen.
<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/RollendeCredits.vp9.webm" type="video/webm">
<source src="media/RollingCredits.x264.mp4" type="video/mp4">
<img src="media/RollingCredits.gif">
</video>Erstellung von AV1
Ein Video in AV1 zu erstellen ist einfach. und verwenden Sie die untenstehenden Befehle. Wir verwenden 2 Durchgänge, um die gewünschte Bitrate zu erreichen. Dazu werden wir ffmpeg zweimal ausführen. Beim ersten Mal schreiben wir das Ergebnis in eine nicht existente Datei. Dies erstellt ein Protokoll, das für den zweiten Durchlauf von ffmpeg benötigt wird.
# 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 ist die Erklärung der Parameter:
-i - Eingabedatei.
-pix_fmt - Verwendeter Farbinformationenformat 4:2:0 für das Video. Es gibt viele andere mögliche Formate, aber 4:2:0 ist am kompatibelsten.
-c:v - Welchen Codec verwenden, in unserem Fall - AV1.<br />
-b:v - Der durchschnittliche Bitrate, die wir erreichen möchten.
-filter:v scale - Der ffmpeg Skalierungsfilter wird verwendet, um die Videoauflösung zu reduzieren. Wir setzen X:-1, was ffmpeg anweist, die Breite auf X zu reduzieren und das Seitenverhältnis beizubehalten.
-strict experimental - Muss angegeben werden, da AV1 ein relativ neuer Codec ist.
-cpu-used - Furchtbar benannter Parameter, der tatsächlich verwendet wird, um die Videoqualität auszuwählen. Mögliche Werte 0-4. Je kleiner der Wert, desto besser die Qualität und entsprechend mehr Zeit für die Kodierung.
-tile-columns - Zum Einsatz mehrerer Threads. Weist AV1 an, das Video in separate Spalten zu unterteilen, die unabhängig kodiert werden können, um die CPU-Nutzung zu optimieren.
-row-mt - Dasselbe wie der vorherige Parameter, aber unterteilt auch in Zeilen innerhalb von Spalten.
-threads - Anzahl der Threads.
-pass - Welcher Durchgang gerade durchgeführt wird.
-f - Wird nur beim ersten Durchgang verwendet. Gibt das Format der Ausgabedatei an, d.h. MP4 in unserem Fall.
-movflags faststart - Aktiviert den schnellen Start des Videos, indem ein Teil der Daten an den Anfang der Datei verschoben wird. Dies ermöglicht den Start der Wiedergabe vor dem vollständigen Laden der Datei.
GIF-Erstellung
Zur Erstellung des GIFs habe ich den folgenden Befehl verwendet. Um die Größe zu reduzieren, habe ich das GIF auf 720px Breite und 12 fps anstelle der ursprünglichen 24 fps des Videos skaliert.
./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.gifTestergebnisse
Man sieht besser einmal, als hundertmal zu lesen, oder? Lassen Sie uns sicherstellen, dass AV1 die richtige Wahl für unsere Ziele ist. Ich habe das kostenlose Video Tears Of Steel verwendet, das hier verfügbar ist , und habe es konvertiert und dabei ungefähr die gleiche Bitrate für die Codecs AV1, VP9, H.264 verwendet. Die Ergebnisse sind unten, sodass Sie sie selbst vergleichen können.
Hinweis 1: Wenn die untenstehende Datei bei Ihnen nicht lädt, müssen Sie möglicherweise Ihren Browser aktualisieren. Ich würde einen auf Chromium basierenden Browser empfehlen, wie Chrome, Vivaldi, Brave oder Opera. Hier sind die aktuellen Informationen zur AV1-Unterstützung
Hinweis 2: Für Firefox 66 unter Linux müssen Sie das Flag media.av1.enabled auf den Wert true in about:config
Hinweis 3: Ich habe beschlossen, die normalen GIFs unten nicht einzuschließen, aufgrund ihrer großen Größe und des Datenaufwands, der zum Laden dieser Seite erforderlich wäre! (Was ironisch wäre, denn diese Seite handelt von der Reduzierung der Datenmenge auf der Seite :)). Aber Sie können die endgültigen GIFs hier sehen
Hinweis des Übersetzers: Habr erlaubt es nicht, die automatische Wiedergabe zu aktivieren und die Datei zu wiederholen, daher kann nur die Qualität bewertet werden. Sehen Sie, wie die "animierten Bilder" in Echtzeit aussehen werden in .
Szene 1 @ 200 Kbps
Hier gibt es viele Bewegungen, was besonders bei niedrigen Bitraten bemerkbar ist. Sofort ist sichtbar, wie schlecht H.264 bei dieser Bitrate ist, sofort erkennt man die Blöcke. VP9 verbessert die Situation etwas, aber die Blöcke sind immer noch sichtbar. AV1 gewinnt eindeutig und bietet ein offensichtlich besseres Bild.
H.264
VP9
AV1
Szene 2 @ 200 Kbps
Hier gibt es viel durchscheinenden CGI-Inhalt. Die Ergebnisse unterscheiden sich nicht mehr so stark wie beim letzten Mal, aber insgesamt sieht AV1 besser aus.
H.264
VP9
AV1
Szene 3 @ 100 Kbps
In dieser Szene reduzieren wir die Bitrate auf 100 Kbps und die Ergebnisse entsprechen dem. AV1 behält die Führung auch bei niedrigen Bitraten!
H.264
VP9
AV1
Die Kirsche auf der Sahne
Um den Artikel abzuschließen und die Menge an gespartem Datenverkehr im Vergleich zu GIF zu fühlen – die Gesamtgröße aller oben genannten Videos… 1,62 MB!! Richtig. Irgendwelche verdammten 1.708.032 Bytes! Zum Vergleich, hier sind die Größen der GIF- und AV1-Videos für jede der Szenen.
GIF
AV1
Szene 1
11,7 MB
0,33 MB
Szene 2
7,27 MB
0,18 MB
Szene 3
5,62 MB
0,088 MB
Einfach beeindruckend, oder?
Hinweis: Die Dateigrößen von VP9 und H264 wurden nicht angegeben, da sie fast keine Unterschiede zu AV1 aufweisen, da die gleiche Bitrate verwendet wird. Es wäre überflüssig, zwei weitere Spalten mit identischen Größen hinzuzufügen, nur um zu betonen, dass diese Codecs eine viel bessere Qualität als GIF bei deutlich kleineren Dateigrößen liefern.
Quelle: habr.com
