Kann sich MP4 wirklich wie ein GIF verhalten?

Ja, exakt. Mit den Attributen autoplay muted loop playsinline liefert ein Video in HTML dasselbe Erlebnis wie ein GIF: Es startet beim Öffnen der Seite von selbst, ist stumm, läuft endlos in der Schleife und wechselt auf Mobilgeräten nicht in den Vollbildmodus. Optisch ist es nicht zu unterscheiden, doch die Datei ist etwa ein Zehntel so groß und die Farbqualität weit besser.

Warum wird animiertes WEBP nicht häufiger eingesetzt?

Technisch ist es GIF in jeder Hinsicht überlegen – volle Farbe, Alphatransparenz, ein Drittel der Dateigröße – und alle modernen Browser unterstützen es. Was seine Verbreitung bremst, sind die Gewohnheiten des Ökosystems: Messenger, Foren und E-Mail-Programme behandeln GIF nach wie vor als eigenen Typ und erkennen WEBP-Animationen nicht oder zeigen sie statisch an.

Ich möchte eine Animation in eine E-Mail einfügen – welches Format?

GIF, denn so gut wie kein E-Mail-Programm spielt Videos ab. Aber eine Warnung: Manche Programme (insbesondere einige Outlook-Versionen) zeigen nur das erste Einzelbild des GIFs. Gestalten Sie das erste Bild deshalb so, dass es für sich allein aussagekräftig ist – Ihre Botschaft soll auch dann ankommen, wenn die Animation nicht sichtbar ist.

Soll ich in soziale Medien ein GIF oder ein Video hochladen?

Laden Sie ein Video hoch. Nahezu alle Plattformen wandeln Ihr hochgeladenes GIF im Hintergrund in ein Videoformat um. Wenn Sie ein GIF hochladen, senken also zuerst Sie die Qualität auf 256 Farben, und danach kodiert die Plattform dieses bereits verschlechterte Ergebnis erneut. Ein Video direkt hochzuladen liefert bessere Qualität und einen schnelleren Upload.

GIF, MP4 oder WEBP für kurze Animationen? Der echte Vergleich

Sie möchten eine kurze, stumme Animation teilen, die in der Schleife läuft. Reflexhaft denken Sie "ich mache ein GIF", doch in Wirklichkeit haben Sie vier Möglichkeiten – und GIF ist in den meisten Szenarien die schlechteste. In diesem Beitrag vergleichen wir die Formate unter realen Einsatzbedingungen.

Die vier Möglichkeiten

GIF: Ein Format von 1987, auf 256 Farben begrenzt, palettenbasiert. Funktioniert überall.

MP4-/WEBM-Video: Moderne Videocodecs. Mit autoplay muted loop verhält es sich wie ein GIF.

Animiertes WEBP: Volle Farbe, Alphatransparenz, gute Kompression. Wird von modernen Browsern unterstützt.

APNG: Die animierte Variante von PNG. Bietet volle Farbe und echte Alphatransparenz.

Vergleichstabelle

Für einen Inhalt mit 5 Sekunden, 480 × 270 und 15 fps grob geschätzt:

| Kriterium | GIF | MP4/WEBM | WEBP anim. | APNG | |---|---|---|---|---| | Typische Größe | 3–8 MB | 200–500 KB | 800 KB–2 MB | 2–5 MB | | Farbe | 256 | Voll | Voll | Voll | | Alphatransparenz | Binär (ja/nein) | Nein | Ja | Ja (8 Bit) | | Ton | Nein | Ja (abschaltbar) | Nein | Nein | | Browserunterstützung | Universell | Universell | Modern | Modern | | E-Mail-Unterstützung | Gut | Keine | Keine | Teilweise | | Messenger-Apps | Gesonderte Unterstützung | Gut | Schwach | Schwach | | Forum/Wiki | Gut | Wechselhaft | Schwach | Schwach | | Automatische Wiedergabe | Von Haus aus | Attribut erforderlich | Von Haus aus | Von Haus aus |

