1. Avaleht
2. Pildivormingud

Pildivormingud võrdluses: JPEG, PNG, WebP ja AVIF

Neli vormingut katavad üle 99% nüüdisveebi piltidest. Need teevad väga erinevaid kompromisse pakkimise, läbipaistvuse, animatsiooni ja brauseri toe vahel. Siin on praktiline juhend valiku tegemiseks.

Kõrvutine võrdlus

Lühike ülevaade esmalt, täielik vorminguti käsitlus allpool.

JPEG — universaalne baas

Kuidas see töötab

JPEG (Joint Photographic Experts Group) standardiseeriti 1992. aastal ja on nende neljast vanim. See kasutab 8×8 piksli plokkidel kadudega diskreetset koosiinust, seejärel kvantiseerimist ja entroopiakodeeringut. Kvaliteeti juhitakse ühe arvuga 1–100. Tänapäeva kodeerijad nagu MozJPEG saavad samast vormingust välja 10–20% rohkem ilma bitivoo muutmata, nii et iga JPEG-dekodeerija loeb tulemuse.

Parim

Fotode sisu pehmete toonidega ja palju detaile — portreed, maastikud, tootefotod, suured taustapildid.

Plussid

• Toetatud peaaegu kõigis pildivaatajates.
• Riistvara kiirendatud dekodeerimine peaaegu kõikjal.
• Küps ökosüsteem optimeerijate jaoks (MozJPEG, jpegli).

Miinused

• Alfakanalit pole — taust tuleb litte panna.
• Plokk-artefaktid tekstis, joon- ja teravates servades.
• Ainult 8 bitti kanali kohta.

PNG — kadudeta ja läbipaistev

Kuidas see töötab

PNG (Portable Network Graphics) sündis 1990. aastail vabana, patendivabana asendajana GIF-ile. See on range kadudeta vorm: DEFLATE pakkimine rea pikselfiltrite peal. Optimeerijad nagu oxipng (Rust, optipng baasil) proovivad filtri-/pakkimiskombinatsioone väikseima esituseni üht pikslit muutmata.

Parim

Liidese graafika, ikoonid, ekraanipildid, diagrammid, jooned, logod lapiku värviga ja kõik, kus vaja tõelist alfakanalit.

Plussid

• Kadudeta — pikslid püsivad ringreisi järel identsed.
• Täielik 8-bitine alfa, kuni 16 bitti kanali kohta.
• Laialdaselt toetatud.

Miinused

• Suurem fotode puhul — tihti kordi suurem kui JPEG/WebP/AVIF.
• Animatsiooni pole originaalspetsifikatsioonis (APNG on hilisem lisa).

WebP — Google’i veebivorming

Kuidas see töötab

WebP tuli 2010 Google’ilt, VP8 video koodeki baasil, hiljem lisati eraldi kadudeta režiim. Toetab nii kaotuslikku kui kadudeta pakkimist ühes konteineris, valikuliselt alfat ja animatsiooni. Kaotuslik režiim on tüüpiliselt 25–35% väiksem kui samasuguse tajutava kvaliteediga JPEG. Kadudeta režiim võidab PNG-d 20–30%.

Parim

Üldine valik veebi jaoks, kui AVIF polnud veel kindel — fotod, spraidid läbipaistvusega, animeeritud GIF-i asendaja ja vahekihina enne AVIF-i.

Plussid

• Üks vorming fotode, graafika, alfa ja animatsiooni jaoks.
• Märksa väiksem kui JPEG ja PNG sarnase kvaliteedi juures.
• Lai tugi: kõik tänased brauserid alates 2020.

Miinused

• 8 bitti kanali kohta — pole HDR-t.
• Mõnel aeglase riistvaraga seadmel dekodeerimine aeglasem kui JPEG-il.

AVIF — tipptase pakkimises

Kuidas see töötab

AVIF (AV1 Image File Format) on AV1 video koodeki statsionaarne profiil, avaldatud 2019 Alliance for Open Media poolt. Kuni 12-bitine värv, täis alfa, HDR, lai värvigamma ja filme efekt. Võrdluse kodeerija (aom-av1 läbi libavif) on aeglane, kuid annab tänaseni parima tulemuse päris fotodele.

Parim

Suured taustapildid, galeriid — kõik, kus ribalaius maksab rohkem kui CPU aega. Töötab hästi <picture> esimese allikana.

Plussid

• Parim klass — tüüpiliselt 40–60% väiksem kui JPEG.
• Alfa, animatsioon, HDR, lai gamut, 10/12-biti sügavus.
• Autoritasuta ja avatud.

Miinused

• Aeglane kodeerida — eeltootmisel vaja eraldada aega.
• Safari lisas toe alles versioonis 16 (2022).
• Kehvem sünteetilisele graafikale kui kadudeta WebP või PNG.

Millist vormingut valida?

• Fotod, täislaiuse pildid: eelistatud AVIF, WebP ja JPEG varu <picture>-s.
• Liidese graafika läbipaistvusega (ikoonid, logod): PNG vanemates keskkondades, kadudeta WebP väiksema failina.
• Jooned, ekraanipildid, diagrammid: PNG (või kadudeta WebP) — JPEG/AVIF teeb servadelt halba.
• Animeeritud GIF: WebP või AVIF — palju väiksemad, päris alfa-ga.
• Üks vorming igale tänasele brauserile: JPEG fotode, PNG graafika. Pole väikseim, kuid maksimum ühilduvus.

Tavaliselt ei pea valima vaid ühte. Paku AVIF esimesena, WebP teisena ja JPEG või PNG viimasena <picture>-s — iga brauser saab väikseima variandi, mida oskab dekodeerida.