Taustavideo saa verkkosivuston tuntumaan elävältä. Mutta kun se painaa 40 Mt ja latautuu neljä sekuntia, kävijät lähtevät ennen kuin näkevät sisältösi.

HTTP Archive -datan mukaan vuodelta 2025 video muodostaa jopa 20% mediapainotteisten sivujen kokonaispainosta. Google huomioi latausnopeuden sijoituksissa, ja Core Web Vitals rankaisee hitaasta LCP:stä. Raskas taustavideo haittaa sekä käyttäjiä että hakukoneoptimointia.

Alla on vaiheittainen algoritmi taustavideon pakkaamiseksi 5 megatavuun ilman näkyvää laadun heikkenemistä. Ilmaisilla työkaluilla, ei rekisteröitymistä, ei vesileimoja.

💡 Nopea yleiskatsaus:

• Formaatit: valmistele MP4 (H.264) + WebM (VP9), kaksi tiedostoa kattaa kaikki modernit selaimet
• Työkalu: HandBrake, ilmainen, avoimen lähdekoodin, tarkalla bittinopeuden ja resoluution hallinnalla
• Macille: sisäänrakennettu QuickTime-vienti, ei kolmannen osapuolen ohjelmistoasennuksia
• YouTube-kikka: lataa palveluun, YouTube pakkaa uudelleen, lataa optimoitu MP4 takaisin
• Verkkopalvelut: CloudConvert, VideoSmaller, Clipchamp, kun et halua asentaa ohjelmistoja
• WordPress: mb.YTPlayer- ja Video Background -lisäosat, taustavideo ilman teeman muokkaamista

Formaatit: miksi tarvitset kaksi tiedostoa

Taustavideon on toistuttava sujuvasti kaikilla selaimilla. Yksi formaatti ei riitä.

MP4 (H.264), ensisijainen formaatti. Toimii Safarissa, Chromessa, Edgessä, Operassa ja kaikilla mobiililaitteilla. Tämä on perustaso, jonka jokainen selain ymmärtää poikkeuksetta.

WebM (VP9), täydentävä formaatti. Tiedosto on huomattavasti pienempi samalla laadulla. Chrome ja Firefox priorisoivat WebM:ää, mikä säästää käyttäjän kaistaa. Google Developersin mukaan VP9 tarjoaa jopa 50% bittinopeussäästön verrattuna H.264:ään identtisellä visuaalisella laadulla.

Mobiilille staattinen JPG-juliste. Jos selain kieltää automaattisen toiston (kaistansäästö, hidas verkko), käyttäjät näkevät kuvan tyhjän tilan sijaan.

Yli 720p-resoluutio on harvoin perusteltua taustoille. 1280 pikselin leveys kattaa koko kannettavan näytön, ja tiedosto painaa moninkertaisesti vähemmän kuin Full HD. Tarkista omalta mallipohjaltasi: 720p todennäköisesti täyttää tarpeesi reilusti.

Vaihe 1: HandBrake, ensisijainen työkalu

HandBrake on ilmainen, avoimen lähdekoodin videomuunnin Windowsille, Macille ja Linuxille. Se antaa täyden hallinnan koodekkiin, bittinopeuteen ja resoluutioon. Ei vesileimoja, ei rekisteröitymistä, ei tiedostokokorajoituksia.

Algoritmi taustavideon pakkaamiseen:

• Lataa HandBrake viralliselta verkkosivustolta ja avaa lähdevideotiedostosi.
• Summary-välilehdellä valitse MP4-formaatti ja valitse Web Optimized. Tämä siirtää metatiedot tiedoston alkuun, joten video alkaa toistaa heti ilman täyden latauksen odottamista.
• Dimensions-välilehdellä aseta leveydeksi 1280. Korkeus säätyy automaattisesti. Jätä Anamorphic-suodatin asentoon Automatic.
• Video-välilehdellä valitse H.264 (x264) -koodekki. Aseta Constant Quality -liukusäädin RF-arvoalueelle 22-26. Suuremmat luvut tarkoittavat pienempiä tiedostoja. Optimaalinen: 24 RF.
• Poista ääniraita. Taustavideo on oletuksena mykkä; poista valinta Audio-välilehdeltä.
• Klikkaa Start Encode. 30-50 Mt:n tiedosto pakkautuu 3-8 Mt:aan. Laatu pysyy hyväksyttävänä taustoille.

