# MP4 vai WebM: kumpi videomuoto kannattaa viedä [Canonical HTML page](https://gradiently.design/fi/guide/mp4-vs-webm) Kaksi säiliömuotoa, muutama koodekki ja yksi käytännön kysymys: minkä tiedoston annat Instagramille ja minkä laitat verkkosivullesi. ## The short version - MP4 on turvallisin videon vientimuoto, koska se toistuu lähes kaikissa puhelimissa, selaimissa, editoreissa ja somealustoilla. - WebM on avoin, rojaltivapaa muoto, joka on usein MP4:ää pienempi vastaavalla laadulla ja siksi hyödyllinen verkkosivuilla. - Vie someen MP4, koska alustat hyväksyvät sen luotettavasti ja koodaavat joka tapauksessa kaiken uudelleen. - Verkkosivulla tavallinen tapa on tarjota WebM ensin ja MP4 varavaihtoehtona saman videoelementin sisällä. - WebM voi sisältää läpinäkyvyyttä sitä tukevissa selaimissa, mutta tavallinen H.264-koodekkia käyttävä MP4 ei voi. Kun valitset **MP4:n vai WebM:n**, vie MP4 paikkoihin, joita et hallitse: Instagramiin, TikTokiin, LinkedIniin, asiakkaan sähköpostiin tai videoeditoriin. Se toistuu lähes kaikkialla. Valitse WebM omalle verkkosivullesi, jossa se on usein pienempi samalla laadulla. Tarjoa mieluiten molemmat, jotta selain valitsee parhaiten toistuvan. Tämä kattaa useimmat päätökset. Loput artikkelista selittää syyt ja muutamat tapaukset, joissa vastaus muuttuu. ## Mitä MP4 ja WebM oikeastaan ovat Molemmat ovat **säiliöitä**: ne sisältävät videovirran, äänivirran ja tietoja niistä. Laadun ja koon ratkaisee sisällä oleva **koodekki**. MP4 sisältää yleensä H.264-videota ja AAC-ääntä, joskus H.265:tä tai AV1:tä. WebM sisältää VP8-, VP9- tai AV1-videota ja Opus- tai Vorbis-ääntä. WebM luotiin avoimeksi, rojaltivapaaksi verkkovideomuodoksi. MP4 on pitkään vakiintunut standardi, jonka ympärille kamerat, puhelimet ja editointiohjelmat rakennettiin. | Ominaisuus | MP4 | WebM | | --- | --- | --- | | Tavalliset videokoodekit | H.264, H.265, AV1 | VP8, VP9, AV1 | | Tavalliset äänikoodekit | AAC | Opus, Vorbis | | Tiedostokoko | Pieni | Usein pienempi vastaavalla laadulla | | Toistuu | Lähes kaikessa | Nykyisissä selaimissa, vaihtelevammin sovelluksissa ja editoreissa | | Lataus someen | Hyväksytään kaikkialla | Ei hyväksytä luotettavasti | | Läpinäkyvyys | Ei H.264:llä | Kyllä VP9:llä sitä tukevissa selaimissa | | Lisensointi | Osassa koodekeista on patenttilisenssejä | Avoin ja rojaltivapaa | Yleiskuva. Tuki muuttuu ajan myötä, joten tarkista nykyinen selaintuki caniuse-palvelusta ennen poikkeustapaukseen luottamista. ## Mikä muoto someen Vie MP4. Jokainen suuri alusta hyväksyy sen ja koodaa lataamasi tiedoston uudelleen. Pienempi WebM ei siis auta enää latauksen jälkeen. Videon ulkonäköön vaikuttavat todellisuudessa ruudun koko, kuvataajuus ja lähettämäsi tiedoston laatu. Lähetä Reeleihin ja tarinoihin siisti 1080×1920 MP4 tai pystysyötejulkaisuun 1080×1350, eikä alustan tarvitse muuttaa kokoa. - Reel, tarina, TikTok 9:16: 1080 × 1920 - Pystyjulkaisu 4:5: 1080 × 1350 - Neliöjulkaisu 1:1: 1080 × 1080 - Vaakamuoto 16:9: 1920 × 1080 Useimmin vietävät kehykset. Jokainen kannattaa ladata MP4:nä. Alustakohtaiset kehykset löydät artikkelista [somevideoiden koot](https://gradiently.design/fi/guide/social-video-sizes). ## Mikä muoto verkkosivulle Omalla sivullasi hallitset toistinta, joten voit tarjota molemmat. Selain lukee `source`-elementit järjestyksessä ja toistaa ensimmäisen tukemansa. Laita WebM ensin, jos se on tiedostoista pienempi, ja pidä MP4 varalla selaimille, jotka eivät toista sitä. ```html ``` WebM ensin, MP4 varavaihtoehtona. Julistekuva näkyy videon latautuessa ja selaimissa, jotka eivät toista kumpaakaan. Mittaa ennen oletuksia. Joissakin klipeissä, etenkin hyvin lyhyissä tai yksinkertaisissa, hyvin koodattu MP4 on yhtä pieni kuin WebM ja yhden tiedoston tarjoaminen helpompaa. MDN:n [verkkovideokoodekkien opas](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs) kertoo, mitä kukin selain toistaa. Taustaklipeille [verkkosivun videotaustat](https://gradiently.design/fi/guide/video-background-website) käsittelee julistekuvia, kokoja ja suorituskykyä. ## MP4:n ja WebM:n muuntaminen Jos sinulla on yksi muoto mutta tarvitset toisen, ilmainen komentorivityökalu FFmpeg hoitaa molemmat suunnat. Alla olevat komennot ovat järkeviä lähtökohtia suunnitelluille silmukoille: ei ääntä, hyvä laatu ja MP4, jonka toisto alkaa ennen latauksen valmistumista. ```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 ``` Pienempi CRF tarkoittaa parempaa laatua ja suurempia tiedostoja. Poista -an, jos videon ääni pitää säilyttää. > **Miksi yuv420p on tärkeä** Jotkin koodaimet tekevät MP4-tiedostoja värimuodossa, jota puhelimet ja selaimet eivät toista. `yuv420p` pitää tiedoston kaikkien ymmärtämässä muodossa. ## Liukuvärit, raidoittuminen ja laatu Pehmeät liukuvärit ovat vaikeimpia pakattavia. Suuret, hitaasti muuttuvat värialueet paljastavat bittien puutteen näkyvinä askelina. Tummissa liukuväreissä tämä näkyy ensin. Molemmat muodot käsittelevät sen hyvin riittävällä laatuasetuksella, kumpikaan ei liian matalalla. Pieni rakeisuus suunnitelmassa auttaa paljon, koska koodaimet säilyttävät tekstuurin eivätkä litistä sitä raidoiksi. - Tasainen: riittävä bittivirta: `linear-gradient(180deg, #0b1026 0%, #1e3a8a 55%, #60a5fa 100%)` - Portaittainen: liian niukka koodaus: `linear-gradient(180deg, #0b1026 0% 20%, #13234f 20% 40%, #1e3a8a 40% 60%, #3f6fc4 60% 80%, #60a5fa 80% 100%)` Liioiteltu näkymä raidoittumiseen. Korjaus on sama MP4:ssä ja WebM:ssä: enemmän laatua, hieman rakeisuutta ja ei ylimääräisiä koonmuutoksia. Still-kuvien syyt ja korjaukset löytyvät artikkelista [liukuvärin raidoittuminen](https://gradiently.design/fi/guide/gradient-banding). Animoitu versio lisää yhden säännön: vie täsmälleen julkaisukoossa, jotta mitään ei skaalata kahdesti. ## Mihin GIF sopii GIF ei ole videomuoto, ja samalla silmukalla se on kolmesta suurin. Sen 256 värin raja raidoittaa liukuvärejä. Sen vahvin alue on sähköposti, jossa useimmat ohjelmat näyttävät GIFit mutta harvat toistavat videon. Kolmen muodon vertailu on artikkelissa [GIF ja MP4](https://gradiently.design/fi/guide/gif-vs-mp4), ja hyvän GIFin tekemistä käsittelee [animoidut GIFit](https://gradiently.design/fi/guide/gif-maker-tips). ### Vie MP4 näihin - Instagram, TikTok, LinkedIn, X, YouTube - Lähetys asiakkaalle tai editoijalle - Esitykset ja näytöt, joita et hallitse - Aina kun olet epävarma ### Vie WebM näihin - Oma verkkosivu MP4:n rinnalla - Selaimessa läpinäkyvyyttä tarvitsevat päällekkäiskerrokset - Sivut, joilla jokainen kilotavu merkitsee - Selaintyökalut, jotka tallentavat suoraan WebM:ää Gradientlyssä videovienti kuuluu Prohon. Tiedosto on MP4 tai WebM sen mukaan, mitä selaimesi osaa tallentaa. Saat joka tapauksessa liikkuvan Markin sanojesi taakse enintään 1080p:n tarkkuudella, valmiina lataukseen tai upotukseen. Yksityiskohdat löytyvät artikkelista [kuvien ja silmukoiden vienti](https://gradiently.design/fi/guide/export-images-and-loops). ## FAQ ### Onko WebM parempi kuin MP4? WebM on usein pienempi vastaavalla laadulla sekä avoin ja rojaltivapaa. MP4 toistuu kuitenkin paljon useammissa laitteissa ja sovelluksissa. Verkkosivuilla WebM on hyvä ensivalinta MP4:n ollessa varalla, muualla MP4 on turvallisempi. ### Voinko ladata WebM:n Instagramiin tai TikTokiin? Älä luota siihen. Muunna ensin MP4:ksi, jonka kaikki alustat hyväksyvät, täsmälleen julkaisemasi muodon ruutukokoon. ### Toistaako Safari WebM:ää? Safarin uudet versiot toistavat WebM:ää, mutta tuki tuli muita selaimia myöhemmin ja on vaihdellut koodekin ja laitteen mukaan. MP4-varaversio poistaa ongelman. ### Kumpi on pienempi, MP4 vai WebM? VP9- tai AV1-koodekkia käyttävä WebM on usein pienempi kuin H.264-MP4 vastaavalla laadulla, mutta ei aina. Koodaa molemmat ja vertaa oikeita tiedostoja. ### Mikä muoto tukee läpinäkyvää videota? VP9-WebM voi sisältää alfakanavan, jonka sitä tukevat selaimet näyttävät. Tavallinen H.264-MP4 ei voi.