Web & Embeds · Anwendung
GIF zu MP4 für eine Website per Video-Tag einbinden
Statt eine GIF mit 5 MB per IMG-Tag zu laden, sollte eine 500 KB MP4 per VIDEO-Tag eingebunden werden. Das spart Bandbreite massiv und verbessert Core-Web-Vitals (LCP, CLS).
Schnellstart
Datei reinziehen, MP4 herunterladen, direkt für Website <video> Tag verwenden.
Zum GIF zu MP4 KonverterWichtigste Specs auf einen Blick
Codec-Reihenfolge
WEBM (VP9) zuerst, MP4 (H.264) als Fallback
autoplay funktioniert
nur mit muted + playsinline (iOS Safari)
Loop
loop-Attribut für Endlos-Wiedergabe
Poster
poster="..." für LCP-Optimierung
Schritt-für-Schritt-Anleitung
- 1 Konvertiere zu MP4 (H.264) und zusätzlich zu WEBM (VP9) als Fallback.
- 2 Skaliere auf gewünschte Anzeige-Größe (z.B. 1280×720).
- 3 Setze CRF 26-28, das ist für Web-Embeds genug.
- 4 Mit Faststart-Flag speichern, MOOV-Atom muss vorne sitzen.
- 5 Einbinden mit <video autoplay loop muted playsinline><source src="..." type="video/mp4"></video>.
Vollständige Spec-Tabelle
| Codec-Reihenfolge | WEBM (VP9) zuerst, MP4 (H.264) als Fallback |
|---|---|
| autoplay funktioniert | nur mit muted + playsinline (iOS Safari) |
| Loop | loop-Attribut für Endlos-Wiedergabe |
| Poster | poster="..." für LCP-Optimierung |
| preload | preload="metadata" für schnelle Pages |
Häufige Probleme
- Ohne muted spielt iOS Safari kein Autoplay ab.
- Ohne playsinline öffnet iOS Safari den Vollbild-Player.
- Ohne Faststart muss der Browser die ganze Datei laden, bevor der Player startet.
- MOV statt MP4 kann auf manchen Android-Browsern Probleme machen.
Häufige Fragen
Warum ist MP4 besser als GIF für Web?
MP4 mit H.264 ist 80-95 Prozent kleiner als die gleiche GIF. Das verbessert Largest Contentful Paint, Time to Interactive und reduziert Bandbreitenkosten massiv. Google selbst hat 2018 in einem Blog-Post empfohlen, GIFs durch MP4-Loops zu ersetzen.
Brauche ich WEBM zusätzlich zu MP4?
Nicht zwingend, MP4 (H.264) läuft in allen modernen Browsern. WEBM (VP9) ist 30-50 Prozent kleiner als H.264, aber iOS Safari brauchte bis 2024 separate Fallbacks. Für maximale Performance: WEBM zuerst, MP4 als Fallback.
Was macht das Faststart-Flag?
Es verschiebt das MOOV-Atom (Metadata) an den Anfang der Datei. Ohne diesen Flag muss der Browser die komplette Datei herunterladen, bevor der Player starten kann. Mit Faststart startet er nach den ersten KB.
Verwandte Anwendungen
GIF für Website <video> Tag konvertieren
Datei reinziehen, MP4 herunterladen. Vollständig im Browser, kein Upload.
Zum Konverter