1. Etusivu
2. Kuvaformaatit

Kuvaformaatit vertailussa: JPEG, PNG, WebP ja AVIF

Neljä formaattia kattaa yli 99 % verkon kuvista. Niillä on hyvin erilaiset kompromissit pakkauksen, läpinäkyvyyden, animaation ja selaintuen välillä. Tässä käytännön opas oikeaan valintaan.

Vertailu vierekkäin

Lyhyt yleiskuva ensin, täydellinen läpikäynti formaateittain alla.

JPEG — yleinen lähtökohta

Miten se toimii

JPEG (Joint Photographic Experts Group) standardoitiin vuonna 1992 ja on vanhin näistä neljästä. Se käyttää häviöllistä diskreettiä kosinimuunnosta 8×8-pikseliblokkeihin, sitten kvantisointia ja entropiakoodausta. Laatua säädetään yhdellä numerolla 1–100. Modernit encoderit kuten MozJPEG puristavat 10–20 % lisää samasta formaatista ilman bittivirran muutosta, joten mikä tahansa JPEG-purkaja lukee ne.

Parasta

Valokuvallista sisältöä pehmeillä sävyillä ja paljon yksityiskohtaa — muotokuvat, maisemat, tuotekuvat, sankarikuvat.

Edut

• Tuettu lähes kaikissa kuvankatseluohjelmissa.
• Laitteistokiihdytetty purku lähes kaikkialla.
• Kypsä optimointityökalujen ekosysteemi (MozJPEG, jpegli).

Haitat

• Ei alfakanavaa — taustat täytyy litistää.
• Lohkoartefaktit tekstissä, viivoissa ja terävissä reunoissa.
• Vain 8 bittiä kanavaa kohti.

PNG — häviötön ja läpinäkyvä

Miten se toimii

PNG (Portable Network Graphics) syntyi 1990-luvulla vapaana, patenttivapaana korvaajana GIF:lle. Se on tiukasti häviötön: DEFLATE rivikohtaisten pikselisuodattimien päällä. Optimointityökalut kuten oxipng (Rust-portti optipng:stä) kokeilevat suodatin-/pakkausyhdistelmiä pienimpään esitykseen muuttamatta yhtään pikseliä.

Parasta

Käyttöliittymägrafiikka, kuvakkeet, kuvakaappaukset, kaaviot, viivapiirros, logot tasaisilla väreillä ja kaikki, jossa tarvitaan oikea alfakanava.

Edut

• Häviötön — pikselit säilyvät kierroksen jälkeen muuttumattomina.
• Täysi 8-bittinen alfa, jopa 16 bittiä kanavaa kohti.
• Yleisesti tuettu.

Haitat

• Suuri valokuvissa — usein moninkertainen JPEG/WebP/AVIF:ään verrattuna.
• Ei animaatiota alkuperäisessä spesifikaatiossa (APNG myöhempi laajennus).

WebP — Googlen verkkomuoto

Miten se toimii

WebP julkaistiin Googlen toimesta 2010, VP8-videokoodekin pohjalta, ja myöhemmin siihen lisättiin erillinen häviötön tila. Se tukee sekä häviöllistä että häviötöntä pakkausta samassa kontissa, valinnaisella alfalla ja animaatiolla. Häviöllisessä tilassa se voittaa tyypillisesti JPEG:n 25–35 % samalla laadulla. Häviöttömässä tilassa se voittaa PNG:n 20–30 %.

Parasta

Yleiskäyttöinen valinta verkkoon, kun AVIF ei ole vielä varma — valokuvat, sprite- grafiikka läpinäkyvyydellä, GIF-animaatioiden korvaaja ja varakerros AVIF:n alle.

Edut

• Yksi formaatti valokuville, grafiikalle, alfalle ja animaatiolle.
• Huomattavasti pienempi kuin JPEG ja PNG verrattavalla laadulla.
• Laaja tuki: nykyiset selaimet vuodesta 2020.

Haitat

• 8 bittiä kanavaa — ei HDR:ää.
• Joillakin yksinkertaisilla laitteilla purku hitaampaa kuin JPEG:ssä.

AVIF — kärkipakkaus

Miten se toimii

AVIF (AV1 Image File Format) on AV1-videokoodekin stillkuva-profiili, julkaistu 2019 Alliance for Open Media -konsortiosta. Jopa 12-bittinen väri, täysi alfa, HDR, laaja väriavaruus ja filmigrain. Referenssiencoder (aom-av1 libavifissä) on hidas mutta saavuttaa parhaan pakkauksen oikeille valokuville tänään.

Parasta

Suuret sankarikuvat, galleriat ja kaikki, joissa kaistanleveys painaa enemmän kuin CPU- aika. Toimii hyvin ylimpänä kerroksena <picture>-elementissä.

Edut

• Paras luokan pakkaus — tyypillisesti 40–60 % pienempi kuin JPEG.
• Tukee alfaa, animaatiota, HDR:ää, laajaa väriavaruutta ja 10/12-bittistä syvyyttä.
• Rojaltivapaa ja avoin.

Haitat

• Hidas koodata — varaa build-aikaa tai asynkronista koodausta.
• Safari sai tuen vasta versiossa 16 (2022).
• Vähemmän sopiva synteettiselle grafiikalle kuin häviötön WebP tai PNG.

Mitä formaattia käytän?

• Valokuvat, täysleveät sankarikuvat: AVIF ensisijaisena, WebP ja JPEG varalla <picture>:ssa.
• Käyttöliittymä läpinäkyvyydellä (kuvakkeet, logot): PNG vanhempiin ympäristöihin, häviötön WebP pienempään tiedostoon.
• Viivapiirros, kuvakaappaukset, kaaviot: PNG (tai häviötön WebP) — JPEG/AVIF rankaisee teräviä reunoja.
• Animoitu GIF korvattavaksi: WebP tai AVIF — molemmat paljon pienempiä oikealla alfalla.
• Yksi formaatti kaikille nykyisille selaimille: JPEG valokuville, PNG grafiikalle. Ei pienin koko, mutta nolla yhteensopivuusvelkaa.

Käytännössä harvoin tarvitsee valita vain yksi. Tarjoile AVIF ensin, WebP toisena ja JPEG tai PNG viimeisenä <picture>:ssa — jokainen selain saa pienimmän version, jonka se osaa purkaa.