Warum sind GIFs so groß?
Drei Dinge machen GIF-Dateien groß:
- Jeder Frame wird einzeln komprimiert. GIF kennt keine Bewegungsprädiktion. Ein Encoder kann zwar nur das geänderte Rechteck eines Frames speichern, doch alles, was sich darin bewegt, wird erneut vollständig gespeichert.
- LZW-Komprimierung ist bei Video schwach. Sie ist verlustfrei und funktioniert gut bei Farbflächen, doch Kamerarauschen und Verläufe lassen wenig zu komprimieren übrig.
- Dithering fügt Rauschen hinzu. Um fehlende Farben mit einer 256-Farben-Palette vorzutäuschen, streuen Encoder Pixelmuster, die sich schlecht komprimieren lassen.
| GIF-Größe | Pixel pro Frame | Rohdaten pro Frame | 5 s bei 10 fps (50 Frames) |
|---|---|---|---|
| 320 × 180 | 57.600 | 57,6 KB | 2,9 MB |
| 480 × 270 | 129.600 | 129,6 KB | 6,5 MB |
| 1280 × 720 | 921.600 | 921,6 KB | 46,1 MB |
| 1920 × 1080 | 2.073.600 | 2,07 MB | 103,7 MB |
Rohdaten = 1 Byte pro Pixel (ein Index in die Palette) × Pixel × Frames, in dezimalen MB. LZW verkleinert das bei flächigen Grafiken stark, bei Kameraaufnahmen aber deutlich weniger. Eine H.264-MP4 desselben Clips benötigt nur einen kleinen Teil davon, weil unveränderte Bereiche fast nichts kosten.
Warum GIF in MP4 konvertieren?
Eine MP4 derselben Animation ist meist nur ein Bruchteil so groß wie das GIF. Im Beispiel von Google auf web.dev wurde aus einem GIF mit 3,7 MB eine MP4 mit 551 KB, etwa 85% kleiner.
Doch die Größenreduzierung ist nur ein Teil der Geschichte. MP4 bietet außerdem bessere visuelle Qualität (Millionen von Farben statt 256), flüssigere Wiedergabe und optionalen Ton. Googles Web-Performance-Tools empfehlen diese Konvertierung ausdrücklich.
Wie der Kompressionsunterschied funktioniert
Der dramatische Größenunterschied entsteht durch grundlegend unterschiedliche Kompressionsansätze:
GIF: Das Daumenkino-Prinzip
GIF speichert Animationen als Folge einzelner Bilder — wie ein Daumenkino. Jedes Frame ist ein vollständiges Bild, das unabhängig mit verlustfreier LZW-Kompression komprimiert wird. Bei 100 Frames einer winkenden Person speichert GIF 100 vollständige Bilder. Der Hintergrund, der Raum, die Möbel — alles wird 100-mal gespeichert, auch wenn sich zwischen den Frames nichts ändert.
MP4/H.264: Der smarte Ansatz
H.264 verwendet temporale Kompression (Interframe-Kompression). Es speichert das erste Frame (Keyframe) vollständig und anschließend für folgende Frames nur was sich geändert hat. Ist der Hintergrund statisch, wird er nur einmal gespeichert. Nur die bewegte Hand wird in den folgenden Frames kodiert.
Deshalb ist die Ersparnis so groß. Bei vielen Animationen ist der Großteil jedes Frames identisch mit dem vorherigen. GIF speichert ihn erneut, MP4 nur den Teil, der sich geändert hat.
| Merkmal | GIF | MP4 (H.264) |
|---|---|---|
| Frame-Speicherung | Jedes Frame einzeln gespeichert | Nur Änderungen zwischen Frames |
| Farben | 256 pro Frame | 16,7 Millionen |
| 5s Animation @ 15fps | 3–10 MB | 200–500 KB |
| Kompressionstyp | Nur räumlich (LZW) | Räumlich + temporal |
Vorteile für die Website-Performance
Für Webentwickler und Website-Betreiber hat das Ersetzen animierter GIFs durch MP4 messbare Auswirkungen:
- Google Lighthouse markiert es: Lighthouse warnt ausdrücklich mit „Videoformate für animierte Inhalte verwenden“, wenn es große animierte GIFs erkennt. Das ist ein direktes Signal, dass GIFs Ihre Performance-Bewertung verschlechtern.
- Bessere Core Web Vitals: Große GIFs wirken sich direkt auf den Largest Contentful Paint (LCP) aus und können beim Laden Layoutverschiebungen (CLS) verursachen. Ersetzen Sie ein GIF mit 5 MB durch eine MP4 mit 400 KB, verbessern sich beide Werte deutlich.
- Schnellere Ladezeiten: Bei 10 Mbit/s dauert der Download eines GIFs mit 5 MB (40 Megabit) etwa 4 Sekunden. Eine MP4 mit 400 KB (3,2 Megabit) braucht etwa 0,3 Sekunden.
- Geringere Bandbreitenkosten: Hat Ihre Seite 100.000 Aufrufe pro Monat und jeder lädt ein GIF mit 5 MB, sind das 500 GB Datenvolumen. Mit MP4 sinkt das auf 40 GB — eine Reduzierung um 92%.
- Page Experience: Die Core Web Vitals sind Teil der Page-Experience-Signale von Google, und eine leichtere Seite verbessert sie.
MP4 als GIF auf Ihrer Website einbinden
Um ein MP4 genau wie ein animiertes GIF zu verwenden (automatische Wiedergabe, Schleife, ohne Ton), nutzen Sie das HTML5-Element <video> mit diesen Attributen:
<video autoplay loop muted playsinline>
<source src="animation.mp4" type="video/mp4">
</video>
Jedes Attribut hat einen bestimmten Zweck:
autoplay— startet die Wiedergabe sofort (erfordertmuted)loop— startet neu, wenn das Ende erreicht istmuted— kein Ton (für Autoplay in allen Browsern erforderlich)playsinline— spielt inline auf mobilem Safari ab (ohne dies öffnet iOS den Vollbildmodus)
Diese Kombination bildet das Verhalten von GIF nach, während die Datei meist deutlich kleiner ist und die Farben besser sind.
Für noch kleinere Dateien geben Sie zuerst eine WebM-Quelle an, mit MP4 als Fallback:
<video autoplay loop muted playsinline>
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</video>
Qualitätseinstellungen für GIF-zu-MP4
Die H.264-Qualität wird durch den CRF-Parameter (Constant Rate Factor) gesteuert:
| CRF-Wert | Qualität | Typische Größe (5s GIF) | Anwendungsfall |
|---|---|---|---|
| CRF 18 | Visuell verlustfrei | 400–800 KB | Maximale Qualität, Archivierung |
| CRF 23 | Gut (Standard) | 200–500 KB | Empfohlen für die meisten Zwecke |
| CRF 28 | Ausreichend | 100–300 KB | Kleinste Größe, geringer Qualitätsverlust |
Unser Konverter verwendet CRF 23 mit dem Flag -tune animation, das speziell für Animationsinhalte optimiert ist. Dieses Flag passt die internen Parameter von H.264 an die Eigenschaften animierter Inhalte an (flache Bereiche, scharfe Kanten, begrenzte Bewegung) und liefert deutlich bessere Ergebnisse als die Standard-Einstellung.
Wann Sie NICHT konvertieren sollten (GIF behalten)
Es gibt legitime Gründe, das GIF-Format beizubehalten:
- E-Mail-Marketing: HTML-E-Mail-Programme unterstützen Video unzuverlässig. GIF bleibt der Standard für animierte Inhalte in E-Mail-Kampagnen.
- Messenger-Apps: Manche Messaging-Plattformen (Slack, Discord, Teams) bieten eigene GIF-Unterstützung mit Inline-Vorschau. Eine hochgeladene MP4 bietet eventuell nicht dasselbe Inline-Erlebnis.
- Transparenz: GIF unterstützt 1-Bit-Transparenz (an/aus). H.264-MP4 unterstützt überhaupt keine Transparenz. Wenn Sie eine transparente animierte Überlagerung benötigen, behalten Sie das GIF oder verwenden Sie WebM mit VP9 (das einen Alphakanal unterstützt).
- GIF-Funktionen in sozialen Medien: Plattformen wie Twitter/X und Reddit haben spezielle GIF-Upload-Funktionen mit automatischer Schleife. Intern wandeln sie zwar in Video um, der Upload-Ablauf erwartet aber das GIF-Format. Instagram dagegen postet GIF-Dateien nicht als Animation; lesen Sie dazu, wie Sie ein GIF auf Instagram posten.
So verkleinern Sie ein großes GIF
- Verringern Sie die Breite: Eine Halbierung reduziert die Pixel pro Frame um 75%.
- Verwenden Sie weniger Frames: 10 fps statt 20 halbieren die Anzahl der Frames.
- Kürzen Sie den Clip und schneiden Sie Ränder weg, die sich nie ändern.
- Reduzieren Sie die Farben auf 128 oder 64 und nutzen Sie verlustbehaftete GIF-Komprimierung (gifsicle
--lossy). Unser Leitfaden zum Verkleinern von GIF-Dateien erklärt jede Methode ausführlicher. - Wechseln Sie zu MP4, wo immer Video akzeptiert wird. Der Konverter auf dieser Seite behält jeden Frame bei.