Attēlu formātu salīdzinājums: JPEG, PNG, WebP un AVIF
Četri formāti aptver vairāk nekā 99% mūsdienu tīmekļa attēlu. Katrs citādi apmaina saspiešanu, caurspīdīgumu, animāciju un pārlūka atbalstu. Tālāk — praktisks ceļvedis izvēlei.
Blakus salīdzinājums
Vispirms īss pārskats, tad detalizēts katra formāta apraksts.
| Īpašība | JPEG ? | PNG ? | WebP ? | AVIF ? |
|---|---|---|---|---|
| Saspiešana | Ar zudumiem | Bez zudumiem | Ar + bez zudumiem | Ar + bez zudumiem |
| Alfa (caurspīdīgums) | Nē | Jā (8 biti) | Jā (8 biti) | Jā (pilnībā) |
| Animācija | Nē | tikai APNG | Jā | Jā |
| Maks. bitu dziļums | 8 biti | 16 biti | 8 biti | 10/12 biti |
| Tipisks izmērs pret JPEG (foto) | 100% | 300–1000% | 65–75% | 40–60% |
| Pārlūka atbalsts | Visur | Visur | Chrome 32, Firefox 65, Safari 14 | Chrome 85, Firefox 93, Safari 16 |
| Tipisks kodēšanas ātrums | Ātri | Ātri | Vidēji | Lēni |
JPEG — universālais pamatformāts
Kā tas darbojas
JPEG (Joint Photographic Experts Group) tika standartizēts 1992. gadā un ir veidākais no četriem. Izmanto diskretās kosinusa pārveidi ar zudumiem 8×8 pikseļu blokiem, pēc tam kvantizāciju un entropijas kodēšanu. Kvalitāti kontrolē viens skaitlis no 1 līdz 100. Mūsdienu kodētāji, piemēram, MozJPEG, iegūst vēl par 10–20% vairāk, nemainot bitu plūsmu, tāpēc tos var nolasīt jebkurš JPEG dekodētājs.
Labākais
Fotogrāfiskam saturam ar gludām pārejām un daudz detaļu — portreti, ainavas, produktu attēli, liels formāts.
Plusi
- Atbalsta gandrīz katrs attēlu skatītājs.
- Aparatūrā paātrināta dekodēšana gandrīz visur.
- Nobriedusi optimizatoru ekosistēma (MozJPEG, jpegli).
Mīnusi
- Nav alfa kanāla — fonus jāsapludina.
- Blokveida artefakti pie teksta, līnijām un asiem stūriem.
- Tikai 8 biti uz kanālu.
PNG — bez zudumiem un ar caurspīdīgumu
Kā tas darbojas
PNG (Portable Network Graphics) 90. gados radīts kā bezmaksas, bezpatenta aizstājējs GIF. Formāts ir stingri bez zudumiem: DEFLATE virs rindu pikseļu filtrēšanas. oxipng (Rust, optipng radinieks) izmēģina filtru un saspiešanas kombinācijas, lai atrastu mazāko datni nemainot ne pikseļa.
Labākais
UI elementi, ikonas, ekrānuzņēmumi, diagrammas, līnijgrafika, logotipi ar plakanām krāsām un viss, kam nepieciešams īsts alfa kanāls.
Plusi
- Bez zudumiem — pikseļi pēc aprite nemainās.
- Pilnībā 8 bitu alfa, līdz 16 bitiem uz kanālu.
- Universāls atbalsts.
Mīnusi
- Fotogrāfijām bieži daudzkārt lielāks par JPEG/WebP/AVIF.
- Animācija sākotnējā specifikācijā nav (APNG — vēlāks paplašinājums).
WebP — Google tīmekļa formāts
Kā tas darbojas
WebP 2010. gadā izlaida Google, balstoties uz VP8, vēlāk ar atsevišķu režīmu bez zudumiem. Atbalsta saspiešanu ar un bez zudumiem vienā konteinerā, ar izvēles alfu un animāciju. Ar zudumiem parasti pārspēj JPEG par 25–35% līdzīgā kvalitātē. Bez zudumiem bieži par 20–30% mazāks nekā PNG.
Labākais
Vispārīga tīmekļa piegāde, kur AVIF vēl nav drošs — foto, ar caurspīdīgumu, GIF aizstājēji un kā starpslānis zem AVIF.
Plusi
- Viens formāts: foto, grafika, alfa, animācija.
- Ievērojami mazāki faili nekā JPEG un PNG tuvu kvalitātēm.
- Plašs atbalsts: mūsdienu pārlūki kopš apm. 2020.
Mīnusi
- 8 biti uz kanālu — nav HDR.
- Dažās vājās ierīcēs lēnāka dekodēšana nekā JPEG.
AVIF — pašreiz spēcīgākā saspiešana
Kā tas darbojas
AVIF (AV1 Image File Format) ir statiskā attēla profils kodekam AV1 (2019, organizācija
Alliance for Open Media). Atbalsta līdz 12 bitu krāsu, pilnu alfu, HDR un platu krāsgammu;
specifikācijā paredzēta arī film grain sintēze. Atsauces kodētājs (aom-av1 caur libavif) ir lēns, bet
sniedz labāko saspiešanu reāliem foto.
Labākais
Liels formāts, galerijas, kur joslas platums svarīgāks par CPU laiku. Labs kā augšējais
slānis <picture> elementā.
Plusi
- Vislabākā kompresijas klase — bieži 40–60% mazāk nekā JPEG.
- Alfa, animācija, HDR, plata krāsgamma, 10/12 biti.
- Bez licences maksas, atvērts kods.
Mīnusi
- Lēna kodēšana — plānojiet būvēšanas laikā vai asinhroni.
- Safari pievienoja atbalstu tikai 16. versijā (2022).
- Slikti piemērots sintētiskai grafikai salīdzinājumā ar WebP bez zudumiem vai PNG.
Kādu formātu izvēlēties?
- Fotogrāfijas, pilna platuma hero attēli: primāri AVIF, WebP un JPEG kā aizstājēji
<picture>. - Grafika ar caurspīdīgumu (ikonas, logotipi): PNG saderībai, WebP bez zudumiem mazākiem apjomiem.
- Līnijas, ekrānuzņēmumi, diagrammas: PNG (vai WebP bez zudumiem) — JPEG/AVIF rada redzamus defektus asās malās.
- Animētu GIF aizstāšana: WebP vai AVIF — abiem krietni mazāks apjoms, īsta alfa.
- Viens formāts visiem pārlūkiem, šodien: JPEG fotogrāfijām, PNG grafikai. Nav mazākais, bet nulle saderības problēmu.
Praksē nav jāizvēlas tikai viens. Dodiet AVIF, tad WebP, tad JPEG vai PNG
<picture> — katrs pārlūks saņem mazāko iespējamo variantu, ko spēj dekodēt.
Biežāk uzdotie jautājumi
Kā pārvērst JPG par WebP?
Atveriet PicBrewery, ielieciet JPG augšupielādes laukā — WebP parādīsies automātiski blakus JPEG, PNG un AVIF. Izvēlieties WebP šūnu un noklikšķiniet uz lejupielādes ikonas. Viss notiek pārlūkā — fails netiek augšupielādēts.
Kā pārvērst PNG par AVIF?
Ielieciet PNG PicBrewery. Pārkodēšana uz JPEG, WebP un AVIF notiek paralēli Web Worker ietvaros. Noklikšķiniet uz AVIF kolonnas lejupielādei vai izvēlieties vairākas rindas un eksportējiet ZIP ar mazāko variantu katram avotam.
Vai AVIF ir labāks par WebP?
Foto AVIF bieži dod par 20–30% mazākus failus nekā WebP tajā pašā uztveramajā kvalitātē, pateicoties AV1. WebP ir ātrāks kodējot un vecākās pārlūkprogrammās vēl ir plašāks atbalsts, tāpēc formāti papildina viens otru.
Vai Safari atbalsta WebP?
Jā. WebP Safari atbalsta kopš 14. versijas (macOS Big Sur, iOS 14, 2020). Visas pašreizējās Safari versijas dekodē ar zudumiem un bez zudumiem veidotu WebP.
Vai PNG vienmēr ir bez zudumiem?
Jā. PNG lieto DEFLATE, kas ir stingri bez zudumiem: pikseļi pēc dekodēšanas ir biti precīzi kā avotā. Izmēra samazinājums nāk no labākiem filtriem un DEFLATE (piem. oxipng), ne no attēla datu noņemšanas.
Vai JPEG var būt caurspīdīgs?
Nē. Klasiskajam JPEG nav alfa. Caurspīdīgumam izmantojiet PNG, WebP vai AVIF. JPEG XL pievieno alfa, bet pārlūkos vēl nav plaši atbalstīts.
Cik mazāks ir AVIF salīdzinājumā ar JPEG?
Tipiski foto ar mūsdienīgu AVIF (aom / libavif) ir par 40–60% mazāki par MozJPEG ar līdzīgu uztveramo kvalitāti. Ietaupījums sarūk maza detaļu un plakanu laukumu grafikai, kur JPEG jau labi saspiežas.
Vai mans pārlūks dekodēs AVIF?
AVIF atbalsta Chrome 85+, Firefox 93+, Edge 121+ un Safari 16+.
Universālai lietošanai servējiet AVIF <picture>
ar WebP vai JPEG aizstājēju, lai vecie
pārlūki joprojām rādītu attēlu.
Vai PicBrewery patiešām strādā klienta pusē?
Jā. Dekodēšana un pārkodēšana notiek WebAssembly Web Worker ietvaros jūsu ierīcē. Attēlu baiti netiek sūtīti tīklā — pieprasījumi ir tikai statiskajai lietotnei un kodekiem.
Konvertēšana starp formātiem
Meklējat konkrētu pāri? Izvēlieties zem — katrai lapai ir soļi, paredzamais apjoma ietaupījums un BUJ par šo pāri.
Izmēģiniet ar saviem attēliem
Ielieciet JPG partiju PicBrewery un salīdziniet WebP un AVIF blakus. Nekas netiek augšupielādēts.