1. Početna
2. Formati slika

Formati slika: JPEG, PNG, WebP i AVIF

Četiri formata pokrivaju više od 99% slika na modernom webu. Imaju vrlo različita kompromisa između kompresije, prozirnosti, animacije i podrške u preglednicima. Ovo je praktičan vodič za odabir.

Usporedba u tablici

Kratki pregled, zatim detaljno o svakom formatu.

JPEG — univerzalna polazna točka

Kako radi

JPEG (Joint Photographic Experts Group) standardiziran je 1992. i najstariji je od četiri formata. Koristi diskretnu kosinusnu transformaciju s gubitkom na blokovima 8×8 piksela, zatim kvantizaciju i entropijsko kodiranje. Kvalitetom upravlja jedan broj od 1 do 100. Moderni kodek poput MozJPEG izvuče 10–20% više iz formata bez mijenjanja bitovnog toka, pa ih svaki JPEG dekoder može pročitati.

Najbolje za

Fotografski sadržaj s glatkim gradacijama i puno detalja — portrete, krajolike, produktne fotografije, hero slike.

Prednosti

• Podržan praktički u svakom pregledniku i pregledaču slika.
• Dekodiranje ubrzano sklopom gotovo posvuda.
• Zreli ekosustav optimizatora (MozJPEG, jpegli).

Nedostaci

• Nema alfa kanala — pozadine se moraju spljoštiti.
• Blokovski artefakti na tekstu, crtićima i oštrim rubovima.
• Samo 8 bita po kanalu.

PNG — bez gubitka i s prozirnošću

Kako radi

PNG (Portable Network Graphics) stvoren je sredinom 90-ih kao slobodna zamjena za GIF. Striktno je bez gubitka: kompresija DEFLATE nakon filtriranja piksela po redcima. Optimizatori poput oxipng (Rust inačica optipng) isprobavaju kombinacije filtera i kompresije kako bi reprezentacija bila najmanja, a da se ne promijeni ni jedan piksel.

Najbolje za

UI grafiku, ikone, snimke zaslona, dijagrame, crteže, logotipe s ravnim bojama i sve što treba pravi alfa kanal.

Prednosti

• Bez gubitka — pikseli ostaju nepromijenjeni.
• Puni 8-bitni alfa, do 16 bitova po kanalu.
• Univerzalna podrška.

Nedostaci

• Velike datoteke za fotografije — često višestruko veće od JPEG/WebP/AVIF.
• Nema animacije u izvornoj specifikaciji (APNG je kasnije proširenje).

WebP — Googleov format za web

Kako radi

WebP je Google izdao 2010., temelji se na video kodeku VP8, kasnije proširen zasebnim načinom bez gubitka. U jednom kontejneru podržava kompresiju s gubitkom i bez, s izbornom alfrom i animacijom. U režimu s gubitkom obično pobijedi JPEG za 25–35% pri istoj kvaliteti. U režimu bez gubitka obično pobijedi PNG za 20–30%.

Najbolje za

Opću isporuku na webu kada AVIF još nije siguran izbor — fotografije, UI sprajtove s prozirnošću, zamjene za animirane GIF-ove, rezervu ispod AVIF-a.

Prednosti

• Jedan format za fotografije, grafiku, alfu i animacije.
• Znatno manji od JPEG-a i PNG-a pri sličnoj kvaliteti.
• Široka podrška: svi glavni preglednici od 2020.

Nedostaci

• 8 bita po kanalu — nema HDR-a.
• Sporije dekodiranje od JPEG-a na nekim slabijim uređajima.

AVIF — vodeća kompresija

Kako radi

AVIF (AV1 Image File Format) je profil mirne slike video kodeka AV1, objavljen 2019. od Alliance for Open Media. Do 12-bitnih boja, pune alfe, HDR-a, širokog spektra, zrnatosti slike. Referentni kodek (aom-av1 u libavif) je spor, ali daje današnju najbolju kompresiju za stvarne fotografije.

Najbolje za

Velike hero slike, galerije i posvuda gdje je propusnost bitnija od CPU vremena. Dobro se uklapa kao gornji sloj u element <picture>.

Prednosti

• Najbolja u klasi — tipično 40–60% manje od JPEG-a.
• Alfa, animacija, HDR, širok gamut i 10/12-bitna dubina.
• Bez licencnih naknada i otvoreni format.

Nedostaci

• Sporo kodiranje — planirajte asinkrono ili pri izgradnji.
• Safari je podršku dodao tek u inačici 16 (2022.).
• Manje podoban za sintetičku grafiku nego WebP bez gubitka ili PNG.

Koji format upotrijebiti?

• Fotografije, cijelozaslonske hero slike: AVIF primarno, WebP i JPEG kao rezervne unutar <picture>.
• UI s prozirnošću (ikone, logotipi): PNG za starije okoline, WebP bez gubitka za manje datoteke.
• Crtići, snimke zaslona, dijagrami: PNG (ili WebP bez gubitka) — JPEG/AVIF na oštrim rubovima daju artefakte.
• Zamjena animiranih GIF-ova: WebP ili AVIF — oba puno manja i s pravom alfrom.
• Jedan format za sve današnje preglednike: JPEG za fotografije, PNG za grafiku. Nije najmanja opcija, ali nema duga kompatibilnosti.

U praksi često ne birate samo jedan. Poslužite prvo AVIF, zatim WebP i na kraju JPEG ili PNG u elementu <picture> — svaki preglednik dobiva najmanju inačicu koju zna dekodirati.