1. Trang chủ
2. Định dạng ảnh

So sánh định dạng ảnh: JPEG, PNG, WebP và AVIF

Bốn định dạng này bao phủ hơn 99% ảnh trên web hiện đại. Chúng đánh đổi rất khác nhau giữa nén, độ trong suốt, animation và hỗ trợ trình duyệt. Đây là hướng dẫn thực tế để chọn đúng.

So sánh nhanh

Tóm tắt trước, phân tích chi tiết từng định dạng ở dưới.

JPEG — nền tảng phổ biến

Cách hoạt động

JPEG (Joint Photographic Experts Group) chuẩn hóa năm 1992, là định dạng lâu đời nhất trong bốn loại. Dùng biến đổi cosin rời rạc lossy trên khối 8×8 pixel, rồi lượng tử hóa và mã entropy. Chất lượng điều khiển bằng một số 1–100. Bộ mã hiện đại như MozJPEG tiết kiệm thêm 10–20% mà không đổi bitstream — mọi trình giải mã JPEG đều đọc được.

Phù hợp nhất

Ảnh chụp có chuyển sắc mượt và nhiều chi tiết — chân dung, phong cảnh, ảnh sản phẩm, ảnh hero.

Ưu điểm

• Mọi trình xem ảnh đều hỗ trợ.
• Giải mã phần cứng gần như khắp nơi.
• Hệ sinh thái tối ưu trưởng thành (MozJPEG, jpegli).

Nhược điểm

• Không có alpha — nền phải phẳng.
• Blocky trên chữ, line art và cạnh sắc.
• Chỉ 8 bit mỗi kênh.

PNG — lossless và trong suốt

Cách hoạt động

PNG (Portable Network Graphics) ra đời giữa thập niên 1990 thay GIF không bằng sáng chế. Lossless tuyệt đối: nén DEFLATE trên bộ lọc theo từng dòng pixel. Tối ưu như oxipng (Rust, từ optipng) thử mọi kết hợp lọc/nén để nhỏ nhất mà không đổi một pixel.

Phù hợp nhất

Đồ họa UI, icon, ảnh chụp màn hình, sơ đồ, line art, logo màu phẳng, và mọi thứ cần kênh alpha thật.

Ưu điểm

• Lossless — pixel qua vòng nén vẫn nguyên.
• Alpha 8-bit, lên tới 16 bit mỗi kênh.
• Hỗ trợ phổ biến.

Nhược điểm

• Rất lớn với ảnh chụp — thường gấp nhiều lần JPEG/WebP/AVIF.
• Đặc tả gốc không có animation (APNG là mở rộng sau).

WebP — định dạng ưu tiên web của Google

Cách hoạt động

WebP Google phát hành 2010, dựa trên codec video VP8, sau đó thêm chế độ lossless riêng. Hỗ trợ lossy và lossless trong một container, có alpha và animation. Ở chế lossy thường nhỏ hơn JPEG 25–35% cùng chất lượng; lossless nhỏ hơn PNG 20–30%.

Phù hợp nhất

Giao hàng web đa dụng khi AVIF chưa an toàn — ảnh chụp, sprite có alpha, thay GIF động, và tầng fallback dưới AVIF.

Ưu điểm

• Một định dạng cho ảnh, đồ họa, alpha và animation.
• Nhỏ hơn rõ rệt so JPEG và PNG cùng chất lượng.
• Hỗ trợ rộng: mọi trình duyệt evergreen từ 2020.

Nhược điểm

• 8 bit mỗi kênh — không HDR.
• Giải mã chậm hơn JPEG trên một số máy yếu.

AVIF — dẫn đầu về nén hiện nay

Cách hoạt động

AVIF (AV1 Image File Format) là profile ảnh tĩnh của codec AV1, Alliance for Open Media (2019). Hỗ trợ màu 12-bit, alpha đầy đủ, HDR, gamut rộng và tổng hợp grain phim. Bộ mã tham chiếu (aom-av1 trong libavif) chậm nhưng cho nén tốt nhất cho ảnh thực tế.

Phù hợp nhất

Ảnh hero, thư viện ảnh và mọi nơi băng thông quan trọng hơn thời CPU. Rất hợp làm tầng trên cùng trong phần tử <picture>.

Ưu điểm

• Nén hàng đầu — thường nhỏ hơn JPEG 40–60%.
• Alpha, animation, HDR, gamut rộng, độ sâu 10/12-bit.
• Miễn phí bản quyền, mở.

Nhược điểm

• Mã hóa chậm — nên xử lý build-time hoặc bất đồng bộ.
• Safari chỉ hỗ trợ từ phiên bản 16 (2022).
• Đồ họa tổng hợp đôi khi kém duyên hơn WebP lossless hoặc PNG.

Nên dùng định dạng nào?

• Ảnh chụp, hero full-bleed: AVIF chính, WebP và JPEG làm fallback qua <picture>.
• Đồ họa UI có trong suốt (icon, logo): PNG cho tương thích cũ, WebP lossless để nhỏ hơn.
• Line art, screenshot, sơ đồ: PNG (hoặc WebP lossless) — JPEG/AVIF dễ tạo artifact trên cạnh sắc.
• Thay GIF động: WebP hoặc AVIF — nhỏ hơn rất nhiều và có alpha thật.
• Một định dạng cho mọi trình duyệt hôm nay: JPEG cho ảnh, PNG cho đồ họa — không nhỏ nhất nhưng ít nợ tương thích.

Thực tế bạn không cần chọn một. Phục vụ AVIF trước, WebP tiếp, JPEG hoặc PNG cuối trong <picture> — mỗi trình duyệt lấy bản nhỏ nhất nó giải mã được.