Szenario 1: Ich möchte eine Animation auf meine Website stellen

Eine kurze Schleife, die eine Produktfunktion zeigt und auf der Seite automatisch abgespielt wird.

Sieger: MP4- plus WEBM-Video, ohne Diskussion.

In diesem Szenario gibt es keinerlei technische Rechtfertigung für GIF. Das Video liefert dasselbe Bild in einem Zehntel der Größe und in deutlich besserer Farbqualität.

Umsetzung:

<video autoplay muted loop playsinline poster="vorschau.jpg">
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
</video>

Die Attribute:

autoplay muted – stumme Videos dürfen automatisch abgespielt werden (Browser blockieren die automatische Wiedergabe mit Ton).
loop – Endlosschleife.
playsinline – verhindert den Wechsel in den Vollbildmodus auf Mobilgeräten. Für ein GIF-ähnliches Verhalten zwingend erforderlich.
poster – das Bild, das angezeigt wird, bis das Video geladen ist.

Der Unterschied bei der Seitengeschwindigkeit ist real: Ein Video mit 400 KB statt eines GIFs mit 5 MB spart auf mobilen Verbindungen Sekunden.

Szenario 2: Ich möchte eine Animation in einen E-Mail-Newsletter einfügen

Sieger: GIF.

So gut wie kein E-Mail-Programm spielt Videos ab. Aus Sicherheits- und Kompatibilitätsgründen funktioniert das <video>-Element in den meisten Programmen nicht.

GIF hingegen wird breit unterstützt – allerdings mit einer Warnung: Manche Programme zeigen nur das erste Einzelbild. Besonders bei einigen Outlook-Versionen tritt dieses Verhalten auf.

Daraus folgt die praktische Regel: Gestalten Sie das erste Einzelbild so, dass es für sich allein aussagekräftig ist. Ihre Botschaft soll auch dann ankommen, wenn die Animation nicht sichtbar ist. Produktname, Angebot, Handlungsaufforderung – all das gehört ins erste Bild.

Behalten Sie auch die Größe im Blick: Für E-Mail-Anhänge und eingebettete Bilder sind 200 KB eine vernünftige Obergrenze. Dafür müssen Sie die Dauer womöglich auf 2–3 Sekunden, die Auflösung auf 300–400 Pixel und die Bildrate auf 10 fps senken.

Szenario 3: Ich teile es in einem Messenger

WhatsApp, Telegram, Slack, Discord.

Sieger: kommt darauf an – aber Video ist meist besser.

Diese Anwendungen behandeln GIF als eigenen Typ und bieten Suchbibliotheken an. Doch es gibt eine Ironie: Viele von ihnen wandeln das von Ihnen hochgeladene GIF im Hintergrund in MP4 um und zeigen es Ihnen als "GIF".

Wenn Sie also ein GIF hochladen, erleiden Sie zwei Verluste: Zuerst senken Sie die Qualität auf 256 Farben, danach kodiert die Plattform dieses verschlechterte Ergebnis erneut.

Direkt ein kurzes MP4 zu senden liefert in der Regel bessere Qualität und einen schnelleren Upload. Kurze stumme Videos spielen diese Anwendungen ohnehin in der Schleife ab.

Szenario 4: Ich füge es in ein Forum oder Wiki ein

Eine alte Forensoftware oder ein Unternehmenswiki.

Sieger: GIF.

Diese Umgebungen unterstützen meist nur Bildauszeichnungen und erlauben das <video>-Element nicht. Weil sich GIF wie ein Bild verhält, funktioniert es dort problemlos.

Achten Sie auf die Größe: In Foren und Wikis sind die Upload-Grenzen streng, und andere Nutzer verbrauchen beim Öffnen der Seite Bandbreite. 1–2 MB sind eine vernünftige Obergrenze.

Szenario 5: Ich teile es in sozialen Medien

Twitter/X, Instagram, LinkedIn, Facebook.

