1. Pradžia
2. Vaizdų formatai

Vaizdų formatai: JPEG, PNG, WebP ir AVIF

Keturi formatai padengia daugiau nei 99 % šiuolaikinio tinklalapio vaizdų. Jie skirtingai derina glaudinimą, permatomumą, animaciją ir palaikymą naršyklėse. Žemiau — praktinis gidas, kaip pasirinkti.

Palyginimas iš eilės

Pirmiausia santrauka lentelėje, toliau — kiekvieno formato aprašas.

JPEG — visuotinis pagrindas

Kaip veikia

JPEG (Joint Photographic Experts Group) standartizuotas 1992 m. — seniausias iš keturių. Naudojama diskrečioji kosinusinė transformacija 8×8 pikselių blokams, kvantavimas ir entropinis kodavimas. Kokybę valdo vienas skaičius 1–100. Šiuolaikiniai koduotuvai, pvz. MozJPEG, „išspaudžia“ dar 10–20 % be bitų srauto keitimo, todėl bet kuris JPEG dekoderis juos nuskaito.

Geriausiai tinka

Fotografiniam turiniui su švelniais tonais ir daugybe detalių — portretai, peizažai, prekių nuotraukos, hero vaizdai.

Pliusai

• Palaikoma praktiškai kiekvienoje peržiūros programoje.
• Dekodavimas dažnai spartinamas aparatūriškai.
• Subrendusi optimizatorių ekosistema (MozJPEG, jpegli).

Minusai

• Nėra alfa kanalo — fonai turi būti suploti.
• Blokuoti artefaktai ant teksto, linijų ir aštrių briaunų.
• Tik 8 bitai kanalui.

PNG — be nuostolių ir permatomas

Kaip veikia

PNG (Portable Network Graphics) atsirado 1990-aisiais kaip laisvas GIF pakaitalas. Jis griežtai be nuostolių: DEFLATE eilučių filtravimui. Optimizatoriai kaip oxipng bando filtrų ir glaudinimo derinius, kad rastų mažiausią failą nekeičiant pikselio.

Geriausiai tinka

Sąsajos grafikai, piktogramoms, ekrano kopijoms, schemoms, logotipams su plokščiomis spalvoms ir bet kam, reikalingam tikram alfa kanalui.

Pliusai

• Be nuostolių — pikseliai išlieka grįžus „atgal“.
• Pilna 8 bitų alfa, iki 16 bitų kanalui.
• Pralaidžiai palaikoma.

Minusai

• Dideli failai ant nuotraukų — dažnai kelis kartus didesni už JPEG/WebP/AVIF.
• Animacijos nėra pradinėje specifikacijoje (APNG — vėlesnis plėtinys).

WebP — Google formatas tinklui

Kaip veikia

WebP pristatė Google 2010 m., remiantis VP8, vėliau pridėtas atskiras režimas be nuostolių. Viename konteineryje — su ir be nuostolių, neprivaloma alfa ir animacija. Su nuostoliais dažniausiai ~25–35 % mažiau už JPEG tos pačios kokybės. Be nuostolių — dažnai 20–30 % mažiau už PNG.

Geriausiai tinka

Bendram tinklalapio tiekimui, kai AVIF dar ne „saugus“ — nuotraukos, sprite'ai su alfa, animuotų GIF pakaitalai, atsarginis sluoksnis po AVIF.

Pliusai

• Vienu formatu — nuotraukos, grafika, alfa, animacija.
• Ženklai mažesnis už JPEG ir PNG panašioje kokybėje.
• Platus palaikymas: šiuolaikiškos naršyklės nuo ~2020 m.

Minusai

• 8 bitai kanalui — nėra HDR.
• Ant silpnų įrenginių dekodavimas gali būti lėtesnis už JPEG.

AVIF — šiuo metu geriausias glaudinimas

Kaip veikia

AVIF (AV1 Image File Format) — nejudančio kadrų profilis AV1 vaizdo kodekui (Alliance for Open Media, 2019). Iki 12 bitų spalvos, pilna alfa, HDR, plati spalvinė gama, filmo grūdo sintezė. Atskaitos koduotuvas (aom-av1 per libavif) lėtas, bet duoda geriausią šiandieninį glaudinimą realioms nuotraukoms.

Geriausiai tinka

Hero vaizdams, galerijoms ir bet kur, kur srautas svarbesnis už CPU laiką. Gerai tinka aukščiausiam sluoksniui <picture> elemente.

Pliusai

• Elito klasės glaudinimas — dažnai 40–60 % mažiau už JPEG.
• Alfa, animacija, HDR, plati gama, 10/12 bitų gylis.
• Atviras, be licencijos mokesčių.

Minusai

• Lėtas kodavimas — planuokite build ar asinchroniškai.
• Safari palaikymą pridėjo tik 16 versijoje (2022).
• Sintetinei grafikai silpniau nei WebP be nuostolių ar PNG.

Kokį formatą pasirinkti?

• Nuotraukos, per visą plotą hero: AVIF pirmiausia, WebP ir JPEG atsargos per <picture>.
• Sąsajos su permatomumu (piktogramos, logotipai): PNG senesnėms sistemoms, WebP be nuostolių — mažesniam tūriui.
• Linijos, ekrano kopijos, schemos: PNG (ar WebP be nuostolių) — ant aštrių briaunų JPEG/AVIF artefaktai matomi labiausiai.
• Animuotų GIF pakeitimas: WebP ar AVIF — žymiai mažesni, su tikra alfa.
• Vienas formatas visoms naršyklėms šiandien: JPEG nuotraukoms, PNG grafikai. Ne mažiausi failai, bet nulinė suderinamumo skola.

Praktiškai nebūtina rinktis vieno. Tiekite AVIF pirmiausia, antra — WebP, paskutinė — JPEG ar PNG <picture> elemente — kiekviena naršyklė paima mažiausią versiją, kurią moka dekoduoti.