WebM-versiota varten toista samat vaiheet, mutta vaiheessa 2 valitse WebM-formaatti ja vaiheessa 4 valitse VP9-koodekki.

Käytännössä yksi läpivienti HandBrakella pienentää taustavideon koon 5-10 kertaa. Vierailijat eivät huomaa eroa, ja sivu latautuu 2-3 sekuntia nopeammin. Tämä on ensimmäinen asia, jonka teemme mille tahansa videolle ennen sen lataamista verkkosivustolle.

Vaihe 2: Pakkaus Macilla sisäänrakennetuilla työkaluilla

Jos käytät macOS:ää, sinun ei tarvitse asentaa mitään. Sisäänrakennettu QuickTime-vienti hoitaa peruspakkauksen.

• Avaa videotiedosto QuickTime Playerissa.
• Valitse File → Export → 720p.
• Määritä nimi ja kansio. Tiedosto tallentuu MP4-muodossa H.264-koodekilla.

Tämä menetelmä ei tarjoa hienojakoista bittinopeuden hallintaa, mutta se riittää nopeisiin tuloksiin. 60 Mt:n lähdetiedostosta tulee 8-12 Mt ilman ylimääräistä vaivaa.

Edistyneempi sisäänrakennettu vaihtoehto on iMovie. Tuo video, valitse File → Share → File, valitse 720p-resoluutio ja "Medium"-laatu. iMovie antaa hieman paremman hallinnan lopulliseen kokoon kuin QuickTime. Hienosäätötyöhön HandBrake on silti parempi, mutta kun tarvitset jotain "tässä ja nyt", Macin työkalut riittävät.

Vaihe 3: Pakkaus YouTuben kautta, nopea kikka

Laiskin tapa saada optimoitua videota on ajaa se YouTuben läpi.

• Lataa video YouTubeen. Voit asettaa sen "Piilotettu"-tilaan, jotta se ei näy julkisessa haussa.
• Odota, että käsittely valmistuu. YouTube automaattisesti transkoodaa videon kaikkiin moderneihin formaatteihin ja resoluutioihin.
• Lataa optimoitu MP4 takaisin muuntimella, esimerkiksi CloudConvertilla.

Tulos: YouTuben pakkausalgoritmit, jotka ovat alan parhaita. Tiedosto on pieni ja visuaalisesti puhdas. Tämä menetelmä auttaa, kun HandBrake ei ole saatavilla ja tarvitset pakkausta juuri nyt.

Vaihtoehtoinen lähestymistapa on olla lataamatta videotiedostoa lainkaan omalle palvelimellesi. Upota YouTube-video taustaksi mb.YTPlayer-lisäosan avulla (osio alla). Tämä säästää palvelintilaa ja kaistaa, vaikkakin antaa vähemmän hallintaa toistoon.

Verkkotyökalut: kun et halua asentaa ohjelmistoja

Jos et halua asentaa HandBrakea ja tiedosto on pieni, selainpohjaiset pakkaimet toimivat hyvin.

CloudConvert on yleiskäyttöinen työjuhta. Se tukee yli 200:aa formaattia ja muuntaa MP4:n WebM:ksi yhdellä klikkauksella. Ilmainen raja riittää satunnaiseen optimointiin. Haittapuoli: nopeus riippuu palvelimen jonosta.

VideoSmaller on minimalistinen palvelu yhteen tehtävään: MP4:n pakkaamiseen. Kahden painikkeen käyttöliittymä: lataa ja tallenna. Ei vaadi rekisteröitymistä. Ei toimi WebM:n tai MOV:n kanssa, vain MP4.

Clipchamp on Microsoftin videoeditori, jossa on sisäänrakennettu vienti. Ilmaisversio sallii viennin jopa 1080p-laadulla ilman vesileimoja omassa sisällössäsi. Vesileimat ilmestyvät vain käytettäessä Clipchampin varastosisältöä. Oman videosi pakkaamiseen se on toimiva vaihtoehto.

Huomio: verkkopalvelut lataavat videon kolmannen osapuolen palvelimille. Yksityiselle tai luottamukselliselle materiaalille käytä HandBrakea paikallisesti.

WordPress-lisäosat taustavideolle

Jos sivustosi toimii WordPressillä, taustavideon upottaminen on helpompaa lisäosilla. Ei tarvitse muokata teemaa tai kirjoittaa CSS:ää.

