WebP, PNG ja JPG: nykyaikaiset kuvamuodot verkkoon

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. 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.

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 ei vaadi kuvan lataamista.

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. 1

   Mitat ensin

   Vie kuva suurimmassa koossa, jossa se todella näkyy. 1920×1080-kokoinen verkkosivun pääkuva ei tarvitse 6000 pikselin alkuperäistä.

2. 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. 3

   Tee pienemmät versiot

   Vie kuvat 640, 1280 ja 1920 pikselin levyisinä, jotta puhelimet lataavat pienen version.

4. 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.

<picture>
  <source type="image/avif" srcset="hero-1280.avif 1280w, hero-1920.avif 1920w" sizes="100vw">
  <source type="image/webp" srcset="hero-1280.webp 1280w, hero-1920.webp 1920w" sizes="100vw">
  <img src="hero-1920.jpg" alt="Evening light over the harbour" width="1920" height="1080" fetchpriority="high">
</picture>

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.

Missä PNG ja JPG ovat yhä parempia

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 1200×630-kokoisena PNG:nä tai JPG:nä. Asiakkaalle lähetetty WebP avautuu usein väärässä sovelluksessa tai ei lainkaan.

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.

# 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

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. Vanhempia muotoja vertaa PNG vai JPG, ja koko nopeuden tarkistuslista löytyy artikkelista kuvien optimointi verkkoon.