Kuinka selaimet purkavat kuvia: PNG:n, JPEG:n ja WebP:n kulissien takana

Kuvat ovat yksi tärkeimmistä nykyaikaisten verkkosivustojen elementeistä. Olipa kyseessä tuotekuvat, sosiaalisen median julkaisut, hallintapaneelit tai interaktiiviset sovellukset, selaimesi lataa, purkaa ja renderöi kuvia jatkuvasti taustalla.

Useimmat kehittäjät tietävät, että PNG, JPEG ja WebP eroavat laadun ja pakkaamisen suhteen, mutta paljon harvempi ymmärtää, mitä oikeastaan tapahtuu, kun kuva saavuttaa selaimen.

Tässä artikkelissa tarkastelemme kuvanpurun koko elinkaarta, selitämme, miten selaimet käsittelevät eri kuvatiedostomuotoja, ja jaamme käytännön optimointivinkkejä, jotka parantavat verkkosivuston nopeutta ja käyttäjäkokemusta.

Miksi kuvien purkaminen on tärkeää

Kuvanpurku on prosessi, jossa pakattu kuvatieto muunnetaan raakapikseleiksi, joita GPU:si tai näyttösi voi renderöidä.

Jokainen verkkosivulla näytetty kuva käy läpi useita vaiheita:

1. Lataaminen
2. Tiedoston jäsentäminen
3. Kuvatiedon purkaminen
4. Pikselien purku
5. Väriprofiilien soveltaminen
6. Pikselien lataaminen GPU:lle
7. Renderöinti näytöllä

Vaikka nämä vaiheet tapahtuvat millisekunneissa, tehottomat kuvat voivat merkittävästi lisätä sivun latausaikaa, CPU:n käyttöä, akun kulutusta ja muistin käyttöä.

Nykyaikaisille verkkosivustoille kuvien purkamisen optimointi on yhtä tärkeää kuin kuvatiedostojen koon pienentäminen.

Selaimen kuvaputki

Yksinkertaistettu selaimen kuvaputki näyttää tältä:

Server
   │
   ▼
Download Image
   │
   ▼
Read Image Header
   │
   ▼
Choose Decoder
   │
   ▼
Decompress Data
   │
   ▼
Decode Pixels
   │
   ▼
Color Correction
   │
   ▼
GPU Upload
   │
   ▼
Render to Screen

Jokainen selain—mukaan lukien Chrome, Firefox, Safari ja Edge—seuraa samanlaista työnkulkua, vaikka niiden sisäiset kuvakirjastot eroavatkin.

Vaihe 1: Kuvan lataaminen

Kun HTML sisältää kuvan:

<img src="mountains.webp" alt="Landscape">

selain:

• Ratkaisee URL-osoitteen
• Lähettää HTTP-pyynnön
• Lataa pakatun kuvan
• Tallentaa sen muistiin tai välimuistiin

Selain ei näytä kuvaa heti. Sen sijaan se ensin määrittää, mikä dekooderi käsittelee tiedoston.

Vaihe 2: Kuvan otsikon lukeminen

Jokainen kuvatiedostomuoto alkaa ainutlaatuisella tiedostotunnisteella.

Esimerkiksi:

Selain lukee vain ensimmäiset muutamat tavut tunnistaakseen:

• kuvatyyppi
• mitat
• värisyvyys
• metatiedot
• läpinäkyvyyden tuki
• animaation tuki

Tämä tieto määrittää, mitä purkualgoritmia tulisi käyttää.

Kuinka PNG-kuvat puretaan

PNG käyttää häviötöntä pakkausta, mikä tarkoittaa, että kuvaaineistoa ei poisteta.

Selain suorittaa useita toimintoja:

1. Lue PNG-lohkoja
2. Jäsennä metatiedot
3. Pura pakattu data DEFLATE-menetelmällä
4. Käänteinen PNG-suodatus
5. Rakenna pikseliarvot uudelleen
6. Muunna RGBA:ksi

PNG-tiedostot sisältävät useita lohkoja:

• IHDR
• IDAT
• PLTE
• tEXt
• IEND

Suurin prosessointikustannus johtuu PNG-suodattimien kääntämisestä ja DEFLATE-purusta.

Edut

• Täydellinen kuvanlaatu
• Tukee läpinäkyvyyttä
• Erinomainen käyttöliittymägrafiikkaan
• Erinomainen kuvakaappauksiin

Haitat

• Suuremmat tiedostokoot
• Hitaampi dekoodaus kuin JPEG
• Korkeampi muistin käyttö

Kuinka JPEG-kuvat puretaan

JPEG käyttää häviöllistä pakkausta.

Toisin kuin PNG, JPEG tallentaa taajuustietoa tarkkojen pikseliarvojen sijaan.

Selaindekoodausprosessi sisältää:

