Bakgrundsvideo får en webbplats att kännas levande. Men när den väger 40 MB och tar fyra sekunder att ladda, lämnar besökarna sidan innan de ser ditt innehåll.

Enligt HTTP Archive-data för 2025 står video för upp till 20% av den totala vikten på mediatunga sidor. Google väger in laddningshastighet i rankningen, och Core Web Vitals straffar långsam LCP. Tung bakgrundsvideo skadar både användare och SEO.

Här är en steg-för-steg-algoritm för att komprimera bakgrundsvideo till 5 MB utan synlig kvalitetsförlust. Med gratisverktyg, ingen registrering, inga vattenstämplar.

💡 Snabb översikt:

• Format: förbered MP4 (H.264) + WebM (VP9), två filer täcker alla moderna webbläsare
• Verktyg: HandBrake, gratis, öppen källkod, med exakt kontroll över bitrate och upplösning
• För Mac: inbyggd QuickTime-export, ingen installation av tredjepartsprogramvara
• YouTube-trick: ladda upp, YouTube komprimerar om, ladda tillbaka den optimerade MP4-filen
• Onlinetjänster: CloudConvert, VideoSmaller, Clipchamp, när du inte vill installera programvara
• WordPress: mb.YTPlayer och Video Background-tillägg, bakgrundsvideo utan att redigera temat

Format: varför du behöver två filer

Bakgrundsvideo måste spelas upp smidigt i alla webbläsare. Ett enda format räcker inte.

MP4 (H.264), det primära formatet. Fungerar i Safari, Chrome, Edge, Opera och på alla mobila enheter. Detta är grunden som varje webbläsare förstår utan undantag.

WebM (VP9), det kompletterande formatet. Filen är märkbart mindre vid samma kvalitet. Chrome och Firefox prioriterar WebM, vilket sparar användarens bandbredd. Enligt Google Developers ger VP9 upp till 50% bitrate-besparing jämfört med H.264 vid identisk visuell kvalitet.

För mobil, en statisk JPG-posters. Om webbläsaren vägrar autoplay (bandbreddssparande, långsamt nätverk) ser användarna en bild istället för tom yta.

Upplösning över 720p är sällan motiverat för bakgrunder. En bredd på 1280 pixlar täcker en hel bärbar datorskärm, och filen väger flera gånger mindre än Full HD. Kontrollera i din mockup: 720p kommer troligen att möta dina behov med marginal.

Steg 1: HandBrake, det primära verktyget

HandBrake är en gratis videokonverterare med öppen källkod för Windows, Mac och Linux. Det ger full kontroll över codec, bitrate och upplösning. Inga vattenstämplar, ingen registrering, inga filstorleksgränser.

Algoritm för att komprimera bakgrundsvideo:

• Ladda ner HandBrake från den officiella webbplatsen och öppna din källvideofil.
• På fliken Summary, välj formatet MP4 och kryssa i Web Optimized. Detta flyttar metadata till början av filen, så att videon börjar spelas omedelbart utan att vänta på en fullständig nedladdning.
• På fliken Dimensions, ställ in bredden till 1280. Höjden justeras automatiskt. Låt filtret Anamorphic vara inställt på Automatic.
• På fliken Video, välj codec H.264 (x264). Ställ in reglaget Constant Quality inom RF-intervallet 22-26. Högre siffror betyder mindre filer. Optimalt: 24 RF.
• Ta bort ljudspåret. Bakgrundsvideo är tyst som standard; avmarkera rutan på fliken Audio.
• Klicka på Start Encode. En 30-50 MB fil komprimeras till 3-8 MB. Kvaliteten förblir acceptabel för bakgrunder.

För WebM-versionen, upprepa samma steg, men i steg 2 välj formatet WebM, och i steg 4 välj codec VP9.

I praktiken minskar en enda genomgång i HandBrake bakgrundsvideons storlek med 5-10 gånger. Besökare märker ingen skillnad, och sidan laddar 2-3 sekunder snabbare. Detta är det första vi gör med vilken video som helst innan vi laddar upp den till en webbplats.

Steg 2: Komprimering på Mac med inbyggda verktyg

Om du är på macOS behöver du inte installera något. Inbyggd QuickTime-export hanterar grundläggande komprimering.

• Öppna videofilen i QuickTime Player.
• Välj Arkiv → Exportera → 720p.
• Ange namn och mapp. Filen sparas som MP4 med H.264-codec.

Denna metod erbjuder inte finjusterad bitrate-kontroll, men den räcker för snabba resultat. En 60 MB källfil blir 8-12 MB utan extra ansträngning.

Ett mer avancerat inbyggt alternativ är iMovie. Importera videon, välj Arkiv → Dela → Arkiv, välj 720p-upplösning och "Medium"-kvalitet. iMovie ger något bättre kontroll över slutlig storlek än QuickTime. För finjusterat arbete är HandBrake fortfarande bättre, men när du behöver något "här och nu" räcker Mac-verktygen.

Steg 3: Komprimering via YouTube, ett snabbt trick

Det lataste sättet att få optimerad video är att köra den genom YouTube.

• Ladda upp videon till YouTube. Du kan ställa in den som "Olistad" så att den inte syns i offentlig sökning.
• Vänta tills bearbetningen är klar. YouTube kodar automatiskt om videon till alla moderna format och upplösningar.
• Ladda tillbaka den optimerade MP4-filen med en konverterare, till exempel CloudConvert.

