Leitfaden zur GIF-Größenoptimierung: Vergleich von Ersatzlösungen mit WebP/APNG/Video

GIF wurde 1987 entwickelt, verwendet LZW-Kompressionscodierung und seine globale Palette unterstützt maximal 256 Farben. Es unterstützt keine hochfarbigen dynamischen Inhalte nativ. Das Patent für diese Kompressionstechnologie lief in den 1990er Jahren ab, aber die Farbbeschränkung kann die Anzeigeanforderungen aktueller Webseiten nicht mehr erfüllen.

In den meisten Szenarien übersteigt die Größe von hochdynamischen GIF, die von Betreibern oder Designern exportiert werden, 10MB, was das Laden von Seiten verlangsamt und die Verweildauer von Website-Besuchern verringert. Daher ist der Ersatz von GIF zu einer gängigen Optimierungsanforderung geworden.

WebP-Animationen erreichen Kompression auf Basis von mit VP8 codierten Keyframe-Sequenzen. Nur Keyframes speichern vollständige Bilder, und benachbarte Frames speichern nur Differenzbereiche, was im Vergleich zur Vollbildspeicherung bei GIF viel Platz spart. WebP-Animationen unterstützen 24-Bit-True Color und weisen nicht die 256-Farben-Beschränkung von GIF auf.

In Vergleichstests mit gleicher Größe und gleicher Bildrate ist die Größe von WebP-Animationen 30 % bis 70 % kleiner als das ursprüngliche GIF. Die Kompressionsrate ist bei hochdynamischen Inhalten höher und bei statischen Gradienteninhalten mit niedriger Bildrate nahe am unteren Grenzwert.

APNG wurde als Erweiterung des PNG-Formats entwickelt und unterstützt vollfarbige Alpha-Kanäle. Es wurde 2008 von einem Team außerhalb von Google eingeführt, und aktuell implementieren alle gängigen Desktop- und Mobilbrowser native Unterstützung dafür.

APNG hat eine geringere Kompressionseffizienz als WebP-Animationen, aber eine höhere als unkomprimiertes GIF. Die Größe ist bei gleichem Inhalt normalerweise 10 % bis 30 % kleiner als GIF, wodurch es sich für Szenarien eignet, die Kompatibilität mit einigen älteren PNG-Verarbeitungswerkzeugen erfordern.

Für Animationen länger als 3 Sekunden und breiter als 800px ist die Verwendung von mit H.264 codiertem MP4-Video zusammen mit dem HTML5 video-Tag zur Erzielung automatischer Schleifenwiedergabe die Lösung mit der höchsten Kompressionseffizienz.

Gemäß Daten von HTTP Archive aus dem Jahr 2024 haben mehr als 60 % der Websites MP4 zum Ersetzen von GIF-Animationen verwendet. Bei gleicher Bildqualität beträgt die Größe nur 10 % bis 20 % des ursprünglichen GIF, was den Bandbreitenverbrauch der Website stark reduzieren kann.

Bei der Konfiguration müssen die Attribute autoplay, loop und muted aktiviert werden, und ein Poster-Bild hinzugefügt werden, um die Ladeerfahrung zu verbessern. Alle gängigen Browser unterstützen diesen Konfigurationsmodus.