Paghahambing ng mga format: JPEG, PNG, WebP, at AVIF
Apat na format ang sumasaklaw sa higit 99% ng mga larawan sa modernong web. Iba-iba ang trade-off sa compression, transparency, animation, at suporta ng browser. Narito ang praktikal na gabay upang pumili nang wasto.
Paghahambing na magkatabi
Mabilis na overview muna, ang buong detalye ng bawat format ay nasa ibaba.
| Katangian | JPEG ? | PNG ? | WebP ? | AVIF ? |
|---|---|---|---|---|
| Compression | Lossy | Lossless | Lossy + lossless | Lossy + lossless |
| Alpha (transparency) | Hindi | Oo (8-bit) | Oo (8-bit) | Oo (buo) |
| Animation | Hindi | APNG lang | Oo | Oo |
| Max na bit depth | 8-bit | 16-bit | 8-bit | 10/12-bit |
| Típikal na laki kumpara sa JPEG (litrato) | 100% | 300–1000% | 65–75% | 40–60% |
| Suporta ng browser | Kalahatan | Kalahatan | Chrome 32, Firefox 65, Safari 14 | Chrome 85, Firefox 93, Safari 16 |
| Bilis ng encoding (típikal) | Mabilis | Mabilis | Katamtaman | Mabagal |
JPEG — pangunahing pamantayan
Paano ito gumagana
Ang JPEG (Joint Photographic Experts Group) ay standardized noong 1992 at pinakamatanda sa apat. Gumagamit ito ng lossy na DCT sa 8×8 na blocks, quantization, at entropy coding. Ang quality ay 1–100. Sinasagad ng MozJPEG ang 10–20% pa na maliit na laki nang hindi binabago ang bitstream — mababasa ito ng lahat ng JPEG decoder.
Pinakamabuti kung
Mga litrato na may smooth na gradient at maraming detalye — portrait, tanawin, produkto, hero image.
Mga bentahe
- Suportado halos ng lahat ng image viewer sa mundo.
- Hardware-accelerated decoding kung saan-saan.
- Matatag na ecosystem ng optimizers (MozJPEG, jpegli).
Mga limitasyon
- Walang alpha — kailangan i-flat ang background.
- Blocky artifacts sa text, line art, at matatalim na gilid.
- 8 bits per channel lamang.
PNG — lossless at may transparency
Paano ito gumagana
Ang PNG (Portable Network Graphics) ay yari noong 1990s bilang libre, walang patent, kapalit ng GIF. Mahigpit itong lossless: DEFLATE sa ibabaw ng per-row na filtering. Ang oxipng (Rust) ay sumusubok ng maraming kombinasyon upang makuha ang pinakamaliit na file nang walang nababagong pixel.
Pinakamabuti kung
UI, icon, screenshot, diagram, line art, logo nang flat na kulay, at anumang kailangan talaga ng alpha channel.
Mga bentahe
- Lossless — buo ang round trip ng mga pixel.
- Buong 8-bit alpha, hanggang 16 bits bawat channel.
- Universal ang suporta.
Mga limitasyon
- Malaki sa litrato — maaaring maraming beses kaysa JPEG/WebP/AVIF.
- Ang orihinal na spec ay walang animation (ang APNG ay extensiyon pa).
WebP — format na para sa web (Google)
Paano ito gumagana
Inilunsad ang WebP noong 2010 (Google), sa batayan ng VP8, may hiwalay na lossless mode. Sinusuportahan ang lossy at lossless sa isang container, may alpha at animation. Sa lossy, karaniwan nitong tinalo ang JPEG ng 25–35% sa magkapantay na quality. Sa lossless, tinalo ang PNG ng 20–30%.
Pinakamabuti kung
General-purpose sa web kung sa AVIF pa ay hindi tiyak — litrato, UI sprite na may alpha, alternatibo sa animated GIF, at fallback bago ang AVIF.
Mga bentahe
- Isang format: litrato, graphics, alpha, at animation.
- Malaking pagbaba ng laki kumpara sa JPEG at PNG kung same quality.
- Malawak na suporta: evergreeen browsers mula 2020.
Mga limitasyon
- 8 bits bawat channel — walang HDR.
- Mas mabagal mag-decode kaysa JPEG sa ilang mababang spec na device.
AVIF — nangunguna sa compression ngayon
Paano ito gumagana
Ang AVIF (AV1 Image File Format) ay still image profile ng AV1, inilunsad
2019 ng Alliance for Open Media. Sinusuportahan hanggang 12-bit, buong alpha, HDR, wide
gamut, at film grain. Ang reference encoder na aom-av1 (libavif) ay
mabagal ngunit nagsasagawa ng pinakamagandang compression sa litrato ng totoong buhay.
Pinakamabuti kung
Hero image, photo gallery, at kung saan mas mahalaga ang bandwidth kaysa
oras ng CPU. Mainam na nangungunang tier sa <picture>.
Mga bentahe
- Pinakamagandang compression — karaniwang 40–60% na mas maliit kaysa JPEG.
- May alpha, animation, HDR, wide gamut, 10/12-bit.
- Libre at open.
Mga limitasyon
- Mabagal i-encode — planuhin ang build time o async.
- Ang Safari ay nagdagdag sa bersyon 16 (2022).
- Mas hiyang sa synthetic graphics ang WebP lossless o PNG.
Aling format ang dapat kong gamitin?
- Mga litrato, buong-klayding hero image: AVIF na pangunahin, WebP at JPEG na fallback sa
<picture>. - UI na may transparency (icon, logo): PNG kung kailangan ng legacy, WebP lossless kung pababain ang laki.
- Line art, screenshot, diagram: PNG (o WebP lossless) — mabagsik ang artifacts ng JPEG/AVIF sa matatalim na gilid.
- Papalitan ang animated GIF: WebP o AVIF — malaki ang ipinagbawas sa laki, may tunay na alpha.
- Isang format para sa lahat ngayon: JPEG sa litrato, PNG sa graphics. Hindi pinakamababa ang laki, pero wala utang sa compatibility.
Sa praktis, maaaring mag-stack: AVIF muna, WebP pangalawa, JPEG o PNG huli
sa loob ng <picture> — bawat browser kukuha ng pinakamababa
nang kaya nitong i-decode.
Mga malimit na tanong
Paano mag-convert ng JPG patungong WebP?
Buksan ang PicBrewery, i-drop ang JPG sa upload area, at awtomatikong lilikha ang WebP kasabay ng JPEG, PNG, at AVIF. Piliin ang WebP at i-click ang download icon. Lahat nangyayari sa browser — hindi ina-upload ang file.
Paano mag-convert ng PNG patungong AVIF?
I-drop ang PNG sa PicBrewery. Sabay-sabay ang re-encode sa JPEG, WebP, at AVIF sa Web Workers. I-click ang kolum ng AVIF para i-download, o pumili ng maraming file at i-export bilang ZIP na may pinakamaliit bawat source.
Mas maganda ba ang AVIF kaysa WebP?
Sa litrato, ang AVIF ay karaniwang 20–30% na mas maliit kaysa WebP sa magkapantay na perceived quality, dahil sa AV1. Mas mabilis mag-encode ang WebP at may mas maraming suporta sa lumang device, kaya magkatulong ang dalawa.
Sinusuportahan ba ng Safari ang WebP?
Oo. Sinusuportahan ng Safari ang WebP mula sa bersyon 14 (2020). Ang kasalukuyang Safari ay humahawak ng lossy at lossless na WebP.
Palaging lossless ba ang PNG?
Oo. Ang DEFLATE ng PNG ay mahigpit na lossless: bit-identical ang pixel sa source. Galing sa filter at DEFLATE tuning (oxipng) ang pagbaba ng laki, hindi mula sa pagbabawas ng data ng larawan.
May transparency ba ang JPEG?
Hindi. Walang alpha ang klasikong JPEG. Kailangan ang PNG, WebP, o AVIF. May alpha ang JPEG XL ngunit limitado ang suporta sa browser.
Gaano kalaki ang tulong ng AVIF kumpara sa JPEG?
Ang tipikal na litrato gamit ang aom / libavif ay 40–60% na mas maliit kaysa MozJPEG kung same perceived quality. Mas maliit ang tulong kung mababang detalye at flat na kulay kung saan magaling na ang JPEG.
Dede-decode ba ng browser ko ang AVIF?
Sinusuportahan sa Chrome 85+, Firefox 93+, Edge 121+, at Safari
16+. Mag-serve gamit ang <picture> at WebP
o JPEG na fallback.
Client-side nga ba ang PicBrewery?
Oo. Nangyayari ang decode at re-encode sa WebAssembly at Web Workers sa device mo. Walang image bytes sa network — puro app at codec static files ang ina-load.
Mag-convert sa pagitan ng mga format
May partikular na kailangang i-convert? Pumili sa ibaba — may hakbang bawat pahina, tantsa sa tulong sa laki, at FAQ na pares-pares.
Subukan sa sarili mong mga larawan
Mag-drop ng maraming JPG at tingnan nang magkatabi ang WebP at AVIF. Walang upload.