GIF vs. MP4: Welches Format
für Web-Animationen?

Direkter Vergleich

Warum GIF so ineffizient ist

GIF wurde 1987 für statische Bilder entwickelt. Die Animationsunterstützung wurde 1989 als GIF89a ergänzt, doch die Kompression war nie für Bewegtbild ausgelegt. Hier erfahren Sie, warum GIF-Dateien so groß sind:

• Keine Zeitkompression: Jedes Frame wird als vollständiges Bild gespeichert. Bei 150 Frames einer winkenden Katze speichert GIF 150 separate Bilder. Selbst wenn sich der Hintergrund nie ändert, wird er 150-mal gespeichert.
• 256-Farben-Limit: Jedes Frame kann nur 256 Farben aus einer Palette verwenden. Fotografische Inhalte erfordern Dithering (Pixelmuster zur Simulation fehlender Farben), was die Dateigröße tatsächlich erhöht, da geditherte Muster schlecht komprimieren.
• Nur LZW-Kompression: GIF verwendet ausschließlich räumliche Kompression (innerhalb eines Frames). MP4 nutzt sowohl räumliche als auch zeitliche Kompression (über Frames hinweg), was bei Animationen deutlich effizienter ist.

MP4 mit H.264 löst alle drei Probleme: Es speichert nur Änderungen zwischen Frames, unterstützt 16,7 Millionen Farben und verwendet die modernste Videokompression. Das Ergebnis sind 90–95 % kleinere Dateien bei besserer visueller Qualität.

Auswirkungen auf die Web-Performance

Der Performance-Unterschied zwischen GIF und MP4 auf einer Website ist erheblich und messbar:

Google Lighthouse

Googles Lighthouse-Audit markiert animierte GIFs ausdrücklich mit der Empfehlung: “Verwenden Sie Videoformate für animierte Inhalte.” Dies ist kein Hinweis — es wird als “Opportunity” mit geschätzten Einsparungen eingestuft. Die Umsetzung dieser Empfehlung verbessert direkt Ihren Performance-Score.

Core Web Vitals

Ein großes GIF beeinträchtigt zwei Core Web Vitals, die Google für das Suchranking verwendet:

• Largest Contentful Paint (LCP): Wenn das GIF das größte Element im sichtbaren Bereich ist, verzögert es den LCP, bis das gesamte GIF heruntergeladen und dekodiert ist. Ein 5-MB-GIF auf Mobilgeräten kann den LCP über den 2,5-Sekunden-Schwellenwert treiben.
• Cumulative Layout Shift (CLS): Wenn die Abmessungen des GIF nicht angegeben sind, verschiebt sich das Seitenlayout, wenn das GIF lädt und sich auf seine volle Größe ausdehnt.

GIF durch MP4 auf Ihrer Website ersetzen

Das HTML, damit sich ein MP4 genau wie ein animiertes GIF verhält:

Jedes Attribut hat einen bestimmten Zweck:

• autoplay — startet die Wiedergabe automatisch, wenn sichtbar
• loop — beginnt von vorne, wenn das Ende erreicht ist (wie GIF)
• muted — kein Ton (von allen Browsern für Autoplay erforderlich)
• playsinline — spielt inline statt im Vollbild auf dem mobilen Safari ab

Die Nutzererfahrung ist identisch mit einem GIF: Die Animation startet automatisch, läuft in einer Endlosschleife und macht keinen Ton. Die Datei ist jedoch 10–20-mal kleiner und die Qualität ist besser.

Mit WebM-Fallback für noch kleinere Dateien

WebM (VP9) ist typischerweise 20–30 % kleiner als MP4 (H.264). Browser mit WebM-Unterstützung verwenden es; andere greifen auf MP4 zurück. Zusammen decken beide Formate 100 % der Browser ab.

Wann Sie GIF weiterhin verwenden sollten

Trotz seiner Ineffizienz ist GIF in bestimmten Situationen nach wie vor die richtige Wahl:

E-Mail-Marketing

HTML-E-Mail-Clients haben fast keine Videounterstützung. Kein <video>-Tag, kein Autoplay, kein MP4. GIF ist der einzige Weg, animierte Inhalte in E-Mails einzubinden. Etwa 80 % der E-Mail-Clients unterstützen animierte GIFs (Outlook Desktop zeigt nur das erste Frame). Für diesen Anwendungsfall gibt es keine Alternative.

Messaging-Plattformen

Slack, Discord, Microsoft Teams und WhatsApp haben dedizierte GIF-Funktionen mit Inline-Vorschau, Suche (via GIPHY/Tenor) und spezieller Darstellung. Ein MP4 auf diese Plattformen hochzuladen funktioniert, löst aber nicht dasselbe Inline-GIF-Erlebnis aus. Wenn die Plattform GIF erwartet, verwenden Sie GIF.

Einfache animierte Icons und UI-Elemente

Sehr kleine, einfache Animationen (Ladespinner, Häkchen, Micro-Interactions) unter 50 KB sind als GIF akzeptabel. Der Größenunterschied ist vernachlässigbar, und die Einfachheit von GIF (kein <video>-Element nötig, funktioniert im <img>-Tag) macht es für Entwickler praktisch.

Transparenzanforderungen

GIF unterstützt 1-Bit-Transparenz (vollständig transparent oder vollständig opak). H.264-MP4 unterstützt überhaupt keine Transparenz. Wenn Sie eine animierte Ebene über einem variablen Hintergrund benötigen, sind GIF oder animiertes WebP/AVIF Ihre Optionen. Beachten Sie, dass die 1-Bit-Transparenz von GIF gezackte Kanten erzeugt — für weiche transparente Animationen ist WebM (VP9 Alpha) überlegen.

Weitere Animationsformate

Beste Gesamtalternative zu GIF im Web: MP4 (H.264) — universelle Unterstützung, kleinste praktische Dateigröße, ausgezeichnete Qualität. Ergänzen Sie WebM als primäre Quelle für noch kleinere Dateien.

Beste Option für transparente Animationen: WebM (VP9 Alpha) oder animiertes WebP.

Beste Option für Vektoranimationen (Icons, Illustrationen): Lottie — unendlich skalierbar, unglaublich kleine Dateien, erfordert aber eine JavaScript-Laufzeitumgebung.

Migrations-Checkliste: GIF zu MP4

Wenn Sie GIFs auf einer bestehenden Website ersetzen möchten:

1. Prüfen: Finden Sie alle animierten GIFs auf Ihrer Website. Überprüfen Sie die Dateigrößen — beginnen Sie mit GIFs über 500 KB.
2. Konvertieren: Verwenden Sie unseren Konverter oder FFmpeg (ffmpeg -i anim.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4).
3. HTML ersetzen: Ändern Sie <img src="anim.gif"> zu <video autoplay loop muted playsinline>.
4. Abmessungen hinzufügen: Fügen Sie width- und height-Attribute am Video-Element hinzu, um Layoutverschiebungen (CLS) zu vermeiden.
5. Überprüfen: Testen Sie Autoplay in Chrome, Firefox, Safari und mobilen Browsern.
6. Messen: Führen Sie Lighthouse vor und nach der Umstellung aus, um die Performance-Verbesserung zu bestätigen.