Jetzt ist das Jahr 2019 und es ist Zeit für uns, eine Entscheidung bezüglich GIF zu treffen ( nein, es geht nicht um diese Entscheidung! Hier werden wir uns nie einigen! - hier sprechen wir über die Aussprache auf Englisch, für uns ist sie nicht relevant - ca. GIFs nehmen sehr viel Platz ein (normalerweise ein paar Megabyte!). Wenn Sie ein Webentwickler sind, widerspricht dies völlig Ihren Wünschen! Als Webentwickler möchten Sie die Dinge minimieren, die Benutzer herunterladen müssen, damit die Site schnell geladen wird. Aus dem gleichen Grund minimieren Sie JavaScript, optimieren PNG, JPEG und konvertieren manchmal JPEG in WebP . Aber was tun mit dem alten GIF?
Wo wir hingehen, brauchen wir keine GIFs!
Wenn Sie die Ladegeschwindigkeit der Website verbessern möchten, müssen Sie GIF entfernen! Aber wie macht man dann animierte Bilder? Die Antwort ist Video. In den meisten Fällen erzielen Sie die beste Qualität und Platzersparnis von 50-90%! Im Leben haben die meisten Dinge ihre Vor- und Nachteile. Wenn Sie GIFs durch Videos ersetzen, können die häufigsten Nachteile nicht gefunden werden.
Nieder mit all den Gifs!
Glücklicherweise war es in den letzten Jahren üblich, GIFs durch Videos zu ersetzen, sodass alle erforderlichen Tools bereits verwendet werden. In diesem Beitrag werde ich das Rad nicht neu erfinden, sondern die bestehenden Lösungen nur geringfügig verbessern. Also hier ist das Wesentliche:
- Nehmen Sie ein GIF und konvertieren Sie es in ein Video
- Codieren Sie das Video mit H.264 oder VP9, d. H. Drücken Sie es zusammen und verpacken Sie es in einem MP4- oder WebM-Container
- Ersetzen Sie
<img> durch animiertes GIF durch <video> durch Film - Aktivieren Sie die stille automatische Wiedergabe und den Loop, um einen GIF-Effekt zu erzielen
Google hat eine gute Dokumentation, die den Prozess beschreibt.
Jetzt ist 2019
Jetzt ist das Jahr 2019. Der Fortschritt schreitet voran, und wir müssen mithalten. Bisher gab es zwei Versionen von Codecs, die in allen Browsern und Videokodierungswerkzeugen weitgehend unterstützt werden:
- H.264 - 2003 eingeführt und heute am weitesten verbreitet
- VP9 - erschien 2013 und erreichte eine Verbesserung der Kompression um fast 50% im Vergleich zu H.264, obwohl, wie hier gesagt, nicht alles so rosig ist und nicht immer ist
Hinweis: Obwohl der H.265-Standard die nächste Version von H.264 ist und mit VP9 konkurrieren kann, wird dies aufgrund der schlechten Browserunterstützung, die auf der Seite https://caniuse.com/#feat=hevc angezeigt wird, nicht berücksichtigt. Lizenzkosten sind der Hauptgrund, warum H.265 nicht so weit verbreitet ist wie H.264 und warum das Konsortium der Alliance of Open Media mit einem lizenzfreien Codec arbeitet - mit AV1.
Denken Sie daran, dass unser Ziel darin besteht, große GIFs auf die kleinstmögliche Größe zu reduzieren, um das Laden zu beschleunigen. Es wäre ein seltsames Jahr 2019, wenn wir keinen neuen Standard für die Videokomprimierung in unserem Arsenal hätten. Aber er ist und heißt AV1. Mit AV1 können Sie die Komprimierung im Vergleich zu VP9 um ca. 30% verbessern . Lepota! :) :)
AV1 seit 2019 zu Ihren Diensten!
Auf Desktops
Vor kurzem wurde die Unterstützung für das Dekodieren von AV1-Videos auf Desktop-Versionen von Google Chrome 70 und Mozilla Firefox 65 hinzugefügt. Momentan ist die Unterstützung in Firefox fehlerhaft und kann zu Abstürzen führen. Mit dem Hinzufügen des dav1d-Decoders in Firefox 67 sollten sich die Dinge jedoch ändern ( bereits verfügbar , aber die Unterstützung ist erschienen - ca. übersetzt) . Für Details zur neuen Version lesen Sie - dav1d 0.3.0 Release: noch schneller!
Auf Smartphones
Bei Smartphones fehlt derzeit die Hardwareunterstützung, da keine geeigneten Decoder vorhanden sind. Sie können Software-Dekodierungen durchführen, dies führt jedoch zu einem erhöhten Batterieverbrauch. Der erste mobile SOC mit Unterstützung für die Hardware-Dekodierung von AV1 wird 2020 erscheinen.
Und hier sind die Leser des Artikels: "Wenn das Handy noch nicht normal unterstützt, warum dann AV1 verwenden?"
AV1 ist ein ziemlich neuer Codec, und wir stehen ganz am Anfang seiner Anpassung. Stellen Sie sich diesen Artikel als die Phase „Während Sie kochen, ziehen sich die Leute hoch“ vor. Die Desktop-Unterstützung allein beschleunigt Websites für einen Teil des Publikums. Und alte Codecs können als Fallback-Skript verwendet werden, wenn AV1 auf dem Zielgerät nicht unterstützt wird. Wenn Benutzer jedoch zu Geräten mit Unterstützung für AV1 wechseln, ist alles bereit. Um dies zu erreichen, müssen wir wie unten gezeigt ein Video-Tag erstellen, mit dem der Browser das bevorzugte Format auswählen kann - AV1 - >> VP9 - >> H.264 . Wenn der Benutzer ein völlig altes Gerät oder einen alten Navigator hat, den das Video überhaupt nicht unterstützt (was mit H264 wahrscheinlich nicht gestohlen wird) , sieht er nur ein 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
Das Erstellen eines Videos in AV1 ist einfach. Laden Sie hier den neuesten ffmpeg-Build für Ihr System herunter und verwenden Sie die folgenden Befehle. Wir verwenden 2 Durchgänge, um die Zielbitrate zu erreichen. Dazu führen wir ffmpeg zweimal aus. Das erste Mal schreiben wir das Ergebnis in eine nicht vorhandene Datei. Dadurch wird das Protokoll erstellt, 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.mp4
Hier ist eine Beschreibung der Parameter:
-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 - , . .
GIF-Erstellung
Um das GIF zu erstellen, habe ich den folgenden Befehl verwendet. Um die Größe zu reduzieren, habe ich das GIF auf 720px Breite und 12 fps anstelle des ursprünglichen 24 fps 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.gif
Testergebnisse
Lieber einmal sehen als hundertmal lesen, oder? Stellen wir sicher, dass AV1 die richtige Wahl für unsere Zwecke ist. Ich habe das kostenlose Tears Of Steel-Video, das hier unter https://mango.blender.org/ verfügbar ist, mit ungefähr der gleichen Bitrate für die Codecs AV1, VP9 und H.264 konvertiert. Die Ergebnisse sind unten aufgeführt, sodass Sie sie selbst vergleichen können.
Hinweis 1: Wenn die folgende Datei nicht von Ihnen heruntergeladen wird, müssen Sie möglicherweise Ihren Browser aktualisieren. Ich würde einen Chromium-basierten Browser wie Chrome, Vivaldi, Brave oder Opera empfehlen. Hier finden Sie die neuesten Supportinformationen für AV1 https://caniuse.com/#feat=av1
Hinweis 2: Für Firefox 66 unter Linux müssen Sie das Flag media.av1.enabled in about:config auf true
Hinweis 3: Ich habe mich entschieden, keine regulären GIFs einzuschließen, da diese groß sind und möglicherweise viele Daten zum Laden dieser Seite erforderlich sind. (Was ironisch wäre, da es auf dieser Seite darum geht, die Datenmenge auf der Seite zu reduzieren :)). Die endgültigen GIFs finden Sie jedoch hier https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs
Anmerkung des Übersetzers: In Habr können Sie die automatische Wiedergabe und das Schleifen der Datei nicht aktivieren, sodass nur die Qualität bewertet wird. Wie „animierte Bilder“ live aussehen, können Sie im Originalartikel sehen .
Szene 1 bei 200 Kbit / s
Es gibt viel Bewegung, die besonders bei niedrigen Bitraten empfindlich ist. Sie können sofort sehen, wie schlecht H.264 auf dieser Bitrate sind, Quadrate sind sofort sichtbar. VP9 verbessert die Situation ein wenig, aber die Quadrate sind immer noch sichtbar. AV1 gewinnt klar und liefert offensichtlich das beste Bild.
H.264
VP9
AV1
Szene 2 bei 200 Kbit / s
Es gibt viele durchscheinende CGI-Inhalte. Die Ergebnisse unterscheiden sich nicht mehr so stark wie beim letzten Mal, aber insgesamt sieht der AV1 besser aus.
H.264
VP9
AV1
Szene 3 bei 100 Kbit / s
In dieser Szene drehen wir die Bitrate auf 100 Kbit / s herunter und die Ergebnisse sind konsistent. AV1 behält die Führung bei niedrigen Bitraten!
H.264
VP9
AV1
Kirsche auf dem Kuchen
Um den Artikel zu vervollständigen, spüren Sie die Menge des gespeicherten Datenverkehrs im Vergleich zu GIF - die Gesamtgröße aller Videos ist höher ... 1,62 MB !! Richtig. Einige verdammte 1.708.032 Bytes! Zum Vergleich ist hier die Größe der GIF- und AV1-Videos für jede der Szenen angegeben
Einfach umwerfend! Oder?
Hinweis: Die Dateigrößen VP9 und H264 werden nicht angezeigt, da sie sich aufgrund der Verwendung derselben Bitrate praktisch nicht von AV1 unterscheiden. Es wäre überflüssig, zwei weitere Spalten mit denselben Abmessungen hinzuzufügen, nur um zu betonen, dass diese Codecs eine viel bessere Qualität als GIFs mit viel kleineren Dateigrößen liefern.