Was ist der Unterschied zwischen einem GIF und einem Video?
Ein GIF ist eine Bilddatei, die eine Folge von Frames und für jeden eine Verzögerung enthält. Browser und Apps zeigen es wie ein Bild an: Es startet von selbst, läuft in Schleife und hat weder Ton noch Steuerelemente.
Eine Videodatei, etwa MP4, enthält von einem Codec (meist H.264) komprimierte Frames und optional eine Tonspur. Ein Player zeigt sie mit Steuerelementen für Pause, Spulen und Lautstärke an.
Ein GIF ist also eine Animation, aber kein Video. Viele Websites nennen kurze, stumme Schleifen „GIFs“, auch wenn sie MP4-Dateien ausliefern, weil das Erlebnis gleich aussieht.
Direkter Vergleich
| Merkmal | GIF | MP4 (H.264) |
|---|---|---|
| Komprimierung | Pro Frame (LZW, nicht zeitlich) | Zeitlich (Prädiktion zwischen Frames) |
| Farben | 256 pro Frame | 16,7 Millionen |
| Größe einer 5-Sek.-Animation | 3–10 MB | 200–500 KB |
| Typische Ersparnis | — | 90–95% kleiner |
| Audio | Keines | Optional (AAC) |
| Transparenz | 1 Bit (an/aus) | Nicht unterstützt (H.264) |
| Maximale Bildrate | ~50 fps (meist aber 10–15) | 60+ fps |
| Autoplay im Web | Automatisch (immer) | Mit den Attributen autoplay und muted |
| Endlosschleife | Integriertes Loop-Flag | Über das Attribut loop in HTML |
| Browser-Unterstützung | 100% (seit 1995) | 100% (HTML5-Video) |
| E-Mail-Unterstützung | Die meisten Programme (ältere Outlook-Versionen: nur Frame 1) | Fast keine |
| Lighthouse-Bewertung | Als Problem markiert | Empfohlene Alternative |
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 zeitliche Komprimierung: Jeder Frame wird als vollständiges Bild gespeichert. Bei 150 Frames einer winkenden Katze speichert GIF 150 einzelne Bilder. Encoder können unveränderte Bereiche überspringen, doch alles, was sich bewegt, wird in jedem Frame erneut gespeichert.
- Grenze von 256 Farben: Jeder Frame kann nur 256 Farben aus einer Palette verwenden. Fotografische Inhalte erfordern Dithering (Pixelmuster, die fehlende Farben simulieren), was die Dateigröße sogar erhöht, weil sich geditherte Muster schlecht komprimieren lassen.
- Nur LZW-Komprimierung: GIF komprimiert nur räumlich (innerhalb jedes Frames). MP4 komprimiert sowohl räumlich als auch zeitlich (ü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:
| Kennzahl | Seite mit 5-MB-GIF | Seite mit 400-KB-MP4 |
|---|---|---|
| Ladezeit (4G) | ~4 Sekunden | ~0,3 Sekunden |
| Ladezeit (3G) | ~15 Sekunden | ~1,2 Sekunden |
| Bandbreite bei 100.000 Aufrufen | 500 GB | 40 GB |
| Lighthouse-Performance | Warnung markiert | Keine Probleme |
| LCP-Auswirkung | Erheblich (verzögert Paint) | Minimal |
| Mobile Datennutzung | 5 MB pro Besuch | 0,4 MB pro Besuch |
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:
<video autoplay loop muted playsinline>
<source src="animation.mp4" type="video/mp4">
</video>
Jedes Attribut hat einen bestimmten Zweck:
autoplay— startet die Wiedergabe automatisch, wenn sichtbarloop— 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
<video autoplay loop muted playsinline>
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</video>
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-Programme unterstützen Video praktisch gar nicht. Kein <video>-Tag, kein Autoplay, kein MP4. GIF ist der einzige Weg, animierte Inhalte in E-Mails einzubinden. Die meisten E-Mail-Programme spielen animierte GIFs ab; Outlook 2007–2019 für Windows zeigt nur den ersten Frame. Für diesen Einsatzzweck 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
| Format | Größe (5 Sek.) | Farben | Transparenz | Browser-Support |
|---|---|---|---|---|
| GIF | 3–10 MB | 256 | 1-Bit | 100 % |
| MP4 (H.264) | 200–500 KB | 16,7 Mio. | Nein | 100 % |
| WebM (VP9) | 150–400 KB | 16,7 Mio. | Alpha-Kanal | ~96 % |
| Animiertes WebP | 500 KB–2 MB | 16,7 Mio. | Alpha-Kanal | ~97 % |
| AVIF-Sequenz | 100–300 KB | 16,7 Mio. | Alpha-Kanal | ~95 % |
| APNG | 2–8 MB | 16,7 Mio. | Vollständiges Alpha | ~96 % |
| Lottie (JSON) | 5–50 KB | Unbegrenzt | Ja | Via JS-Bibliothek |
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:
- Prüfen: Finden Sie alle animierten GIFs auf Ihrer Website. Überprüfen Sie die Dateigrößen — beginnen Sie mit GIFs über 500 KB.
- 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). - HTML ersetzen: Ändern Sie
<img src="anim.gif">zu<video autoplay loop muted playsinline>. - Abmessungen hinzufügen: Fügen Sie
width- undheight-Attribute am Video-Element hinzu, um Layoutverschiebungen (CLS) zu vermeiden. - Überprüfen: Testen Sie Autoplay in Chrome, Firefox, Safari und mobilen Browsern.
- Messen: Führen Sie Lighthouse vor und nach der Umstellung aus, um die Performance-Verbesserung zu bestätigen.
So wird aus einem GIF ein Video (und umgekehrt)
GIF zu MP4 (diese Seite)
- Laden Sie das GIF in den Konverter oben hoch.
- Konvertieren Sie. Jeder Frame bleibt erhalten und wird mit H.264 (CRF 23, für Animationen optimiert) in eine MP4 kodiert, die schon vor dem vollständigen Download abspielbar ist.
- Laden Sie die MP4 herunter. Sie hat keine Tonspur, weil GIFs keine haben.
Video zu GIF
Verwenden Sie den MP4-zu-GIF-Konverter. Er übernimmt die ersten 30 Sekunden mit 480 px Breite und 10 Bildern pro Sekunde.
FFmpeg
Der hier verwendete Befehl für GIF zu MP4: ffmpeg -i input.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -c:v libx264 -crf 23 -tune animation output.mp4. Der Scale-Filter rundet Breite und Höhe auf gerade Zahlen, die H.264 für dieses Pixelformat benötigt.