Kuva WebP-muotoon

Haluatko nopeuttaa verkkosivustoa tai verkkokauppaa pienemmillä kuvilla? Muunna JPG ja PNG WebP-muotoon. Muunnin arvioi ennen muunnosta, kuinka paljon säästät JPG:hen verrattuna, ja valmistaa myös HTML-koodin varajärjestelmällä vanhemmille selaimille. Kaikki tapahtuu selaimessasi, kuvia ei lähetetä minnekään.

Miten muunnat kuvan WebP-muotoon

1. Lataa kuvat. Vedä ne ikkunaan tai klikkaa ”Selaa tiedostoja”. Muunnin käsittelee JPG-, PNG-, BMP- ja pysäytetyn GIF-kuvan, kymmeniä tiedostoja kerralla.
2. Aseta laatu. Oletuslaatu 80 sopii useimmille sivustoille. Portfolioon valitse 85 ja 90 väliltä, esikatseluihin 70.
3. Muunna ja lataa. Painike ”Muunna” käsittelee koko erän, valmiit WebP-kuvat lataat yksitellen tai ZIP-tiedostona.

Yksityiskohtiin haluava avaa esikatselun alta ”Tekniset tiedot”, joista löytyy suurennuslasi, säästöarvio ja HTML-koodi.

Miksi muuntaa kuvat WebP-muotoon

WebP on Googlen kehittämä verkkoon suunniteltu formaatti. Googlen tutkimuksen (englanniksi) mukaan häviölliset WebP-tiedostot ovat samalla laadulla 25 ja 34 prosentin väliltä pienempiä kuin JPEG, ja häviöttömät noin 26 prosenttia pienempiä kuin PNG. Pienemmät kuvat tarkoittavat nopeampaa sivun latautumista, parempia Core Web Vitals -tuloksia ja pienempää datankulutusta mobiililaitteella.

JPG:hen verrattuna WebP osaa lisäksi läpinäkyvyyden, joten se korvaa myös läpinäkyvätaustaisen PNG:n. Nykyään sitä tukevat kaikki yleiset selaimet (englanniksi), Safari mukaan lukien versiosta 14 alkaen.

Mitä muuten WebP-muunnin osaa

Säästöarvio jo ennen muunnosta

Teknisistä tiedoista löydät ”Arvio näytteestä”: muunnin koodaa valitusta kuvasta pienennetyn näytteen ja laskee, kuinka suuri WebP olisi valituilla asetuksilla, kuinka suuri JPEG olisi samalla laadulla ja kuinka monta prosenttia säästät. Näet heti, kannattaako muunnos.

HTML-koodi varajärjestelmällä

Muunnin valmistaa valmiin koodin <picture>-elementille: selaimet, jotka tukevat WebP:tä, lataavat uuden tiedoston, muut saavat alkuperäisen JPG:n tai PNG:n. Koodi sisältää myös kuvan mitat ja laiskan latauksen, sen voi liittää suoraan sivupohjaan. Miten <picture> toimii, kertoo MDN (englanniksi).

Suurennuslasi 100 %:n suurennuksella

Klikkaamalla esikatselua siirrät suurennuslasin mihin tahansa kohtaan ja vertaat alkuperäistä tulokseen pikseli pikseliltä. Häviöllisen pakkauksen jäljet näkyvät ensimmäisenä tekstissä, reunoissa ja pehmeissä liu’uissa, sinne kannattaa katsoa.

Läpinäkyvyys säilyy

Läpinäkyvätaustaisen PNG:n muunnat WebP-muotoon menettämättä alfakanavaa. Jos kohdesovellus ei tue läpinäkyvyyttä, kytke päälle ”Litistä läpinäkyvyys väriksi”.

Suoja huonolta lopputulokselta

Animoidun GIF-kuvan muunnin hylkää, koska siitä jäisi huomaamatta vain ensimmäinen ruutu. Kun muunnettu tiedosto on suurempi kuin alkuperäinen, mikä on tavallista jo hyvin pakatuille kuville, taulukko merkitsee sen ja yhdellä klikkauksella säilytät alkuperäisen.

Koon muutos, uudelleennimeäminen, ei metatietoja

Kohdassa ”Lisäasetukset” pienennät kuvat pisimmän sivun pikselimäärän tai prosenttien mukaan ja nimeät ne kaikki kerralla uudelleen muuttujien {name}, {width}, {height} ja {index} avulla. Muunnos poistaa EXIF-, ICC- ja GPS-tiedot, joten kuvat eivät paljasta sijaintia. Jos kuvat täytyy pienentää tarkkoihin mittoihin tai kilotavurajaan, käytä kuvien pienennystä.

Minkä WebP-laadun valita

Käyttö	Laatu	Huomio
Portfolio, tuotekuvat	85 ja 90 välillä	Yksityiskohdat ilman häviötä, silti pienempi kuin JPG
Tavallinen sivusto ja blogi	75 ja 80 välillä	Paras laadun ja koon suhde
Esikatselut, galleriat	65 ja 70 välillä	Pienet tiedostot, pieniä häiriöitä

Milloin WebP ja milloin muu formaatti

• Valokuvat ja grafiikka verkkoon: WebP, varmuuden vuoksi <picture>-varajärjestelmällä.
• Kuvat sähköpostiin, viranomaisille tai vanhemmille ohjelmille: mieluummin JPG, sen avaa todella kaikki.
• Aineisto jatkokäsittelyyn ja tulostukseen: PNG, ilman minkäänlaista häviötä.

Kuvien mitat verkkosivulla tarkistat nopeasti ennen muunnosta kuvien mittojen analysoinnissa.

Usein kysytyt kysymykset

Miten muunnan JPG:n WebP-muotoon?

Lataa JPG-tiedostot, jätä laatu 80:ksi tai muuta sitä ja klikkaa ”Muunna”. WebP on samalla visuaalisella laadulla tyypillisesti neljänneksen tai kolmanneksen pienempi. Kuinka paljon tietty valokuva säästää, näyttää arvio teknisissä tiedoissa.

Miten muunnan PNG:n WebP-muotoon ja säilytän läpinäkyvyyden?

Riittää, kun lataat PNG:n ja muunnat sen, läpinäkyvyys säilyy automaattisesti. Jos et sitä halua, kytke päälle ”Litistä läpinäkyvyys väriksi”.

Tukevatko kaikki selaimet WebP:tä?

Kyllä, kaikki nykyiset selaimet tukevat sitä, Safari versiosta 14 alkaen. Varmuuden vuoksi vanhemmille laitteille käytä muuntimen valmistamaa HTML-koodia elementillä <picture>: vanhempi selain lataa silloin alkuperäisen JPG:n tai PNG:n.

Onko WebP parempi kuin JPG?

Verkkoon kyllä: samalla laadulla se on pienempi ja osaa läpinäkyvyyden. JPG:n avaa silti edelleen useampi ohjelma, tulostin ja viranomainen. Käytä siis verkkoon WebP:tä, jakamiseen ja tulostukseen JPG:tä.

Miksi muunnin hylkäsi GIF-tiedostoni?

Animoitu GIF muuttuisi muunnoksessa huomaamatta yhdeksi pysäytyskuvaksi. Jotta tulos ei yllättäisi, muunnin hylkää sen. Pysäytetyt GIF-kuvat se muuntaa ongelmitta.

Ladataanko kuvani palvelimelle?

Ei. Muunnos tapahtuu suoraan selaimessasi eikä tiedostoja lähetetä minnekään.