Jetzt ist das Jahr 2019 und es wird Zeit, eine Entscheidung über GIF ( — es geht um die Aussprache im Englischen, das ist für uns nicht relevant — Anmerkung des Übersetzers.). GIFs nehmen eine enorme Menge an Speicherplatz ein (meist mehrere Megabyte!), was, falls Sie Webentwickler sind, völlig Ihren Wünschen widerspricht! Als Webentwickler möchten Sie die Dinge minimieren, die die Nutzer herunterladen müssen, damit die Website schnell lädt. Aus demselben Grund minimieren Sie JavaScript, optimieren PNG, JPEG und manchmal konvertieren Sie . Aber was ist mit dem alten GIF?
Dorthin, wo wir gehen, brauchen wir keine GIFs!
Wenn Ihr Ziel ist, die Ladegeschwindigkeit der Website zu verbessern, sollten GIFs vermieden werden! Aber wie macht man dann animierte Bilder? Die Antwort ist Video. In den meisten Fällen erhalten Sie eine bessere Qualität und sparen 50-90% Speicherplatz! Im Leben haben die meisten Dinge ihre Vor- und Nachteile. Wenn Sie GIFs durch Videos ersetzen, finden sich meistens keine nennenswerten Nachteile.
Nichts für GIFs mehr!
Glücklicherweise ist der Austausch von GIFs durch Videos seit einigen Jahren eine gängige Praxis, sodass bereits alle erforderlichen Werkzeuge zur Verfügung stehen. In diesem Beitrag werde ich das Rad nicht neu erfinden, sondern lediglich bestehende Lösungen leicht verbessern. Hier ist der Kernpunkt:
- Nehmen Sie ein GIF und konvertieren Sie es in ein Video.
- Kodieren Sie das Video mit H.264 oder VP9, das heißt, komprimieren Sie es und packen Sie es in ein MP4- oder WebM-Container.
- Ersetzen Sie
<img>von einem animierten GIF zueinem Video. - Aktivieren Sie die stumme automatisierte Wiedergabe und wiederholen Sie es, um den GIF-Effekt zu erzielen.
Es ist jetzt das Jahr 2019.
Es ist jetzt das Jahr 2019. Der Fortschritt schreitet voran, und wir müssen Schritt halten. Bisher hatten wir zwei Codec-Optionen, die in allen Browsern und Video-Encoding-Tools weitgehend unterstützt werden:
- H.264 — 2003 eingeführt und heute am weitesten verbreitet.
- VP9 — 2013 eingeführt und hat eine fast 50%ige Verbesserung der Kompression im Vergleich zu H.264 erreicht, obwohl nicht alles immer so rosig ist.
Hinweis: Obwohl der H.265-Standard die nächste Version von H.264 ist und mit VP9 konkurrieren kann, ziehe ich ihn aufgrund schwacher Unterstützung durch Browser nicht in Betracht, was auf der Seite gezeigt wird. . Die Lizenzkosten sind der Hauptgrund, warum H.265 nicht so weit verbreitet ist wie H.264 und warum das Alliance of Open Media-Konsortium mit einem gebührenfreien Codec — AV1 — arbeitet.
Denken Sie daran, dass unser Ziel darin besteht, große GIFs auf die kleinste mögliche Größe zu reduzieren, um die Ladezeiten zu verbessern. Es wäre ein seltsames Jahr 2019, wenn wir nicht einen neuen Standard für die Videokompression hätten. Aber wir haben ihn, und er heißt AV1. Mit AV1 kann man Wunderbar! 🙂
AV1 steht Ihnen seit 2019 zur Verfügung!
Auf Desktops
Kürzlich wurde die Unterstützung für die Dekodierung von AV1-Videos in den Desktop-Versionen hinzugefügt. und . Derzeit hat die Unterstützung in Firefox einige Bugs und kann zu Abstürzen führen, aber das sollte sich mit der Einführung von in Firefox 67 ändern, der bereits veröffentlicht wurde und jetzt Unterstützung bietet. ( — Anmerkung des Übersetzers).dav1d 0.3.0 Release: noch schneller!
Auf Smartphones
Aktuell gibt es für Smartphones keine hardwareseitige Unterstützung aufgrund fehlender entsprechender Decoder. Es besteht die Möglichkeit einer softwarebasierten Dekodierung, allerdings führt dies zu einem höheren Batterieverbrauch. Die ersten mobilen SOCs mit Unterstützung für die hardwarebasierte Dekodierung von AV1 werden im Jahr 2020 erwartet.
An dieser Stelle fragen sich die Leser der Artikel: „Wenn mobile Geräte die Unterstützung noch nicht richtig bieten, warum sollten wir dann AV1 verwenden?“
AV1 ist ein relativ neuer Codec, und wir stehen erst am Anfang seiner Anpassung. Betrachten Sie diesen Artikel als eine Phase des „Während Sie vorbereiten, kommen die anderen nach“. Die Unterstützung auf Desktops wird die Ladezeiten für einen Teil der Nutzer bereits verbessern. Ältere Codecs können als Fallback-Szenario genutzt werden, wenn AV1 auf dem Zielgerät nicht unterstützt wird. Doch während sich die Nutzer auf Geräte mit AV1-Unterstützung umstellen, wird alles bereit sein. Um dies zu erreichen, müssen wir ein Video-Tag erstellen, wie unten gezeigt, das es dem Browser ermöglicht, das bevorzugte Format auszuwählen — AV1 ->> VP9 ->> H.264. Wenn der Nutzer jedoch ein sehr altes Gerät oder eine nicht unterstützende Software verwendet, (was bei H264 eher unwahrscheinlich ist)., dann sieht er einfach das 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>AV1 erstellen
Es ist nicht schwierig, ein Video in AV1 zu erstellen. und verwenden Sie die untenstehenden Befehle. Wir verwenden 2 Durchgänge, um die Ziel-Bitrate zu erreichen. Dafür werden wir ffmpeg zweimal ausführen. Beim ersten Mal speichern wir das Ergebnis in einer nicht existierenden Datei. Das wird ein Protokoll erstellen, das wir für den zweiten Durchlauf von ffmpeg benötigen.
# 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 - Wir verwenden das Format 4:2:0, um Farbinformationen im Video auszuwählen. Es gibt viele andere mögliche Formate, aber 4:2:0 ist am kompatibelsten.
-c:v - Welcher Codec verwendet werden soll, in unserem Fall - AV1.<br />
-b:v – Der durchschnittliche Bitrate, den wir erreichen möchten.
-filter:v scale - Der ffmpeg-Skalierungsfilter wird verwendet, um die Videoauflösung zu verringern. 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 - Schlecht benannter Parameter, der tatsächlich zur Auswahl der Videoqualität verwendet wird. Mögliche Werte sind 0-4. Je niedriger der Wert, desto besser die Qualität und entsprechend länger die benötigte Zeit für die Codierung.
-tile-columns - Zur Nutzung mehrerer Threads. Weist AV1 an, das Video in separate Spalten zu zerlegen, die unabhängig neu codiert werden können, um die CPU-Nutzung zu optimieren.
-row-mt – Entspricht dem vorherigen Parameter, zerlegt jedoch auch in Zeilen innerhalb der Spalten.
-threads - Anzahl der Threads.
-pass - Welcher Durchgang jetzt durchgeführt wird.
-f - Wird nur beim ersten Durchgang verwendet. Gibt das Ausgabeformat an, also MP4 in unserem Fall.
-movflags faststart - Aktiviert den Schnellstart des Videos, indem ein Teil der Daten an den Anfang der Datei verschoben wird. Dies ermöglicht das Abspielen, bevor die Datei vollständig geladen ist.
GIF erstellen
Für die 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 skaliert, anstelle der ursprünglichen 24 fps des Videos.
./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 es besser einmal, als hundertmal zu lesen, oder? Lassen Sie uns sicherstellen, dass AV1 die richtige Wahl für unsere Zwecke ist. Ich habe ein kostenloses Video von Tears Of Steel verwendet, das hier verfügbar ist , und es mit ungefähr der gleichen Bitrate für die Codecs AV1, VP9, H.264 konvertiert. Die Ergebnisse sind unten, sodass Sie sie selbst vergleichen können.
Hinweis 1: Wenn die Datei unten bei Ihnen nicht geladen wird, sollten Sie möglicherweise Ihren Browser aktualisieren. Ich würde einen Chromium-basierten Browser empfehlen, wie Chrome, Vivaldi, Brave oder Opera. Hier sind die neuesten Informationen zur Unterstützung von AV1
Hinweis 2: Für Firefox 66 unter Linux müssen Sie das Flag media.av1.enabled auf true in about:config
Hinweis 3: Ich habe mich entschieden, die regulären GIFs aufgrund ihrer großen Größe und des Datenvolumens, das für das Laden dieser Seite erforderlich sein könnte, nicht einzufügen! (Ironischerweise handelt diese Seite von der Reduzierung des Datenvolumens :). Aber Sie können die finalen GIFs hier ansehen.
Hinweis des Übersetzers: Habr erlaubt es nicht, die Autoplay-Funktion zu aktivieren oder die Datei zu schleifen, daher kann nur die Qualität bewertet werden. Sie können die "animierten Bilder" in Echtzeit in .
Szene 1 @ 200 Kbps
Hier gibt es viel Bewegung, was bei niedrigen Bitraten besonders auffällig ist. Sofort sieht man, wie schlecht H.264 bei dieser Bitrate ist; die Blöcke sind sofort sichtbar. VP9 verbessert die Situation etwas, aber die Blöcke sind weiterhin sichtbar. AV1 gewinnt eindeutig, da es ein offensichtlich besseres Bild liefert.
H.264
VP9
AV1
Szene 2 @ 200 Kbps
Hier gibt es viele durchsichtige CGI-Inhalte. 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 senken wir die Bitrate auf 100 Kbps und die Ergebnisse entsprechen dem. AV1 behält auch bei niedrigen Bitraten die Führung!
H.264
VP9
AV1
Das Sahnehäubchen
Um den Artikel abzuschließen, spüren wir die Menge des eingesparten Traffics im Vergleich zu GIFs – die Gesamtgröße aller Videos beträgt mehr als… 1,62 MB!! Richtig. Ganze 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 sind nicht aufgeführt, da sie praktisch identisch mit AV1 sind, 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 wesentlich kleineren Dateigrößen liefern.
Quelle: habr.com