1. Jäsennä JPEG-merkkejä
2. Pura Huffman-taulut
3. Suorita käänteinen kvantisointi
4. Suorita käänteinen diskreetti kosinimuunnos (IDCT)
5. Muunna YCbCr RGB:ksi
6. Näytä pikselit

Tämä prosessi on erittäin optimoitu nykyaikaisissa selaimissa.

Edut

• Erittäin pienet tiedostot
• Nopea purku
• Erinomainen valokuville

Haitat

• Pakkausartefaktit
• Ei läpinäkyvyyttä
• Laadun heikkeneminen toistuvien muokkausten jälkeen

Kuinka WebP-kuvat puretaan

Google kehitti WebP:n yhdistääkseen PNG:n ja JPEG:n vahvuudet.

Tiedostotyypistä riippuen WebP käyttää:

• VP8-pakkaus (häviöllinen)
• VP8L-pakkaus (häviötön)

Selain:

1. Lukee RIFF-säiliön
2. Havaitsee VP8:n tai VP8L:n
3. Dekoodaa kuvan lohkot
4. Palauttaa ennustearvot
5. Muuntaa pikseleitä
6. Renderöi kuva

Modernit selaimet sisältävät erittäin optimoituja WebP-dekoodereita, jotka ovat yleensä nopeampia kuin PNG ja kilpailevia JPEG:n kanssa.

Edut

• Pienemmät tiedostot
• Läpinäkyvyys
• Animaatiotuki
• Paremmat pakkaussuhteet

Haitat

• Hieman enemmän CPU-intensiivistä koodausta
• Vanhemmilla selaimilla on rajoitettu tuki

PNG-, JPEG- ja WebP-purkamisen vertailu

Laitteistokiihdytys

Nykyaikaiset selaimet eivät suorita kaikkea kuvankäsittelyä CPU:lla.

Sen sijaan ne käyttävät:

• GPU-tekstuurien lataukset
• Laitteistorasterointi
• Monisäikeinen dekoodaus
• SIMD-ohjeet
• Rinnakkaiset renderöintiputket

Chrome, Firefox ja Edge dekoodaa usein useita kuvia samanaikaisesti parantaakseen vierityksen suorituskykyä.

Progressiivinen JPEG vs Tavallinen JPEG

Progressiivinen JPEG parantaa koettua latausnopeutta.

Sen sijaan, että lataisi rivi kerrallaan, se näyttää:

Low Quality
      ↓
Medium Quality
      ↓
High Quality

Käyttäjät näkevät epätarkan esikatselun lähes heti, kun selain jatkaa lisäkuvatietojen dekoodaamista.

Selaimen kuvavälimuisti

Kun ne on purettu, selaimet tallentavat kuvat välimuistiin välttääkseen toistuvat lataukset.

Välimuisti sisältää:

• HTTP-välimuisti
• Muistivälimuisti
• Levyvälimuisti
• GPU-tekstuurivälimuisti

Tehokas välimuisti vähentää verkkoliikennettä ja nopeuttaa sivun navigointia.

Laiska lataus ja kuvan dekoodaus

Nykyaikaiset selaimet tukevat laiskaa latausta:

<img src="photo.webp" loading="lazy" alt="Nature">

Selain viivästyttää lataamista ja dekoodausta, kunnes kuva on lähellä näkymäaluetta.

Hyödyt sisältävät:

• Nopeampi sivun alkulataus
• Vähemmän muistin käyttöä
• Vähennetty CPU-työ
• Paremmat Core Web Vitals

Asynkroninen kuvan dekoodaus

Selaimet dekoodaa kuvia yhä enemmän asynkronisesti.

Sen sijaan, että estäisi sivun renderöinnin:

const img = new Image();

img.decoding = "async";
img.src = "hero.webp";

Selain suorittaa purkamisen taustalla ja päivittää sivun, kun purku on valmis.

Tämä johtaa sulavampaan vierittämiseen ja parempaan reagointikykyyn.

Yleisiä pullonkauloja kuvan dekoodauksen aikana

Suuret verkkosivustot kokevat usein suorituskykyongelmia seuraavista syistä:

• Liian suuret kuvat
• Liiallinen PNG-kuvien käyttö
• Tuhannet pienet esikatselukuvat
• Puuttuva laiska lataus
• Huono pakkaus
• Tarpeetonta metadataa
• Suuret animoidut kuvat

Nämä ongelmat lisäävät dekoodausaikaa ja muistin käyttöä.

Parhaat käytännöt kehittäjille

Parantaaksesi selaimen kuvien suorituskykyä:

