# WebP, PNG ja JPG: nykyaikaiset kuvamuodot verkkoon [Canonical HTML page](https://gradiently.design/fi/guide/webp-images) Verkkosivuston ei tarvitse käyttää samoja tiedostoja kuin Instagram-julkaisusi. WebP ja AVIF tekevät PNG:n ja JPG:n työn pienemmillä tiedostoilla, kun otat ne käyttöön oikein. ## The short version - WebP-kuvamuoto voi olla häviöllinen kuten JPG tai häviötön kuten PNG, ja se tukee läpinäkyvyyttä ja animaatiota. - Samalla silmin havaittavalla laadulla WebP-tiedostot ovat yleensä selvästi pienempiä kuin vastaavat JPG- ja PNG-tiedostot. - Kaikki Chromen, Safarin, Firefoxin ja Edgen nykyiset versiot tukevat WebP:tä, joten varakuva tarvitaan vain hyvin vanhoja selaimia varten. - AVIF pakkaa WebP:tä tehokkaammin ja on nykyään laajalti tuettu, mutta sen koodaus on hitaampaa. - Käytä PNG:tä ja JPG:tä somepalveluihin ladattavissa ja muille lähetettävissä tiedostoissa. Omalla verkkosivustolla kannattaa käyttää WebP:tä tai AVIF:ää. Kun mietit, **WebP vai PNG** tai JPG, WebP voittaa omalla verkkosivustollasi. Se voi pakata häviöllisesti JPG:n tapaan tai häviöttömästi PNG:n tapaan, tukee läpinäkyvyyttä ja tuottaa samalla silmin havaittavalla laadulla pienemmät tiedostot. Kaikki nykyiset selaimet tukevat sitä. PNG ja JPG ovat yhä parempia sivustosi ulkopuolella: Instagram- ja LinkedIn-latauksissa, sähköpostiliitteissä sekä asiakkaille ja painotaloille lähetettävissä tiedostoissa. Käytännön sääntö on siis yksinkertainen. Tee ja säilytä alkuperäiset PNG:nä, tarjoa kävijöille WebP:tä tai AVIF:ää. ## Mikä WebP on WebP on Googlen kehittämä kuvamuoto, josta kerrotaan [web.dev-sivustolla](https://web.dev/articles/serve-images-webp). Yksi muoto kattaa kolme aiemmin erillistä tarvetta: häviölliset valokuvat JPG:n tapaan, häviöttömän läpinäkyvän grafiikan PNG:n tapaan ja lyhyet animaatiot GIF:n tapaan. Säästö perustuu tehokkaampaan pakkaukseen, joka ennustaa pikselilohkon sisällön viereisistä lohkoista ja tallentaa vain erotuksen. | Ominaisuus | JPG | PNG | WebP | AVIF | | --- | --- | --- | --- | --- | | Häviöllinen | Kyllä | Ei | Kyllä | Kyllä | | Häviötön | Ei | Kyllä | Kyllä | Kyllä | | Läpinäkyvyys | Ei | Kyllä | Kyllä | Kyllä | | Animaatio | Ei | Rajallisesti (APNG) | Kyllä | Kyllä | | Selaintuki | Kaikissa selaimissa | Kaikissa selaimissa | Kaikki nykyiset selaimet | Kaikki nykyiset selaimet | | Somepalvelut hyväksyvät | Kyllä | Kyllä | Vaihtelevasti | Harvoin | Tarkista ajantasainen tuki [caniuse.com-sivustolta](https://caniuse.com/webp), jos yleisösi käyttää vanhoja laitteita. ## WebP vai PNG grafiikkaan ja läpinäkyvyyteen Logoissa, käyttöliittymäkuvissa ja taustasta irrotetuissa kuvissa häviötön WebP säilyttää jokaisen pikselin PNG:n tapaan ja on yleensä pienempi. Suurempi hyöty saadaan häviöllisestä läpinäkyvästä WebP:stä: pehmeäreunainen, läpinäkyvää reunaa tarvitseva tuotekuva voi viedä murto-osan PNG:n tilasta ilman näkyvää eroa. Liukuvärit ovat huolellisuutta vaativa poikkeus. Tasainen tumma väriliuku voi porrastua häviöllisessä WebP:ssä aivan kuten JPG:ssä. Jos sivun pääkuva on enimmäkseen liukuväriä, vertaa korkealaatuista häviöllistä versiota häviöttömään. Mieti myös, tarvitaanko kuvatiedostoa lainkaan: [CSS-liukuväri](https://gradiently.design/fi/guide/css-linear-gradient) ei vaadi kuvan lataamista. - Tummansininen: kokeile häviötöntä: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Vaalea roosa: korkea häviöllinen laatu: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Kirkas kolmen pisteen liuku: häviöllinen: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` Tummissa, hienovaraisissa liu’uissa pakkaus näkyy ensin. Kirkkaat, yksityiskohtaiset pinnat kätkevät sen. Valitse WebP-asetukset sisällön, älä tottumuksen mukaan. ## WebP vai JPG valokuviin Valokuvissa häviöllinen WebP laadulla noin 75-80 vastaa yleensä JPG:tä laadulla 85, mutta vie vähemmän tilaa. Ero kertautuu paljon kuvia sisältävillä sivuilla, kuten tuoteruudukoissa, portfolioissa ja blogeissa. Yhdessä pääkuvassa hyöty on todellinen mutta maltillisempi. Oikeat pikselimitat merkitsevät enemmän kuin kuvamuoto. 1. **Mitat ensin** Vie kuva suurimmassa koossa, jossa se todella näkyy. 1920×1080-kokoinen [verkkosivun pääkuva](https://gradiently.design/fi/guide/website-hero-background) ei tarvitse 6000 pikselin alkuperäistä. 2. **Valitse laatu** Aloita häviöllisessä WebP:ssä laadusta 80. Tarkista iho, taivas ja tummat kulmat 100 %:n suurennuksella. Laske laatua, kunnes huomaat muutoksen, ja palaa yksi askel takaisin. 3. **Tee pienemmät versiot** Vie kuvat 640, 1280 ja 1920 pikselin levyisinä, jotta puhelimet lataavat pienen version. 4. **Tarjoa kuvat srcsetillä** Anna selaimen valita oikea leveys `srcset`- ja `sizes`-määritteillä alla olevan koodin tapaan. ## AVIF vai WebP AVIF on uudempi ja pakkaa yleensä WebP:tä tehokkaammin, erityisesti valokuvia ja tasaisia sävyjä. Kaikki nykyiset suuret selaimet tukevat sitä. Haittoja ovat hitaampi koodaus, jolla on merkitystä reaaliaikaisessa muunnoksessa, ja pienempi määrä tiedoston avaavia työkaluja. Monet sivustot tarjoavat ensin AVIF:n, sitten WebP:n ja viimeisenä JPG:n. Selain valitsee ensimmäisen ymmärtämänsä muodon. ```html Evening light over the harbour ``` Selain käyttää ensimmäistä tukemaansa `source`-elementtiä ja turvautuu tarvittaessa `img`-elementtiin. Leveys ja korkeus estävät asettelun hyppimisen latauksen aikana. Jos käytät sovelluskehystä tai kuvien CDN-palvelua, se saattaa tehdä kaiken automaattisesti yhdestä ladatusta alkuperäisestä. Tarkista tulos ennen kuin muunnat mitään käsin. > **Animoitu WebP ja GIF** Animoitu WebP on paljon GIF:iä kevyempi ja säilyttää kaikki värit, joten se sopii verkkosivun pieniin toistuviin animaatioihin. Muutamaa sekuntia pidempiin sisältöihin äänetön MP4- tai WebM-video on vielä kevyempi. [GIF vai MP4](https://gradiently.design/fi/guide/gif-vs-mp4) vertailee niitä tarkemmin. ## Missä PNG ja JPG ovat yhä parempia ### Käytä WebP:tä tai AVIF:ää - Oman verkkosivuston kuvat - Tuoteruudukot ja galleriat - Blogin ja artikkeleiden kuvat - Läpinäkyvät, taustasta irrotetut kuvat verkossa ### Käytä PNG:tä tai JPG:tä - Instagramiin, LinkedIniin, X:ään ja Facebookiin ladattavat kuvat - Open Graph -linkkiesikatselukuvat - Sähköpostitse tai asiakkaille lähetettävät tiedostot - Alkuperäiset, joita muokkaat myöhemmin Somepalvelut muuntavat ladatut kuvat itse, ja jotkin hylkäävät WebP:n tai käsittelevät sitä väärin. Myös linkkiesikatselujen indeksoijat vaihtelevat, joten pidä [Open Graph -kuvasi](https://gradiently.design/fi/guide/open-graph-image-size) 1200×630-kokoisena PNG:nä tai JPG:nä. Asiakkaalle lähetetty WebP avautuu usein väärässä sovelluksessa tai ei lainkaan. Leveä linkkiesikatselukuva, joka ilmoittaa kevätmalliston julkaisusta liukuväritaustalla Linkkiesikatselu koossa 1200×630. Pidä tämä PNG:nä, jotta jokaisen alustan indeksoija osaa lukea sen. ## PNG:n muuntaminen WebP:ksi Googlen ilmainen `cwebp`-komentorivityökalu muuntaa yhden tiedoston tai kokonaisen kansion. Useimmat kuvankäsittely- ja suunnittelutyökalut vievät nykyään WebP:tä suoraan. ```bash # lossy, good for photos cwebp -q 80 photo.png -o photo.webp # lossless, good for logos and interface graphics cwebp -lossless logo.png -o logo.webp # a whole folder for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done ``` Säilytä alkuperäiset PNG-tiedostot. WebP:n muuntaminen takaisin PNG:ksi ei palauta häviöllisessä pakkauksessa kadonneita yksityiskohtia. Designien alkuperäiset voivat pysyä PNG-muodossa: Gradiently vie designeja PNG:nä ja JPG:nä, jotka sopivat sekä tähän muunnokseen että kaikkiin somelatauksiin. Laatuasetusten perusteista kerrotaan artikkelissa [kuvien pakkaaminen liukuvärejä pilaamatta](https://gradiently.design/fi/guide/image-compression). Vanhempia muotoja vertaa [PNG vai JPG](https://gradiently.design/fi/guide/png-vs-jpeg), ja koko nopeuden tarkistuslista löytyy artikkelista [kuvien optimointi verkkoon](https://gradiently.design/fi/guide/lighthouse-image-performance). ## FAQ ### Onko WebP parempi kuin PNG? Verkkosivustolla yleensä kyllä: häviötön WebP säilyttää samat pikselit pienemmässä tiedostossa ja tukee läpinäkyvyyttä. Somelatauksiin ja muille lähetettäviin tiedostoihin PNG on varmempi, koska se avautuu kaikkialla. ### Tukevatko kaikki selaimet WebP:tä? Kaikki Chromen, Safarin, Firefoxin ja Edgen nykyiset versiot tukevat WebP:tä. Käytä `picture`-elementtiä JPG- tai PNG-varakuvan kanssa, jos tarvitset tukea hyvin vanhoille selaimille. ### Kannattaako käyttää AVIF:ää vai WebP:tä? AVIF on yleensä pienempi. WebP:n koodaus on nopeampaa, ja useampi työkalu tukee sitä. Kun tarjoat ensin AVIF:n ja sen varavaihtoehtona WebP:n, useimmat kävijät saavat pienimmän tiedoston. ### Voiko WebP:n ladata Instagramiin? Tuki vaihtelee, joten lataa sen sijaan PNG tai JPG oikeassa koossa, esimerkiksi 1080×1350 pystyjulkaisuun. ### Tukeeko WebP läpinäkyvyyttä? Kyllä, sekä häviöllisenä että häviöttömänä. Siksi se korvaa hyvin läpinäkyvät PNG-kuvat verkossa.