Sieger: Video.

Alle diese Plattformen kodieren hochgeladene Inhalte in ihr eigenes Format um. Ein GIF hochzuladen bedeutet, die Qualität unnötigerweise zweimal zu senken.

Laden Sie direkt ein Video hoch. Prüfen Sie die Anforderungen der Plattform: Manche verlangen eine Mindestdauer, manche bevorzugen bestimmte Seitenverhältnisse.

Szenario 6: Ich brauche eine Animation mit transparentem Hintergrund

Eine Logoanimation oder ein Oberflächenelement, hinter dem der Inhalt sichtbar bleiben soll.

Sieger: APNG oder animiertes WEBP.

Das ist die einzige Sache, die Videoformate nicht können. MP4 und WEBM unterstützen Alphatransparenz in der Praxis nicht (es gibt einige Sonderkonfigurationen, aber die Kompatibilität ist heikel).

Die Transparenz von GIF ist binär: Ein Pixel ist entweder vollständig transparent oder vollständig deckend. Zwischenwerte gibt es nicht. Das Ergebnis sind ausgefranste Kanten.

APNG und WEBP bieten 8-Bit-Alpha: Jedes Pixel kann 256 verschiedene Transparenzstufen annehmen. Kanten wirken weich, Schatten natürlich.

APNG-Dateien sind größer als WEBP-Dateien, dafür ist die Browserunterstützung etwas breiter. Wenn Sie zwischen beiden wählen, liefert WEBP meist das bessere Verhältnis von Größe und Qualität.

Szenario 7: Eine einfache Ladeanzeige (Spinner)

Eine kleine, farbarme Animation in der Schleife.

Sieger: SVG-Animation oder CSS.

Wir führen dieses Szenario auf, weil es für einfache Oberflächenanimationen unnötig ist, eine Bilddatei zu verwenden.

Ein rotierender Kreis, hüpfende Punkte oder ein Fortschrittsbalken – das lässt sich mit CSS-Animation oder SVG in wenigen Zeilen umsetzen, es wird keine Datei heruntergeladen, es bleibt in jeder Auflösung scharf, und eine Farbänderung ist eine Sache von einer Zeile.

Eine Bilddatei brauchen Sie nur dann, wenn die Animation wirklich komplex ist oder aus einem Video stammt.

Wenn Sie doch ein GIF erzeugen: die Größe im Griff behalten

Ist ein GIF wirklich nötig, bestimmt das Produkt dreier Einstellungen die Größe:

| Einstellung | Wirkung | Empfehlung | |---|---|---| | Dauer | Linear | 2–6 Sekunden | | Bildrate | Linear | 10–15 fps | | Auflösung | Quadratisch | 320–480 px Breite |

Der vierte Faktor ist die Bewegungsmenge: Eine statische Szene fällt weit kleiner aus, weil GIF dort von der Teilbildoptimierung profitieren kann.

Und schließlich die Farbanzahl: Erlaubt das Werkzeug es, senkt die Verwendung von 128 oder 64 statt 256 Farben die Größe. Bei Bildschirmaufnahmen und Grafiken ist der Unterschied kaum sichtbar; bei fotografischen Inhalten erzeugt er deutliche Verfälschungen.

Die Entscheidung im Überblick

Eigene Website → MP4- plus WEBM-Video mit autoplay muted loop playsinline.
E-Mail → GIF, gestalten Sie das erste Einzelbild aussagekräftig und bleiben Sie unter 200 KB.
Soziale Medien → Video, laden Sie kein GIF hoch.
Messenger → Video ist meist besser.
Forum / altes Wiki → GIF.
Transparenter Hintergrund → animiertes WEBP oder APNG.
Einfache Oberflächenanimation → CSS oder SVG, keine Datei verwenden.

Das allgemeine Prinzip lautet: Verwenden Sie GIF nur in Umgebungen, in denen es keine Alternative gibt. Überall sonst existiert eine kleinere, hochwertigere und schnellere Option.