mb.YTPlayer upottaa YouTube-videon sivun tai osion taustaksi. Etuna on, että video itse säilytetään YouTuben palvelimilla eikä kuormita omaa palvelintasi. Lisäosa lisää shortcoden; lisää se tarvittavaan paikkaan, ja video toistuu taustana. Mobiililaitteilla video käynnistyy ensimmäisellä näytön kosketuksella. Lisäosalla on yli 1 000 aktiivista asennusta ja 4,1 arvosana WordPress.orgissa.

🔗 mb.YTPlayer WordPress.orgissa

Video Background on ratkaisu omille videotiedostoillesi. Määrität säiliön, linkin MP4:ään ja linkin WebM:ään. Lisäosa tunnistaa automaattisesti selaimen ja tarjoaa sopivan formaatin. Yhteensopiva WPBakeryn ja SiteOriginin kanssa. Minimaalinen konfigurointi.

🔗 Video Background WordPress.orgissa

Easy Video Background WP CodeCanyonissa on maksullinen vaihtoehto laajennetuilla ominaisuuksilla: automaattisen toiston ajastin, muokattava peittokuva, äänenvoimakkuuden säätö. Kertamaksu.

Jos videosi on jo YouTubessa, käytä mb.YTPlayeria. Jos sinulla on omat MP4- ja WebM-tiedostot palvelimellasi, käytä Video Backgroundia. Tarvitsetko hienosäädettyjä näyttöasetuksia? Easy Video Background WP.

Visuaalinen esittely pakkausprosessista formaatin valinnasta lopulliseen vientiin:

⁉️🤔 Usein kysytyt kysymykset

Pitääkö taustavideon olla mykkä?

Kyllä. Automaattinen toisto äänellä on ärsyttävää ja useimpien selainten käytäntöjen kieltämää. Chrome ja Safari ovat estäneet automaattisen toiston äänellä vuodesta 2018 lähtien. Poista ääniraita viennin aikana, niin tiedostosta tulee huomattavasti kevyempi.

Kuinka suuri taustavideon tulisi olla?

Hyvä vertailuarvo on enintään 5 Mt 10-15 sekunnin 720p-taustalle. Yli 8 Mt:n tiedostot hidastavat latausta huomattavasti mobiiliverkoissa. HandBrake RF 24:llä 720p-resoluutiolla pysyy tyypillisesti tällä alueella.

MP4 vai WebM: kumpi on parempi taustoille?

Molemmat. MP4 on Safaria ja iOS:ää varten (ne eivät ymmärrä WebM:ää). WebM on Chromea ja Firefoxia varten (pienempi tiedosto samalla laadulla). Oikea merkintä video-tagilla valitsee automaattisesti sopivan formaatin. Valmistele aina molemmat tiedostot.

Voiko YouTube-videota käyttää taustana suoraan?

Teknisesti kyllä, YouTube IFrame API:n tai mb.YTPlayer-lisäosan kautta. Mutta siinä on haittoja: YouTuben säätimet näkyvät hiiren osoittaessa päälle, mainokset voivat keskeyttää taustan, esilataus on hitaampaa kuin omilla tiedostoilla. Kompromissittomiin taustoihin on parempi ladata omat MP4- ja WebM-tiedostot.

Mitä mobiilissa tulisi näyttää, jos video ei lataudu?

Staattinen JPG-juliste: videon ensimmäinen ruutu tai erikseen valmisteltu kuva. Asetetaan poster-attribuutilla video-tagissa. Useimmat WordPress-lisäosat lisäävät julisteen automaattisesti ensimmäisestä ruudusta.

Onko optimointi vaivan arvoista?

Ero raa'an 40 megatavun MOV-tiedoston ja pakatun 4 megatavun MP4:n välillä on 2-3 sekuntia sivun latausaikaa. Mobiiliverkkojen kävijöille nuo sekunnit ratkaisevat, jäävätkö he vai lähtevätkö.

Ilmainen HandBrake, sisäänrakennettu Mac-vienti tai viisi minuuttia CloudConvertissa: minimaalinen vaiva, välittömät tulokset. Sivu lentää, Google on tyytyväinen, kävijät näkevät videon esilataajan sijaan.

Jos käytät WordPressiä, asenna mb.YTPlayer tai Video Background ja unohda manuaalinen koodaus. Jos sinulla on omat tiedostot, valmistele aina MP4 + WebM ja pidä lopullinen koko alle 5 Mt. Tämä on perustaso, joka toimii millä tahansa sivustolla, aina laskeutumissivuista verkkokauppoihin.