Kuvanpakkaaja

Viite

Miten kuvanpakkaus toimii?

Tämä työkalu käyttää selaimen sisäänrakennettua Canvas API:a kuvien uudelleenkoodaamiseen matalammalla laatuasetuksella. Kuva piirretään HTML Canvas -elementille ja viedään sitten canvas.toBlob()-funktiolla valitussa muodossa ja laadulla. Tämä on häviöllistä pakkausta — redundantti visuaalinen tieto hylätään käyttäen algoritmeja kuten diskreetin kosinimuunnoksen (DCT) JPEG:lle ja ennustavan koodauksen WebP:lle. Tuloksena on merkittävästi pienempi tiedosto minimaalisella havaittavalla laadunmenetyksellä.

JPEG vs WebP vs PNG — minkä muodon valitsen

JPEG: Paras valokuville ja monimutkaisille värigradienteille. Tukee laadun säätöä 1–100 %. Ei läpinäkyvyystukea. Laajimmin yhteensopiva muoto — toimii kaikkialla. WebP: Googlen kehittämä, WebP saavuttaa 25–35 % pienemmät tiedostokoot kuin JPEG vastaavalla visuaalisella laadulla. Tukee läpinäkyvyyttä (alfa-kanava) ja animaatiota. Kaikkien nykyaikaisten selainten tukema vuodesta 2020. Suositeltava muoto web-käyttöön. PNG: Häviötön pakkaus — ei laadun menetystä missään asetuksessa. Paras kuvakaappauksille, grafiikalle terävillä reunoilla, tekstipäällysteille, logoille ja kuville, jotka vaativat läpinäkyvyyttä. Laatuliukusäätimellä ei ole vaikutusta PNG-tulokseen, koska muoto on luontaisesti häviötön.

Miksi kuvia kannattaa optimoida webiin?

Kuvat muodostavat noin 50 % sivun kokonaispainosta keskimääräisellä verkkosivustolla HTTP Archiven mukaan. Optimoimattomat kuvat ovat ykkössyy hitaaseen Largest Contentful Paint (LCP) -mittariin — Core Web Vital, joka vaikuttaa suoraan Googlen hakusijoituksiin. Hero-kuvan pakkaaminen 2 MB:stä 200 KB:iin voi lyhentää latausaikaa useilla sekunneilla mobiiliyhteyksillä. Google suosittelee pitämään sivun kokonaispainon alle 1,6 MB:n hyvän mobiilisuorituskyvyn takaamiseksi — asianmukainen kuvanpakkaus on usein suurin yksittäinen keino tämän tavoitteen saavuttamiseksi.

Kuvanpakkauksen käyttötapaukset

Web-suorituskyky — pienennä kuvakokoja Core Web Vitals -kynnysarvojen saavuttamiseksi ja Lighthouse-pisteiden parantamiseksi. Sähköpostiliitteet — pakkaa kuvat alle tyypillisen 25 MB:n liiterajoituksen (Gmail, Outlook). Sosiaalinen media — optimoi kuvat alustojen latauskokorajoituksia varten: Twitter (5 MB), Instagram (30 MB), LinkedIn (10 MB). Verkkokauppa — pakkaa tuotekuvia ilman näkyvää laadun heikkenemistä sivunopeuden ja konversioprosenttien parantamiseksi. Dokumentaatio — pienennä kuvakaappauksia README-tiedostoille, wikeille ja Confluence-sivuille pitääksesi repositoriot ja sivut kevyinä.

Oikean laatuasetuksen valinta

JPEG-muodossa 75–85 %:n laatu tarjoaa parhaan tasapainon tiedostokoon ja visuaalisen tarkkuuden välillä — kontrolloidut tutkimukset osoittavat, että useimmat käyttäjät eivät erota laatua yli 85 %. Alle 60 % pakkausartefaktit (lohkoiset alueet, värinauhoitus) tulevat havaittaviksi, erityisesti gradienteissa ja ihonsävyissä. WebP laadulla 80 vastaa tyypillisesti JPEG:ä laadulla 90 ollen 30 % pienempi. PNG-muodossa laatuliukusäätimellä ei ole vaikutusta — PNG on aina häviötön. Käytä PNG:tä vain kun tarvitset pikselitarkkaa toistoa (kuvakaappaukset tekstillä, logot, ikonit) tai alfa-läpinäkyvyyttä.

Tietosuoja

Kaikki kuvankäsittely toimii 100% selaimessasi. Kuvia ei ladata millekään palvelimelle.