# MP4 eller WebM: vilket videoformat ska du exportera [Canonical HTML page](https://gradiently.design/sv/guide/mp4-vs-webm) Två containrar, en handfull codecs och en praktisk fråga: vilken fil ger du till Instagram, och vilken lägger du på din webbplats. ## The short version - MP4 är det säkraste videoformatet att exportera eftersom det spelas på nästan varje telefon, webbläsare, redigeringsprogram och social plattform. - WebM är ett öppet, royaltyfritt format som ofta är mindre än MP4 vid liknande kvalitet, vilket gör det användbart på webbplatser. - Till uppladdning i sociala medier, exportera MP4, eftersom plattformarna pålitligt tar emot det och kodar om allt ändå. - På en webbplats är ett vanligt mönster att erbjuda WebM först och MP4 som reserv i ett och samma videoelement. - WebM kan bära transparens i webbläsare som stöder det, vilket vanlig MP4 med H.264 inte kan. I valet **MP4 eller WebM**, exportera MP4 när du laddar upp någonstans du inte styr över, som Instagram, TikTok, LinkedIn, en kunds inkorg eller ett redigeringsprogram, eftersom det spelas nästan överallt. Välj WebM för din egen webbplats, där det ofta är mindre vid samma kvalitet, och erbjud helst båda så att varje webbläsare väljer det den spelar bäst. Det täcker de flesta beslut. Resten av sidan förklarar varför, och de få fall där svaret ändras. ## Vad MP4 och WebM egentligen är Båda är **containrar**: lådor som rymmer en videoström, en ljudström och lite information om dem. Det som avgör kvalitet och storlek är **codecen** inuti. MP4 bär oftast H.264-video och AAC-ljud, ibland H.265 eller AV1. WebM bär VP8-, VP9- eller AV1-video med Opus- eller Vorbis-ljud. WebM skapades som ett öppet, royaltyfritt format för webben; MP4 är den sedan länge etablerade standard som kameror, telefoner och redigeringsprogram byggdes kring. | Egenskap | MP4 | WebM | | --- | --- | --- | | Vanliga videocodecs | H.264, H.265, AV1 | VP8, VP9, AV1 | | Vanliga ljudcodecs | AAC | Opus, Vorbis | | Filstorlek | Liten | Ofta mindre vid liknande kvalitet | | Spelas på | Nästan allt | Moderna webbläsare; ojämnare i appar och redigeringsprogram | | Uppladdning till sociala medier | Accepteras överallt | Accepteras inte pålitligt | | Transparens | Inte med H.264 | Ja, med VP9 i webbläsare som stöder det | | Licenser | Vissa codecs har patentlicenser | Öppet och royaltyfritt | Den stora bilden. Stödet förändras över tid, så kontrollera aktuellt webbläsarstöd på caniuse innan du förlitar dig på ett gränsfall. ## Vilket format till sociala medier Exportera MP4. Alla stora plattformar tar emot det, och alla plattformar kodar om det du laddar upp, så en mindre WebM ger dig ingenting när den väl är där. Det som faktiskt ändrar hur din video ser ut efter uppladdning är bildstorleken, bildfrekvensen och kvaliteten på filen du skickar. Skicka en ren MP4 på 1080×1920 för Reels och stories, eller 1080×1350 för ett stående flödesinlägg, så har plattformen inget att skala om. - Reel, story, TikTok 9:16: 1080 × 1920 - Stående inlägg 4:5: 1080 × 1350 - Kvadratiskt inlägg 1:1: 1080 × 1080 - Liggande 16:9: 1920 × 1080 De bildformat du oftast exporterar. Alla ska laddas upp som MP4. För hela listan över bildformat per plattform, se [videostorlekar för sociala medier](https://gradiently.design/sv/guide/social-video-sizes). ## Vilket format till en webbplats På din egen webbplats styr du spelaren, så du kan erbjuda båda. Webbläsaren läser `source`-elementen i ordning och spelar det första den stöder. Lägg WebM först om din WebM-fil är den minsta av de två, och behåll MP4 som reserv för webbläsare som inte kan spela den. ```html ``` WebM först, MP4 som reserv. Postern visas medan videon laddas och för den vars webbläsare inte kan spela någon av dem. Mät innan du antar. För vissa klipp, särskilt mycket korta eller mycket enkla, är en välkodad MP4 lika liten som WebM, och att servera en fil är enklare. MDN:s guide till [webbvideocodecs](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs) är referensen för vad varje webbläsare spelar. Är klippet en bakgrund tar [videobakgrunder på webbplatser](https://gradiently.design/sv/guide/video-background-website) upp posterbilder, storlek och prestanda. ## Att konvertera mellan MP4 och WebM Har du ett format och behöver det andra hanterar det gratis kommandoradsverktyget FFmpeg båda riktningarna. Kommandona nedan är rimliga utgångspunkter för designade loopar: inget ljud, bra kvalitet och en MP4 som börjar spelas innan den har laddats ner helt. ```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 ``` Lägre CRF betyder högre kvalitet och större filer. Ta bort -an om videon har ljud du vill behålla. > **Därför spelar yuv420p roll** Vissa kodare skapar MP4-filer i ett färgformat som telefoner och webbläsare vägrar spela. Med `yuv420p` hålls filen i det format som allt förstår. ## Gradienter, bandning och kvalitet Mjuka gradienter är det svåraste att komprimera. Stora ytor med långsamt skiftande färg avslöjar varje brist på bitar som synliga steg, och mörka gradienter visar det först. Båda formaten klarar det bra vid en generös kvalitetsinställning; inget av dem gör det vid en snål. Lite korn i designen hjälper mycket, eftersom kodare bevarar textur i stället för att platta ut den till band. - Jämn: tillräcklig bitrate: `linear-gradient(180deg, #0b1026 0%, #1e3a8a 55%, #60a5fa 100%)` - Trappstegad: svältande kodare: `linear-gradient(180deg, #0b1026 0% 20%, #13234f 20% 40%, #1e3a8a 40% 60%, #3f6fc4 60% 80%, #60a5fa 80% 100%)` En överdriven bild av bandning. Lösningen är densamma i MP4 och WebM: mer kvalitet, lite korn och ingen extra omskalning. Orsakerna och lösningarna för stillbilder finns i [bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding). Den animerade versionen lägger till en regel till: exportera i exakt den storlek du ska publicera, så att inget skalas två gånger. ## Var GIF passar in GIF är inte ett videoformat och är störst av de tre för samma loop, med en gräns på 256 färger som bandar gradienter. Dess enda fäste är e-post, där de flesta inkorgar visar GIF:ar och mycket få spelar video. Jämförelsen mellan alla tre finns i [GIF eller MP4](https://gradiently.design/sv/guide/gif-vs-mp4), och hantverket att göra en bra finns i [animerade GIF:ar](https://gradiently.design/sv/guide/gif-maker-tips). ### Exportera MP4 till - Instagram, TikTok, LinkedIn, X, YouTube - Att skicka till en kund eller en redigerare - Presentationer och skärmar du inte styr över - Varje gång du är osäker ### Exportera WebM till - Din egen webbplats, vid sidan av en MP4 - Överlägg som behöver transparens i webbläsaren - Sidor där varje kilobyte räknas - Webbläsarbaserade verktyg som spelar in WebM direkt I Gradiently är videoexport en Pro-funktion och kommer ut som MP4 eller WebM, beroende på vad din webbläsare kan spela in. Oavsett vilket får du den rörliga Marken bakom dina ord i upp till 1080p, redo att laddas upp eller bäddas in. Detaljerna finns i [exportera bilder och loopar](https://gradiently.design/sv/guide/export-images-and-loops). ## FAQ ### Är WebM bättre än MP4? WebM är ofta mindre vid liknande kvalitet och är öppet och royaltyfritt, men MP4 spelas på fler enheter och appar. För webbplatser är WebM ett bra förstaval med MP4 som reserv; till allt annat är MP4 säkrare. ### Kan jag ladda upp WebM till Instagram eller TikTok? Förlita dig inte på det. Konvertera till MP4 först, vilket alla plattformar accepterar, i exakt den bildstorlek som formatet du postar kräver. ### Spelar Safari WebM? Nya versioner av Safari spelar WebM, men stödet kom senare än i andra webbläsare och har varierat med codec och enhet. Att erbjuda en MP4-reserv undviker frågan. ### Vilket är minst, MP4 eller WebM? WebM med VP9 eller AV1 är ofta mindre än MP4 med H.264 vid liknande kvalitet, men inte alltid. Koda båda och jämför de faktiska filerna. ### Vilket format stöder transparent video? WebM med VP9 kan bära en alfakanal som webbläsare med stöd visar. Standard-MP4 med H.264 kan inte det.