JPG và PNG cho web - khi nào dùng mỗi định dạng ảnh
freetoolonline.com Editorial TeamJPG phù hợp với ảnh chụp - nén mất làm giảm 5 đến 10 lần kích thước so với PNG mà không mất chất lượng hiển thị. PNG phù hợp với ảnh chụp màn hình, logo và hình có độ trong suốt - không mất dữ liệu, chữ sắc nét. WebP cho cả hai định dạng với kích thước giảm 25-35%.
Mỗi định dạng nén pixel như thế nào
JPG (cung viết là JPEG) là một định dạng có mất. Bộ mã hóa chuyển pixel sang miền tần số (DCT), lượng tử hóa các hệ số tần số cao, và vứt bỏ chi tiết mà mắt người ít có khả năng nhận ra. Vạch chất lượng (0-100, cao hơn thì tốt hơn) kiểm soát mức độ lượng tử hóa do loại bỏ chi tiết hung hàng như thế nào. JPG xuất sắc với ảnh chụp và tệ với cảnh sắc nét - văn bản, chrome UI và line art sẽ có halo artifact thấy được ở các mức chất lượng web thông dụng.
PNG (Portable Network Graphics) là một định dạng không mất. Pixel ra trùng bit-by-bit với pixel vào. PNG nén bằng cách tìm mẫu trong lưới pixel (DEFLATE trên scanline đã lọc) - xuất sắc trên các vùng mẫu phẳng lớn, trung bình trên các dải mẫu chụp. PNG cũng hỗ trợ độ trong suốt qua kênh alpha, điều mà JPG không làm.
So sánh kích thước tệp cho cùng một ảnh
| Loại ảnh | JPG (chat lượng 82) | PNG | WebP (lossy q=82) | AVIF (q=50) |
|---|---|---|---|---|
| Anh chụp 1920×1080 | ~320 KB | ~3,2 MB | ~220 KB | ~160 KB |
| Screenshot 1920×1080 (UI) | ~180 KB (halo thấy được) | ~130 KB | ~90 KB | ~60 KB |
| Logo đơn giản 512×512 (mau phang) | ~40 KB | ~18 KB | ~10 KB | ~7 KB |
| Bieu tương 64×64 với trong suốt | Không hỗ trợ | ~2 KB | ~1 KB | ~0,8 KB |
Các quy tắc quyết định dùng trong 2026
Các quy tắc quyết định dùng trong 2026 trên JPG vs PNG cho web: dùng JPG (hoac WebP) cho anh; dùng PNG khi cần cảnh UI sắc hoac trong suốt má định dạng ảnh vạn xữ ly kem.
Ảnh chụp với trong suốt (chủ thể cắt ra trên nền trong suốt). → PNG - JPG không thể biểu diễn alpha. Ưu tiên WebP nếu khán giả của bạn loại trừ các client email cũ và WebView Android cũ.
Screenshot của UI, code hoặc văn bản. → PNG làm tiều chuan; WebP lossless làm nặng cao. Cảnh pixel sắc (chống răng cưa văn bản, viền UI) lộ artifact nén JPG ở bất cứ chất lượng nào dưới 90, và JPG chất lượng 90 lớn hơn PNG tương đương.
Logo hoặc đồ họa đơn giản. → SVG nếu ban có nguon vector (xem hướng dẫn PNG vs SVG). Nếu chỉ có raster tồn tại, PNG thắng về độ sắc nét; WebP lossless làm nâng cao.
Tiêu đề newsletter email. → Chi JPG hoac PNG. Nhiều client email không render WebP/AVIF. Dùng định dạng phổ dùng ngay cả khi một codec hiện đại sẽ tiết kiệm byte.
Điểm ngọt chất lượng-vs-kích thước
JPG chat lượng 82 là mặc dinh web da hoạt dong trong mot thấp ky. Dưới 75, các artifact nén trở nên thấy được trên ảnh chi tiết nhiều; trên 90, kích thước tệp tăng nhanh với lợi ích thị giác tới thiểu.
JPG progressive là mot sap xếp lai của cung du lieu ảnh - cung chất lượng, cung kích thước, nhung trình duyệt có thế hien thì xem trước do phan giai thấp ngay khi nhom scanline dau tiền tài ve. Dùng mã hóa progressive cho mỗi ảnh hero above-the-fold.
Cac trinh tới ưu PNG (pngquant, oxipng, zopflipng) có thế cat 30-70% tự mot ban xuất PNG mặc dinh má không mất chat lượng - chung tìm cac tham số filter/compression tốt hơn nhung gi bo má hoa da thu. Luôn chạy tối ưu trước khi gửi một PNG lớn lên production.
Chọn chất lượng: mục tiêu cụ thể
Chọn chất lượng: mục tiêu cụ thể cho JPG vs PNG cho web - bắt đầu JPG khoảng chất lượng 75-85 cho hero, rồi so sánh byte và artifact trước khi ship tệp nặng hơn.
Chuỗi fallback <picture>
Chuỗi fallback picture trên JPG vs PNG cho web phục vụ WebP hoặc AVIF trước, rồi JPG hoặc PNG, để trình duyệt cũ vẫn nhận ảnh đọc được mà không bị trắng.
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="Mô tả" width="1920" height="1080">
</picture>Trinh duyet chọn source dau tiền nô có thế giai ma. <img> là fallback phổ dụng. Luon bao gom width và height de trảnh cumulative layout shift.
Khi nào nâng cấp PNG lên WebP hoặc AVIF
WebP lossless là một thay thế trực tiếp cho PNG với mức tiết kiệm kích thước tệp ~25-35% trên hầu hết nội dung. Hỗ trợ trình duyệt là phổ quát từ Safari 14 (2020). Nếu khán giả của bạn chỉ-trình-duyệt (không nặng về email), một tệp WebP lossless duy nhất thay thế PNG mà không khác biệt thị giác. AVIF lossless nén chặt hơn nhưng có thời gian mã hóa chậm hơn và chỉ được thêm vào Safari trong phiên bản 16 (2022).
Với ảnh chụp, AVIF ở chất lượng 50-60 thường sánh ngang với JPG chất lượng 85 ở nửa kích thước tệp. Sự đánh đổi là thời gian mã hóa (AVIF chậm hơn JPG 10-30× để mã hóa) và hỗ trợ giải mã phần cứng trên các thiết bị cũ hơn.
Chuyển đổi giữa các định dạng
Chuyển đổi giữa các định dạng cho JPG vs PNG cho web: mở Image Converter, chọn đích, và kiểm tra lại trong suốt - đặt logo PNG sang JPG có thể về hợp trang bạn không muốn.
Công cụ liên quan
- Nén Ảnh - giảm kích thước tệp JPG/PNG với tinh chỉnh chất lượng bằng AI.
- Bộ Kiểm Tra Mức Nén JPEG - kiểm tra chất lượng đã lưu của bất kỳ JPG nào.
- Đổi Kích Thước Ảnh - đặt kích thước pixel chính xác với nội suy bicubic.
- Bộ Tối Ưu Ảnh Insights - kiểm tra ảnh hướng tới PageSpeed.
- Định dạng ảnh iPhone giải thích - HEIC, JPG, PNG, RAW - khi nào iPhone dùng từng định dạng và cách chuyển đổi dễ dàng web.
- Cách chuyển đổi 100 ảnh HEIC sang JPG - quy trình chuyển đổi hàng loạt cho thư viện ảnh iPhone.