Resultat: YouTubes komprimeringsalgoritmer, några av de bästa i branschen. Filen blir liten och visuellt ren. Denna metod hjälper när HandBrake inte är tillgängligt och du behöver komprimering just nu.

Ett alternativt tillvägagångssätt är att inte ladda upp videofilen till din hosting alls. Bädda in YouTube-videon som bakgrund via mb.YTPlayer-tillägget (avsnitt nedan). Detta sparar serverutrymme och bandbredd, men ger mindre kontroll över uppspelningen.

Onlineverktyg: när du inte vill installera programvara

Om du inte vill installera HandBrake och filen är liten fungerar webbläsarbaserade komprimerare utmärkt.

CloudConvert är en universell arbetshäst. Den stöder över 200 format och konverterar MP4 till WebM med ett klick. Gratisgränsen räcker för tillfällig optimering. Nackdel: hastigheten beror på serverkön.

VideoSmaller är en minimalistisk tjänst för en uppgift: att komprimera MP4. Gränssnitt med två knappar: ladda upp och ladda ner. Ingen registrering krävs. Fungerar inte med WebM eller MOV, endast MP4.

Clipchamp är en videoredigerare från Microsoft med inbyggd export. Gratisversionen tillåter export upp till 1080p utan vattenstämplar på ditt innehåll. Vattenstämplar visas endast när du använder Clipchamps lagerbibliotek. För att komprimera din egen video är det ett fungerande alternativ.

Observera: onlinetjänster laddar upp video till tredjepartsservrar. För privat eller konfidentiellt material, använd HandBrake lokalt.

WordPress-tillägg för bakgrundsvideo

Om din webbplats körs på WordPress är det enklare att bädda in bakgrundsvideo med tillägg. Inget behov av att redigera temat eller skriva CSS.

mb.YTPlayer bäddar in YouTube-video som bakgrund för en sida eller sektion. Fördelen är att själva videon lagras på YouTubes servrar och belastar inte din hosting. Tillägget lägger till en shortcode; infoga den där det behövs, så spelas videon upp som bakgrund. På mobila enheter startar videon vid första skärmtrycket. Tillägget har 1 000+ aktiva installationer och ett betyg på 4,1 på WordPress.org.

🔗 mb.YTPlayer på WordPress.org

Video Background är en lösning för dina egna videofiler. Du anger behållaren, en länk till MP4 och en länk till WebM. Tillägget upptäcker automatiskt webbläsaren och serverar rätt format. Kompatibelt med WPBakery och SiteOrigin. Minimal konfiguration.

🔗 Video Background på WordPress.org

Easy Video Background WP på CodeCanyon är ett betalalternativ med utökade funktioner: timer för autoplay, anpassningsbar overlay, volymkontroll. Engångsbetalning.

Om din video redan finns på YouTube, använd mb.YTPlayer. Om du har egna MP4- och WebM-filer på din hosting, använd Video Background. Behöver du finjusterade visningsinställningar? Easy Video Background WP.

En visuell demonstration av komprimeringsprocessen, från formatval till slutlig export:

⁉️🤔 Vanliga frågor

Måste bakgrundsvideo vara tyst?

Ja. Autoplay med ljud är irriterande och förbjudet enligt de flesta webbläsarpolicyer. Chrome och Safari har blockerat autoplay med ljud sedan 2018. Ta bort ljudspåret under exporten, så blir filen märkbart lättare.

Hur stor bör en bakgrundsvideo vara?

Ett bra riktmärke är upp till 5 MB för 10-15 sekunders 720p-bakgrund. Allt tyngre än 8 MB saktar märkbart ner laddningen på mobila nätverk. HandBrake med RF 24 vid 720p håller sig vanligtvis inom detta intervall.

MP4 eller WebM: vilket är bättre för bakgrunder?

Båda. MP4 är för Safari och iOS (de förstår inte WebM). WebM är för Chrome och Firefox (mindre fil vid samma kvalitet). Korrekt märkning med video-taggen väljer automatiskt rätt format. Förbered alltid båda filerna.

Kan man använda YouTube-video som bakgrund direkt?

Tekniskt sett ja, via YouTube IFrame API eller mb.YTPlayer-tillägget. Men det finns nackdelar: YouTubes kontroller syns vid hover, annonser kan avbryta bakgrunden, förladdningen är långsammare än med egna filer. För bakgrunder utan kompromisser är det bättre att ladda upp egna MP4 och WebM.

Vad ska visas på mobil om videon inte laddas?

En statisk JPG-posters: den första bildrutan i videon eller en speciellt förberedd bild. Ställs in via poster-attributet i video-taggen. De flesta WordPress-tillägg lägger till en poster automatiskt från den första bildrutan.

Är optimering värt ansträngningen?

Skillnaden mellan en rå 40-megabyte MOV och en komprimerad 4-megabyte MP4 är 2-3 sekunders sidladdningstid. För besökare på mobila nätverk avgör dessa sekunder om de stannar eller lämnar.

Gratis HandBrake, inbyggd Mac-export eller fem minuter i CloudConvert: minimal ansträngning, omedelbara resultat. Sidan flyger, Google är nöjd, besökare ser video istället för en förladdare.

Om du är på WordPress, installera mb.YTPlayer eller Video Background och glöm manuell kodning. Om du har egna filer, förbered alltid MP4 + WebM och håll den slutliga storleken under 5 MB. Detta är grunden som fungerar på vilken webbplats som helst, från landningssidor till webbutiker.