Komprimierung der Größe von animierten GIF durch Konvertierung von GIF zu MP4: Ein praktischer Leitfaden für Website-Optimierung

GIF verwendet verlustfreie LZW-Frame-für-Frame-Kodierung und speichert vollständige Pixelinformationen für jeden Frame, ohne Inhaltsredundanz zwischen benachbarten Frames zur Kompression zu nutzen. Diese 1987 entworfene Kodierungsmethode weist aufgrund von Patent- und Algorithmuseinschränkungen natürliche Engpässe bei der Kompressionseffizienz auf.

H.264-Kodierung nutzt Inter-Frame-Kompressionsverfahren, die nur die Unterschiede zwischen benachbarten Frames speichern. Statische Hintergründe müssen nur einmal gespeichert werden, statt in jedem Frame wiederholt gespeichert zu werden. Bei gleicher visueller Qualität ist die Größe der H.264-komprimierten Ausgabe deutlich kleiner als die von GIF.

In den meisten Szenarien liegt der Größenunterschied nach der Konvertierung von GIF mit identischem Inhalt zu H.264 MP4 zwischen dem 5- und 10-fachen. Bei einigen lang dauernden animierten Bildern mit einem hohen Anteil an statischem Hintergrund kann der Größenunterschied 10-fach überschreiten.

Für jede 100KB Reduktion der gesamten Ladegröße einer Website verbessert sich die Ladegeschwindigkeit des ersten Bildschirms um etwa 10 Millisekunden. Die großflächige Ersetzung von GIF durch MP4 kann die gesamte Seitenladegröße deutlich reduzieren.

Um das ursprüngliche Verhalten von automatischer Wiedergabe und Schleife von GIF auf Webseiten nachzubilden, kann das HTML-video-Tag mit einer Kombination aus vier Attributen zur Simulation verwendet werden. Die vier erforderlichen Attribute sind autoplay, loop, muted und playsinline.

Der vollständige Beispielcode lautet <video autoplay loop muted playsinline src="demo.mp4"></video>. Diese Implementierung ist kompatibel mit allen gängigen modernen Browsern einschließlich Chrome 86+ und Safari 11+ und ermöglicht automatisch wiederholte stumme Wiedergabe ohne Benutzerklick.

Twitter transkodiert von Benutzern hochgeladene GIF automatisch zu H.264-Video. Für Endbenutzer wird weiterhin das GIF-Format angezeigt, während das Laden des tatsächlichen Videostroms den Bandbreitenverbrauch reduziert. Die WeChat Official Accounts Platform wendet eine ähnliche automatische Transkodierung auf hochgeladene GIF an.

Die meisten gängigen Content-Plattformen haben ähnliche Mechanismen zur Verarbeitung von benutzerhochgeladenen GIF eingeführt, die die Bandbreitenkosten der Plattform senken und gleichzeitig die Ladegeschwindigkeit für Benutzer verbessern.

Einige ältere E-Mail-Clients unterstützen keine automatische Wiedergabe des HTML-video-Tags. Die Verwendung von GIF in E-Mail-Marketing-Szenarien stellt sicher, dass die Animation auf den meisten Clients normal angezeigt werden kann. Viele ältere unternehmensinterne Systeme unterstützen nur das Hochladen von animierten Bildern im GIF-Format und können MP4 nicht verarbeiten.

Einige Drittanbieter-Plattformen für Emojis haben klare Formatanforderungen für hochgeladene Inhalte und schreiben vor, dass animierte Bilder im GIF-Format hochgeladen werden müssen. In solchen Szenarien sollte das ursprüngliche Format beibehalten werden.