• Käytä WebP:tä aina kun mahdollista.
• Pidä PNG varattu grafiikoille, jotka vaativat läpinäkyvyyttä tai pikselintarkkaa laatua.
• Käytä JPEG:ä korkearesoluutioisiin valokuviin.
• Pakkaa kuvat ennen käyttöönottoa.
• Muuta kuvien kokoa vastaamaan niiden näyttökokoja.
• Ota selaimen välimuisti käyttöön.
• Ota käyttöön laiska lataus.
• Poista tarpeettomat EXIF-metatiedot.
• Käytä responsiivisia kuvia <picture>-elementin ja srcset-attribuutin avulla.
• Testaa suorituskykyä Lighthouse-työkalulla ja selaimen kehittäjätyökaluilla.

Tulevaisuuden kuvatiedostomuodot

Vaikka PNG, JPEG ja WebP hallitsevat nykypäivän verkkoa, selaimet omaksuvat nopeasti uudempia formaatteja, kuten:

• AVIF
• JPEG XL (rajoitettu selaintuki)
• HEIC (alustakohtainen)
• JPEG XS

Nämä formaatit lupaavat vielä pienempiä tiedostokokoja säilyttäen poikkeuksellisen kuvanlaadun.

Yhteenveto

Jokainen selaimessa näytetty kuva käy läpi vaikuttavan sarjan toimenpiteitä — pakatun datan lataamisesta miljoonien pikselien purkamiseen ja niiden renderöintiin näytölle murto-osassa sekunnista.

Ymmärtäminen siitä, miten selaimet purkavat PNG-, JPEG- ja WebP-kuvia, auttaa kehittäjiä tekemään fiksumpia päätöksiä kuvaformaateista, pakkausstrategioista ja verkkosivuston optimoinnista. Valitsemalla oikean formaatin kuhunkin käyttötapaukseen ja noudattamalla nykyaikaisia suorituskyvyn parhaita käytäntöjä, voit rakentaa nopeampia verkkosivustoja, parantaa käyttäjäkokemusta, vähentää kaistanleveyden kulutusta ja saavuttaa parempia Core Web Vitals -tuloksia.

Kun selaimet kehittyvät edelleen, tehokas kuvien toimitus ja purku pysyvät yhdenä tärkeimmistä nykyaikaisen verkkosuorituskyvyn optimoinnin osa-alueista.

Usein kysytyt kysymykset (UKK)

1. Miten selaimet purkavat PNG-kuvia eri tavalla kuin JPEG-kuvia?

A1: Selaimet purkavat PNG-kuvat käyttäen häviötöntä DEFLATE-pakkauksen purkua ja käänteistä PNG-suodatusta rekonstruoidakseen jokaisen pikselin tarkasti, kun taas JPEG-kuvat puretaan käyttäen häviöllisiä pakkaustekniikoita, kuten Huffman-purkua ja käänteistä diskreettiä kosinimuunnosta (IDCT), mikä tekee JPEG-tiedostoista pienempiä, mutta eivät pikseli‑täydellisiä.

2. Miksi WebP on yleensä pienempi kuin PNG ja JPEG?

A2: WebP käyttää moderneja pakkausalgoritmeja, jotka tarjoavat paremman pakkaustehokkuuden kuin perinteiset PNG- ja JPEG-muodot. Se tukee sekä häviöllistä että häviötöntä pakkausta, mikä mahdollistaa kehittäjille pienemmät tiedostokoot ilman merkittävää kuvanlaadun heikkenemistä.

3. Mitä tapahtuu sen jälkeen, kun selain lataa kuvan?

A3: Kun kuva on ladattu, selain tunnistaa sen formaatin, valitsee sopivan dekooderin, purkaa kuvatiedot, muuntaa ne pikselitiedoksi, soveltaa tarvittaessa väri korjauksia, lähettää puretut pikselit GPU:lle ja lopuksi renderöi kuvan näytölle.

4. Parantaako lazy loading -tekniikka kuvanpurun suorituskykyä?

A4: Kyllä. Laiska lataus viivästyttää kuvien lataamista ja purkamista, kunnes ne ovat lähellä käyttäjän näkymäaluetta. Tämä vähentää alkuperäistä sivun latausaikaa, pienentää CPU- ja muistin käyttöä sekä parantaa Core Web Vitals -mittareita, kuten Largest Contentful Paint (LCP).

5. Mitä kuvaformaattia kehittäjien tulisi käyttää nykyaikaisilla verkkosivuilla?

A5: Paras formaatti riippuu sisällöstä. WebP on erinomainen valinta useimmille verkkosivustoille, koska se tarjoaa parempaa pakkausta ja tukee läpinäkyvyyttä. JPEG on edelleen ihanteellinen valokuville, kun taas PNG sopii parhaiten logoihin, kuvakkeisiin, kuvakaappauksiin ja grafiikkaan, joka vaatii häviöttömän laadun ja läpinäkyvät taustat.

Katso myös

• Ero BMP:n ja PNG:n välillä
• APNG vs BMP: Mikä kuvamuototiedosto on parempi?
• Rasteri vs vektorikuvat: Lyhyt vertailu