Wir schreiben das Jahr 2019 und es ist an der Zeit, dass wir uns für GIFs entscheiden ( - hier geht es um die Aussprache im Englischen, für uns ist das nicht relevant - ca. Übersetzung). GIFs beanspruchen sehr viel Platz (normalerweise mehrere Megabyte!), was für Sie als Webentwickler völlig im Widerspruch zu Ihren Wünschen steht! Als Webentwickler möchten Sie den Downloadbedarf der Benutzer auf ein Minimum beschränken, damit die Website schnell geladen wird. Aus dem gleichen Grund minimieren Sie JavaScript, optimieren PNG, JPEG und konvertieren manchmal . Aber was tun mit dem alten GIF?
Wo wir hingehen, werden wir keine GIFs brauchen!
Wenn Ihr Ziel darin besteht, die Ladegeschwindigkeit der Website zu verbessern, müssen Sie GIFs loswerden! Aber wie macht man dann animierte Bilder? Die Antwort ist Video. Und in den meisten Fällen erhalten 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, werden Sie in den meisten Fällen keine Nachteile finden.
Nieder mit allen GIFs!
Glücklicherweise ist es in den letzten Jahren üblich geworden, GIFs durch Videos zu ersetzen, sodass alle notwendigen Tools bereits im Einsatz sind. In diesem Beitrag werde ich das Rad nicht neu erfinden, sondern die bestehenden Lösungen nur geringfügig verbessern. Hier also das Wesentliche:
- 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 packen Sie es in einen MP4- oder WebM-Container
- Ersetzen
<img>mit animiertem GIF<video>mit Rolle - Aktivieren Sie die automatische Wiedergabe ohne Ton und Loop für einen GIF-Effekt
Es ist 2019
Es ist jetzt 2019. Der Fortschritt schreitet voran, und wir müssen mit ihm Schritt halten. Bisher hatten wir zwei Codec-Optionen, die von allen Browsern und Videokodierungstools weitgehend unterstützt werden:
- H.264 - 2003 eingeführt und heute am weitesten verbreitet
- VP9 - erschien 2013 und erreichte im Vergleich zu H.50 allerdings eine Komprimierungsverbesserung von fast 264 % Nicht alles ist nicht immer so rosig
Hinweis: Obwohl H.265 die nächste Version von H.264 ist und mit VP9 konkurrieren kann, halte ich dies aufgrund der schlechten Browserunterstützung, wie auf der Seite gezeigt, nicht für möglich . Lizenzkosten sind der Hauptgrund dafür, dass H.265 nicht so weit verbreitet ist wie H.264 und warum das Alliance of Open Media-Konsortium mit einem lizenzfreien Codec, AV1, arbeitet.
Denken Sie daran: Unser Ziel ist es, große GIFs auf die kleinstmögliche Größe zu verkleinern, um die Ladezeiten zu verkürzen. Es wäre ein seltsames Jahr 2019, wenn wir nicht einen neuen Standard für die Videokomprimierung in unserem Arsenal hätten. Aber es existiert und heißt AV1. Mit AV1 ist das möglich . Lepota! 🙂
AV1 steht Ihnen seit 2019 zur Verfügung!
Auf Desktops
Kürzlich wurde den Desktop-Versionen Unterstützung für die AV1-Videodekodierung hinzugefügt и . Im Moment ist die Firefox-Unterstützung fehlerhaft und kann zu Abstürzen führen, aber mit der Hinzufügung von sollte sich die Situation verbessern bereits in Firefox 67 ( - ca. übersetzt). Einzelheiten zur neuen Version finden Sie hier:
Auf Smartphones
Aufgrund fehlender geeigneter Decoder gibt es derzeit keine Hardware-Unterstützung für Smartphones. Sie können eine Software-Dekodierung durchführen, allerdings führt dies zu einem erhöhten Batterieverbrauch. Die ersten mobilen SOCs, die die AV1-Hardware-Dekodierung unterstützen, werden 2020 erscheinen.
Und dann fragen sich die Leser des Artikels: „Wenn Mobiltelefone es noch nicht richtig unterstützen, warum dann AV1 verwenden?“
AV1 ist ein ziemlich neuer Codec, und wir stehen noch ganz am Anfang seiner Anpassung. Betrachten Sie diesen Artikel als die Phase „Während Sie kochen, wird die Menge Ihnen folgen“. Die Desktop-Unterstützung allein wird die Websites für einen Teil des Publikums beschleunigen. Und alte Codecs können als Fallback-Szenario verwendet werden, wenn AV1 auf dem Zielgerät nicht unterstützt wird. Aber wenn Benutzer auf Geräte mit AV1-Unterstützung umsteigen, ist alles bereit. Um dies zu erreichen, müssen wir wie unten gezeigt ein Video-Tag erstellen, das es dem Browser ermöglicht, sein bevorzugtes Format auszuwählen − AV1 - >> VP9 - >> H.264. Nun, wenn der Benutzer ein sehr altes Gerät oder Navi hat, das Video überhaupt nicht unterstützt (was bei H264 äußerst unwahrscheinlich ist), dann sieht er nur 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>Erstellung von AV1
Das Erstellen von Videos in AV1 ist einfach. und verwenden Sie die folgenden Befehle. Wir verwenden 2 Durchgänge, um die Zielbitrate zu erreichen. Dazu führen wir ffmpeg zweimal aus. Beim ersten Mal schreiben wir das Ergebnis in eine nicht existierende Datei. Dadurch wird ein Protokoll erstellt, das für die zweite Ausführung 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 eine Aufschlüsselung 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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
GIFs erstellen
Um das GIF zu erstellen, habe ich den folgenden Befehl verwendet. Um die Größe zu reduzieren, habe ich das GIF auf eine Breite von 720 Pixel und 12 Bilder pro Sekunde skaliert, anstatt auf das ursprüngliche Video mit 24 Bildern pro Sekunde.
./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
Es ist besser, einmal zu sehen, als hundertmal zu lesen, oder? Stellen wir sicher, dass der AV1 die richtige Wahl für unsere Zwecke ist. Ich habe das kostenlose Tears Of Steel-Video aufgenommen, das hier verfügbar ist , und konvertierte es mit ungefähr der gleichen Bitrate für die Codecs AV1, VP9 und H.264. Die Ergebnisse finden Sie unten, damit Sie sie selbst vergleichen können.
Anmerkung 1: Wenn die folgende Datei nicht geladen wird, ist es möglicherweise an der Zeit, Ihren Browser zu aktualisieren. Ich würde einen Chromium-basierten Browser wie Chrome, Vivaldi, Brave oder Opera empfehlen. Hier finden Sie die neuesten Informationen zur AV1-Unterstützung
Anmerkung 2: Für Firefox 66 unter Linux müssen Sie das Flag setzen media.av1.enabled in die Bedeutung true в about:config
Anmerkung 3: Ich habe mich entschieden, unten keine regulären GIFs aufzunehmen, da sie groß sind und die zum Laden dieser Seite erforderliche Datenmenge erforderlich wäre! (Was ironisch wäre, da es auf dieser Seite darum geht, die Datenmenge auf einer Seite zu reduzieren :)). Aber Sie können die endgültigen GIFs hier sehen
Anmerkung des Übersetzers: Bei Habr können Sie die automatische Wiedergabe und die Endlosschleife der Datei nicht aktivieren, sodass Sie nur die Qualität bewerten können. Wie die „animierten Bilder“ aussehen werden, können Sie live sehen .
Szene 1 bei 200 Kbps
Hier gibt es viel Bewegung, was besonders bei niedrigen Bitraten empfindlich ist. Wie schlecht H.264 bei dieser Bitrate ist, erkennt man sofort, es sind sofort Quadrate zu erkennen. VP9 verbessert die Situation ein wenig, aber die Quadrate sind immer noch sichtbar. AV1 gewinnt eindeutig und liefert ein deutlich besseres Bild.
H.264
VP9
AV1
Szene 2 bei 200 Kbps
Hier gibt es viele durchscheinende CGI-Inhalte. Die Ergebnisse sind nicht so unterschiedlich wie beim letzten Mal, aber insgesamt sieht der AV1 besser aus.
H.264
VP9
AV1
Szene 3 bei 100 Kbps
In dieser Szene reduzieren wir die Bitrate auf 100 Kbit/s und die Ergebnisse sind konsistent. AV1 behauptet seine Führungsposition auch bei niedrigen Bitraten!
H.264
VP9
AV1
Kirsche auf dem Kuchen
Zum Abschluss dieses Artikels möchten wir Ihnen noch einmal zeigen, wie viel Bandbreite im Vergleich zu GIF eingespart wird: Die Gesamtgröße aller Videos ist höher ... 1.62 MB!! Rechts. Einige verdammte 1,708,032 Bytes! Zum Vergleich finden Sie hier die GIF- und AV1-Videogrößen für jede Szene
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 atemberaubend! Nicht wahr?
Hinweis: Die Dateigrößen von VP9 und H264 werden nicht angegeben, da sie sich aufgrund der Verwendung der gleichen Bitrate praktisch nicht von AV1 unterscheiden. Es wäre überflüssig, zwei weitere Spalten mit den gleichen Größen hinzuzufügen, nur um hervorzuheben, dass diese Codecs bei viel kleineren Dateigrößen eine viel bessere Qualität als GIF erzeugen.
Source: habr.com