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.

Poista tekoälymerkinnät ja muut metatiedot

Poista tekoälymerkinnät (C2PA, promptit) ja muut metatiedot (EXIF, XMP, IPTC) koodaamalla kuva uudelleen selaimessa. Väriprofiili säilyy. Ei lähetystä palvelimelle. Poista tekoälymerkinnät ja muut metatiedot.