JPG va PNG cho web - khi nao dung moi dinh dang anh
JPG va PNG la hai dinh dang anh web thong tri tu 1996 den nhung nam 2010, va chung van la cac dinh dang ma moi trinh duyet, moi thu vien hinh anh va moi trang anh deu ho tro khong dat duoc. Su phan chia don gian ve nguyen tac - JPG cho anh chup, PNG cho bat cu thu gi co canh sac net hoac trong suot - nhung cac quyet dinh thuc te ngay nay lien quan den kich thuoc tep, mot chuoi fallback WebP/AVIF hien dai va liec mot screenshot PNG co qua nang de gui di hay khong. Huong dan nay bao quat co che ma hoa, cac quy tac quyet dinh dung trong 2026 va lo trinh nang cap len cac dinh dang hien dai.
Moi dinh dang nen pixel nhu the nao
JPG (cung viet la JPEG) la mot dinh dang co mat. Bo ma hoa chuyen pixel sang mien tan so (DCT), luong tu hoa cac he so tan so cao, va vut bo chi tiet ma mat nguoi it co kha nang nhan ra. Vach chat luong (0-100, cao hon thi tot hon) kiem soat muc do luong tu hoa do loai bo chi tiet hung hang nhu the nao. JPG xuat sac voi anh chup va te voi canh sac net - van ban, chrome UI va line art se co halo artifact thay duoc o cac muc chat luong web thong dung.
PNG (Portable Network Graphics) la mot dinh dang khong mat. Pixel ra trung bit-by-bit voi pixel vao. PNG nen bang cach tim mau trong luoi pixel (DEFLATE tren scanline da loc) - xuat sac tren cac vung mau phang lon, trung binh tren cac dai mau chup. PNG cung ho tro do trong suot qua kenh alpha, dieu ma JPG khong lam.
So sanh kich thuoc tep cho cung mot anh
| Loai anh | JPG (chat luong 82) | PNG | WebP (lossy q=82) | AVIF (q=50) |
|---|---|---|---|---|
| Anh chup 1920×1080 | ~320 KB | ~3,2 MB | ~220 KB | ~160 KB |
| Screenshot 1920×1080 (UI) | ~180 KB (halo thay duoc) | ~130 KB | ~90 KB | ~60 KB |
| Logo don gian 512×512 (mau phang) | ~40 KB | ~18 KB | ~10 KB | ~7 KB |
| Bieu tuong 64×64 voi trong suot | Khong ho tro | ~2 KB | ~1 KB | ~0,8 KB |
Cac quy tac quyet dinh dung trong 2026
Anh chup, full bleed, khong can trong suot. → JPG (chat luong 80-85) lam co so; WebP/AVIF lam bien the nang cao. JPG o q=82 khong the phan biet duoc voi ban goc khong mat doi voi tat ca tru cac mat duoc luyen nhat. Tep nho hon 5-10× so voi PNG cua cung anh do.
Anh chup voi trong suot (chu the cat ra tren nen trong suot). → PNG - JPG khong the bieu dien alpha. Uu tien WebP neu khan gia cua ban loai tru cac client email cu va WebView Android cu.
Screenshot cua UI, code hoac van ban. → PNG lam tieu chuan; WebP lossless lam nang cao. Canh pixel sac (chong rang van ban, vien UI) lo artifact nen JPG o bat cu chat luong nao duoi 90, va JPG chat luong 90 lon hon PNG tuong duong.
Logo hoac do hoa don gian. → SVG neu ban co nguon vector (xem huong dan PNG vs SVG). Neu chi co raster ton tai, PNG thang ve do sac net; WebP lossless lam nang cao.
Tieu de newsletter email. → Chi JPG hoac PNG. Nhieu client email khong render WebP/AVIF. Dung dinh dang pho dung ngay ca khi mot codec hien dai se tiet kiem byte.
Diem ngot chat luong-vs-kich thuoc
JPG chat luong 82 la mac dinh web da hoat dong trong mot thap ky. Duoi 75, cac artifact nen tro nen thay duoc tren anh chi tiet nhieu; tren 90, kich thuoc tep tang nhanh voi loi ich thi giac toi thieu.
JPG progressive la mot sap xep lai cua cung du lieu anh - cung chat luong, cung kich thuoc, nhung trinh duyet co the hien thi xem truoc do phan giai thap ngay khi nhom scanline dau tien tai ve. Dung ma hoa progressive cho moi anh hero above-the-fold.
Cac trinh toi uu PNG (pngquant, oxipng, zopflipng) co the cat 30-70% tu mot ban xuat PNG mac dinh ma khong mat chat luong - chung tim cac tham so filter/compression tot hon nhung gi bo ma hoa da thu. Luon chay toi uu truoc khi gui mot PNG lon len production.
Chon chat luong: muc tieu cu the
Bo kiem tra muc nen JPEG cua chung toi kiem tra mot JPG hien co va bao cao bang luong tu hoa cua no. Dung no de dao nguoc xem mot anh duoc luu o chat luong nao truoc khi ma hoa lai. Quy tac chung: mot anh duoc ma hoa lai hon hai lan o chat luong 82 mat chi tiet thay duoc; neu ban la chang thu ba trong mot chuoi, hay nang chat luong len 90 de bao toan margin cho lan luu lai tuong lai.
Chuoi fallback <picture>
Cac trang hien dai phuc vu mot bien the AVIF hoac WebP cho cac trinh duyet co the giai ma va fallback ve JPG hoac PNG cho phan con lai:
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="Mo ta" width="1920" height="1080">
</picture>Trinh duyet chon source dau tien no co the giai ma. <img> la fallback pho dung. Luon bao gom width va height de tranh cumulative layout shift.
Khi nao nang cap PNG len WebP hoac AVIF
WebP lossless la mot thay the truc tiep cho PNG voi muc tiet kiem kich thuoc tep ~25-35% tren hau het noi dung. Ho tro trinh duyet la pho quat tu Safari 14 (2020). Neu khan gia cua ban chi-trinh-duyet (khong nang ve email), mot tep WebP lossless duy nhat thay the PNG ma khong khac biet thi giac. AVIF lossless nen chat hon nhung co thoi gian ma hoa cham hon va chi duoc them vao Safari trong phien ban 16 (2022).
Voi anh chup, AVIF o chat luong 50-60 thuong sanh ngang voi JPG chat luong 85 o nua kich thuoc tep. Su danh doi la thoi gian ma hoa (AVIF cham hon JPG 10-30× de ma hoa) va ho tro giai ma phan cung tren cac thiet bi cu hon.
Chuyen doi giua cac dinh dang
Dung cong cu nen anh cua chung toi cho ma hoa lai JPG voi chat luong duoc AI tinh chinh. Cho chuyen doi dinh dang nguoc lai, PNG sang SVG truy vet logo PNG sang vector; SVG sang PNG rasterize mot vector o mot kich thuoc pixel ro rang. Tat ca chuyen doi chay trong trinh duyet - khong gi tai len.
Cong cu lien quan
- Nen Anh - giam kich thuoc tep JPG/PNG voi tinh chinh chat luong bang AI.
- Bo Kiem Tra Muc Nen JPEG - kiem tra chat luong da luu cua bat ky JPG nao.
- Doi Kich Thuoc Anh - dat kich thuoc pixel chinh xac voi noi suy bicubic.
- Bo Toi Uu Anh Insights - kiem tra anh huong toi PageSpeed.
Why trust these tools
- Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
- Truly in-browser - no upload. Every file-processing tool on this site runs in your browser through modern Web APIs (File, FileReader, Canvas, Web Audio, WebGL, Web Workers). Your photo, PDF, audio, or text never leaves your device.
- No tracking during tool use. Analytics ends at the page view. The actual input you paste, drop, or capture is never sent to any server and never written to any log.
- Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
- Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.