# MP4 oder WebM: Welches Videoformat du exportieren solltest [Canonical HTML page](https://gradiently.design/de/guide/mp4-vs-webm) Zwei Container, eine Handvoll Codecs und eine praktische Frage: Welche Datei gibst du Instagram, und welche kommt auf deine Website? ## The short version - MP4 ist das sicherste Videoformat für den Export, weil es auf fast jedem Handy, Browser, Schnittprogramm und jeder Social Plattform läuft. - WebM ist ein offenes, lizenzfreies Format, das bei ähnlicher Qualität oft kleiner ist als MP4 und sich deshalb für Websites eignet. - Für Social Media Uploads exportierst du MP4, weil Plattformen es zuverlässig annehmen und ohnehin alles neu kodieren. - Auf einer Website ist ein gängiges Muster, in einem video Element zuerst WebM und dann MP4 als Fallback anzubieten. - WebM kann in unterstützenden Browsern Transparenz transportieren, was normales MP4 mit H.264 nicht kann. Bei der Wahl **MP4 oder WebM** exportierst du MP4, wenn du irgendwo hochlädst, das du nicht kontrollierst, etwa Instagram, TikTok, LinkedIn, das Postfach eines Kunden oder ein Schnittprogramm, weil es fast überall läuft. WebM wählst du für deine eigene Website, wo es bei gleicher Qualität oft kleiner ist, und idealerweise bietest du beides an, damit jeder Browser das nimmt, was er am besten abspielt. Das deckt die meisten Entscheidungen ab. Der Rest dieser Seite erklärt, warum, und nennt die wenigen Fälle, in denen sich die Antwort ändert. ## Was MP4 und WebM eigentlich sind Beide sind **Container**: Behälter für einen Videostream, einen Audiostream und ein paar Informationen darüber. Qualität und Größe entscheidet der **Codec** darin. MP4 trägt meist H.264 Video und AAC Audio, manchmal H.265 oder AV1. WebM trägt VP8, VP9 oder AV1 Video mit Opus oder Vorbis Audio. WebM wurde als offenes, lizenzfreies Format fürs Web geschaffen; MP4 ist der seit Langem etablierte Standard, um den herum Kameras, Handys und Schnittsoftware gebaut wurden. | Merkmal | MP4 | WebM | | --- | --- | --- | | Übliche Videocodecs | H.264, H.265, AV1 | VP8, VP9, AV1 | | Übliche Audiocodecs | AAC | Opus, Vorbis | | Dateigröße | Klein | Bei ähnlicher Qualität oft kleiner | | Läuft auf | Fast allem | Modernen Browsern; lückenhafter in Apps und Schnittprogrammen | | Social Uploads | Überall akzeptiert | Nicht zuverlässig akzeptiert | | Transparenz | Nicht mit H.264 | Ja, mit VP9 in unterstützenden Browsern | | Lizenzen | Manche Codecs sind patentlizenziert | Offen und lizenzfrei | Das große Bild. Die Unterstützung verschiebt sich mit der Zeit, also prüf die aktuelle Browserunterstützung auf caniuse, bevor du dich auf einen Sonderfall verlässt. ## Welches Format für Social Media Exportiere MP4. Jede große Plattform akzeptiert es, und jede Plattform kodiert neu, was du hochlädst, ein kleineres WebM bringt dir dort also nichts. Was wirklich verändert, wie dein Video nach dem Upload aussieht, sind Bildgröße, Bildrate und die Qualität der Datei, die du schickst. Schick ein sauberes MP4 in 1080×1920 für Reels und Stories oder 1080×1350 für einen Feed Post im Hochformat, und die Plattform muss nichts umrechnen. - Reel, Story, TikTok 9:16: 1080 × 1920 - Post Hochformat 4:5: 1080 × 1350 - Post Quadrat 1:1: 1080 × 1080 - Querformat 16:9: 1920 × 1080 Die Formate, die du am häufigsten exportierst. Jedes davon sollte als MP4 hochgeladen werden. Die vollständige Liste der Formate nach Plattform findest du unter [Videogrößen für Social Media](https://gradiently.design/de/guide/social-video-sizes). ## Welches Format für eine Website Auf deiner eigenen Seite kontrollierst du den Player, also kannst du beides anbieten. Der Browser liest die `source` Elemente der Reihe nach und spielt das erste ab, das er unterstützt. Setz WebM nach vorn, wenn deine WebM Datei die kleinere ist, und behalte MP4 als Fallback für jeden Browser, der es nicht abspielen kann. ```html ``` Zuerst WebM, MP4 als Fallback. Das Posterbild erscheint, während das Video lädt, und für alle, deren Browser keins von beiden abspielen kann. Miss, bevor du etwas annimmst. Bei manchen Clips, vor allem sehr kurzen oder sehr einfachen, ist ein gut kodiertes MP4 genauso klein wie das WebM, und eine einzige Datei auszuliefern ist einfacher. Der Leitfaden von MDN zu [Videocodecs im Web](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs) ist die Referenz dafür, was welcher Browser abspielt. Ist der Clip ein Hintergrund, behandelt [Videohintergründe auf Websites](https://gradiently.design/de/guide/video-background-website) Posterbilder, Größen und Performance. ## Zwischen MP4 und WebM umwandeln Hast du ein Format und brauchst das andere, erledigt das kostenlose Kommandozeilentool FFmpeg beide Richtungen. Die Befehle unten sind sinnvolle Ausgangspunkte für gestaltete Loops: kein Ton, gute Qualität und ein MP4, das schon abspielt, bevor es vollständig geladen ist. ```bash # WebM to MP4 (H.264), ready for social uploads and the web ffmpeg -i loop.webm -c:v libx264 -crf 20 -preset slow \ -pix_fmt yuv420p -movflags +faststart -an loop.mp4 # MP4 to WebM (VP9), usually smaller for your website ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 32 -b:v 0 -an loop.webm ``` Der erste Befehl macht aus WebM ein MP4 für Social und Web, der zweite aus MP4 ein meist kleineres WebM. Ein niedrigerer CRF Wert bedeutet höhere Qualität und größere Dateien. Entferne -an, wenn das Video Ton hat, den du behalten willst. > **Warum yuv420p wichtig ist** Manche Encoder erzeugen MP4 Dateien in einem Farbformat, das Handys und Browser nicht abspielen. Mit `yuv420p` bleibt die Datei in dem Format, das alles versteht. ## Verläufe, Banding und Qualität Weiche Verläufe sind am schwersten zu komprimieren. Große Flächen sich langsam ändernder Farbe machen jeden Mangel an Bits als sichtbare Stufen sichtbar, und dunkle Verläufe zeigen das zuerst. Beide Formate kommen mit einer großzügigen Qualitätseinstellung gut damit zurecht, mit einer knausrigen keines. Ein Hauch Körnung im Design hilft sehr, weil Encoder Textur erhalten, statt sie zu Streifen zu glätten. - Glatt: genug Bitrate: `linear-gradient(180deg, #0b1026 0%, #1e3a8a 55%, #60a5fa 100%)` - Stufig: ausgehungerter Encoder: `linear-gradient(180deg, #0b1026 0% 20%, #13234f 20% 40%, #1e3a8a 40% 60%, #3f6fc4 60% 80%, #60a5fa 80% 100%)` Eine übertriebene Darstellung von Banding. Die Lösung ist bei MP4 und WebM dieselbe: mehr Qualität, ein wenig Körnung und kein zusätzliches Skalieren. Ursachen und Lösungen für Standbilder stehen unter [Banding bei Verläufen](https://gradiently.design/de/guide/gradient-banding). Die animierte Version fügt eine Regel hinzu: Exportiere in genau der Größe, in der du veröffentlichst, damit nichts zweimal skaliert wird. ## Wo GIF hineinpasst GIF ist kein Videoformat und für denselben Loop das größte der drei, mit einer Grenze von 256 Farben, die Verläufe in Streifen zerlegt. Seine einzige Bastion ist die E-Mail, wo die meisten Postfächer GIFs anzeigen und nur sehr wenige Videos abspielen. Den Vergleich aller drei findest du unter [GIF oder MP4](https://gradiently.design/de/guide/gif-vs-mp4), und wie du ein gutes GIF machst, unter [animierte GIFs](https://gradiently.design/de/guide/gif-maker-tips). ### MP4 exportieren für - Instagram, TikTok, LinkedIn, X, YouTube - Den Versand an Kunden oder Cutter - Präsentationen und Bildschirme, die du nicht kontrollierst - Jedes Mal, wenn du unsicher bist ### WebM exportieren für - Deine eigene Website, zusammen mit einem MP4 - Overlays, die im Browser Transparenz brauchen - Seiten, auf denen jedes Kilobyte zählt - Browserbasierte Tools, die nativ WebM aufnehmen In Gradiently sind Videoexporte eine Pro Funktion und kommen als MP4 oder WebM heraus, je nachdem, was dein Browser aufnehmen kann. So oder so bekommst du den bewegten Mark hinter deinen Worten in bis zu 1080p, bereit zum Hochladen oder Einbetten. Die Einzelheiten stehen unter [Bilder und Loops exportieren](https://gradiently.design/de/guide/export-images-and-loops). ## FAQ ### Ist WebM besser als MP4? WebM ist bei ähnlicher Qualität oft kleiner und offen und lizenzfrei, aber MP4 läuft auf weit mehr Geräten und Apps. Für Websites ist WebM eine gute erste Wahl mit MP4 als Fallback; für alles andere ist MP4 sicherer. ### Kann ich WebM auf Instagram oder TikTok hochladen? Verlass dich nicht darauf. Wandle es zuerst in MP4 um, das jede Plattform akzeptiert, in genau der Bildgröße des Formats, das du postest. ### Spielt Safari WebM ab? Aktuelle Versionen von Safari spielen WebM ab, aber die Unterstützung kam später als in anderen Browsern und hing von Codec und Gerät ab. Ein MP4 Fallback erspart dir die Frage. ### Was ist kleiner, MP4 oder WebM? WebM mit VP9 oder AV1 ist bei ähnlicher Qualität oft kleiner als MP4 mit H.264, aber nicht immer. Kodiere beides und vergleiche die tatsächlichen Dateien. ### Welches Format unterstützt transparentes Video? WebM mit VP9 kann einen Alphakanal tragen, den unterstützende Browser anzeigen. Normales MP4 mit H.264 kann das nicht.