Giải thích định dạng ảnh: JPEG, PNG, WebP, GIF, SVG, AVIF

Cập nhật lần cuối: June 27, 2026

Không có định dạng hình ảnh nào là tốt nhất — mỗi loại tồn tại vì nó giải quyết một vấn đề khác nhau. JPEG nén ảnh chụp, PNG bảo toàn các cạnh sắc nét và độ trong suốt, WebP và AVIF thu nhỏ ảnh hơn nữa, SVG co giãn không bị mất pixel, và GIF tạo hoạt ảnh. Việc chọn định dạng phù hợp là quyết định về nội dung, chứ không phải sở thích cá nhân. Hướng dẫn này sẽ đề cập đến chức năng của từng định dạng, kèm theo kích thước tệp được đo thực tế từ một nguồn ảnh.

Câu trả lời nhanh: nên sử dụng định dạng nào?

Hãy khớp định dạng với nội dung hình ảnh và nơi nó được hiển thị:

Để xem phân tích chi tiết giữa các định dạng, hãy tham khảo so sánh AVIF vs WebP vs JPEG.

Các định dạng so sánh với nhau như thế nào?

Sự khác biệt về kích thước tệp là lớn và nhất quán. Được đo trên một bức ảnh chụp 1400×933:

Kích thước 853 KB của PNG nổi bật: lưu trữ không mất mát một bức ảnh chụp tốn kém gấp khoảng 8 lần JPEG và 19 lần AVIF. Đó là lý do tại sao PNG không phù hợp cho các ảnh toàn trang mặc dù về mặt kỹ thuật nó có khả năng lưu trữ chúng.

JPEG — công cụ làm việc cho ảnh chụp

JPEG (1992) là định dạng mất mát (lossy) dành cho ảnh chụp. Nó loại bỏ các chi tiết tần số cao mà mắt người khó nhận thấy, đó là lý do tại sao nó thu nhỏ ảnh đáng kể nhưng lại làm mờ văn bản sắc nét và các đường thẳng mảnh.

• Tốt nhất cho: ảnh chụp, gradient, cảnh thực tế phức tạp.
• Tránh dùng cho: văn bản, ảnh chụp màn hình UI, đồ họa đường nét sắc nét, bất cứ thứ gì cần độ trong suốt (JPEG không có kênh alpha).
• Cần lưu ý: các hiện tượng khối 8×8 có thể nhìn thấy được dưới chất lượng ~70.

Hãy sử dụng chất lượng 80–85 cho ảnh web. Xem cách nén JPEG.

PNG — cạnh sắc nét và độ trong suốt

PNG là định dạng không mất mát (lossless) và hỗ trợ kênh alpha đầy đủ, vì vậy nó bảo toàn mọi pixel và bất kỳ độ trong suốt nào. Cái giá phải trả là kích thước tệp: nó không nén ảnh chụp tốt.

• Tốt nhất cho: đồ họa có cạnh sắc nét, văn bản, logo, ảnh chụp màn hình UI, ảnh trong suốt.
• Tránh dùng cho: ảnh toàn trang (hãy sử dụng WebP/AVIF/JPEG thay thế — xem bảng trên).
• Cần lưu ý: các tệp khổng lồ đối với ảnh chụp. Giảm kích thước bằng PNG-8 (≤256 màu) cho đồ họa phẳng.

Để biết chi tiết về độ trong suốt, xem cách tạo ảnh trong suốt.

WebP — mặc định web hiện đại

WebP (2010) hỗ trợ cả mất mát và không mất mát, hỗ trợ alpha, và vượt trội hơn JPEG khoảng 25–35% ở chất lượng tương đương. Hỗ trợ trình duyệt hiện đại là ~98%.

• Tốt nhất cho: ảnh chụp web và ảnh web trong suốt nơi byte rất quan trọng.
• Tránh dùng cho: email và các client rất cũ (sử dụng JPEG/PNG fallback).
• Nên đi kèm với: một fallback JPEG/PNG trong phần tử <picture>.

AVIF — ảnh nhỏ nhất

AVIF (2019) sử dụng công cụ intra-frame của codec video AV1 và vượt trội hơn WebP thêm 20–30%. Hỗ trợ là ~96% và đang tăng lên.

• Tốt nhất cho: ảnh chụp nơi byte nhỏ nhất quan trọng (ảnh hero, LCP).
• Tránh dùng cho: khi bạn không thể đảm bảo mã hóa chậm, hoặc đối với các trình duyệt rất cũ (sử dụng fallback <picture>).
• Cần lưu ý: hiện tượng nhòe mờ kết cấu tinh tế ở chất lượng rất thấp (<q40).

SVG — vector co giãn

SVG là định dạng vector: nó lưu trữ hình dạng, không phải pixel, vì vậy nó có thể co giãn với bất kỳ kích thước nào mà không mất độ sắc nét và siêu nhỏ đối với các tác phẩm nghệ thuật đơn giản.

• Tốt nhất cho: logo, biểu tượng, minh họa đơn giản, bất cứ thứ gì cần co giãn.
• Tránh dùng cho: ảnh chụp (SVG không thể đại diện chúng một cách hiệu quả).
• Cần lưu ý: độ phức tạp — một SVG chi tiết có thể lớn; hãy rasterize nếu cần thiết.

GIF — di sản hoạt hình

GIF tạo hoạt ảnh và hỗ trợ độ trong suốt 1-bit, nhưng nó bị giới hạn ở 256 màu và lớn hơn nhiều so với các định dạng hoạt hình hiện đại cho cùng nội dung.

• Tốt nhất cho: không có gì hiện đại — thay thế bằng WebP hoặc AVIF hoạt hình.
• Tránh dùng cho: bất cứ thứ gì quan trọng về màu sắc (giới hạn 256 màu) hoặc nhạy cảm với kích thước.
• Cần lưu ý: tệp lớn; một GIF 3 giây thường lớn hơn MP4 của cùng đoạn clip.

Làm thế nào để chọn khi bị áp lực?

Sử dụng quy trình quyết định ngắn này:

1. Đó có phải là một ảnh chụp? → WebP/AVIF (với fallback JPEG).
2. Nó có cần độ trong suốt không? → PNG hoặc WebP (alpha).
3. Nó có phải là logo/biểu tượng/minh họa có thể co giãn không? → SVG.
4. Đó có phải là văn bản/UI sắc nét không? → PNG.
5. Đó có phải là hoạt ảnh không? → WebP/AVIF hoạt hình, không phải GIF.
6. Nó dành cho email? → JPEG hoặc PNG (không dùng WebP/AVIF).

Đối với hầu hết các ảnh chụp web, câu trả lời hiện tại là "WebP hoặc AVIF với fallback JPEG." JPEG chỉ còn tồn tại vì khả năng tương thích phổ quát, chứ không phải vì nó là lựa chọn tốt nhất.

Làm thế nào để phục vụ nhiều định dạng?

Sử dụng phần tử <picture> để mỗi trình duyệt nhận được định dạng tốt nhất mà nó hỗ trợ:

<picture>
  <source srcset="/img/photo.avif" type="image/avif">
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Mô tả" width="800" height="600" loading="lazy">
</picture>

Trình duyệt sẽ chọn loại đầu tiên nó hỗ trợ và bỏ qua các phần còn lại. Luôn giữ một thẻ <img> thực tế với src JPEG làm fallback cuối cùng. Xem hướng dẫn định dạng ảnh trên MDN để xem bảng hỗ trợ theo trình duyệt hiện tại.

Các lỗi thường gặp

• Sử dụng PNG cho ảnh chụp. Nó hoạt động nhưng tệp lớn hơn 8–19 lần so với cần thiết.
• Sử dụng JPEG cho văn bản hoặc logo. Nén làm mờ các cạnh sắc nét. Hãy sử dụng PNG hoặc SVG.
• Phục vụ một định dạng mà không có fallback. AVIF/WebP cần fallback JPEG cho các client cũ.
• Tạo hoạt ảnh bằng GIF. WebP/AVIF hoạt hình nhỏ hơn nhiều và hỗ trợ nhiều màu hơn.
• Bỏ qua SVG cho logo. Logo được rasterize sẽ bị mờ ở DPI cao; SVG vẫn sắc nét ở mọi kích thước.

Các câu hỏi thường gặp

Tôi nên sử dụng định dạng ảnh nào?

JPEG cho ảnh chụp, PNG cho đồ họa có cạnh sắc nét hoặc độ trong suốt, WebP là mặc định web hiện đại (nhỏ hơn cả hai), AVIF cho ảnh nhỏ nhất trên trình duyệt hiện đại, và SVG cho logo và biểu tượng. Hãy khớp định dạng với nội dung.

WebP có tốt hơn JPEG không?

Đối với việc phân phối web, có — WebP nhỏ hơn 25 đến 35 phần trăm ở chất lượng bằng nhau và được hỗ trợ trong tất cả các trình duyệt hiện tại. Chỉ giữ JPEG làm fallback cho các trình duyệt rất cũ. Xem hướng dẫn chuyển đổi WebP.

Khi nào tôi nên sử dụng AVIF?

Khi bạn có thể mã hóa nó và đối tượng của bạn chủ yếu sử dụng trình duyệt hiện đại — AVIF nhỏ hơn khoảng 50 phần trăm so với JPEG. Sự đánh đổi là việc mã hóa chậm hơn và các lỗ hổng trên các trình duyệt cũ hơn. Hãy gửi AVIF với fallback WebP thông qua phần tử <picture>.

PNG có hỗ trợ độ trong suốt không?

Có — PNG có kênh alpha đầy đủ, đó là lý do tại sao nó là định dạng cho đồ họa và logo có độ trong suốt. JPEG không hỗ trợ độ trong suốt. WebP và AVIF cũng hỗ trợ alpha, ở kích thước nhỏ hơn cho việc phân phối web.

Định dạng nào nhỏ nhất cho ảnh chụp?

AVIF (nhỏ nhất trên trình duyệt hiện đại), sau đó là WebP, rồi đến JPEG. PNG lớn nhất đối với ảnh vì nó không mất mát. Đối với việc phân phối web, WebP là mặc định an toàn; AVIF khi bạn có thể mã hóa và đối tượng của bạn sử dụng trình duyệt hiện đại.

Định dạng hình ảnh nhỏ nhất là gì?

AVIF cho ảnh trên trình duyệt hiện đại (nhỏ hơn khoảng 50 phần trăm so với JPEG), sau đó là WebP. PNG lớn nhất đối với ảnh vì nó không mất mát. Đối với đồ họa có độ trong suốt, WebP hoặc AVIF vượt trội hơn PNG. Hãy khớp định dạng với nội dung và khả năng hỗ trợ trình duyệt của đối tượng người dùng.

Sự khác biệt giữa lossy và lossless là gì?

Không mất mát (PNG, WebP không mất mát) bảo toàn mọi pixel chính xác và đảo ngược hoàn hảo — không mất chất lượng nào. Mất mát (JPEG, WebP mất mát, AVIF) loại bỏ các chi tiết mà mắt ít nhận thấy nhất để thu nhỏ tệp, và sự mất mát này là vĩnh viễn. Lossy thắng về kích thước đối với ảnh chụp; lossless thắng về chất lượng đối với đồ họa, văn bản và các bản gốc bạn sẽ chỉnh sửa lại. Hãy chọn theo nội dung.

Định dạng nào nhỏ nhất cho đồ họa có độ trong suốt?

WebP hoặc AVIF, cả hai đều hỗ trợ kênh alpha và nén nhỏ hơn nhiều so với PNG. Đối với logo và biểu tượng trên trình duyệt hiện đại, WebP hoặc AVIF giảm đáng kể kích thước tệp so với PNG mà vẫn giữ được độ trong suốt. Hãy phục vụ chúng với fallback PNG thông qua phần tử <picture> cho các trình duyệt cũ hơn không hỗ trợ.

Nguồn ảnh (Image credits)

• So sánh kích thước định dạng và biểu đồ cột — được tác giả tạo ra từ một bức ảnh kiểu thương mại điện tử (Pexels #16675632, ảnh của Mikael Blomkvist) để hiển thị kích thước tệp đo thực tế qua PNG, JPEG, WebP và AVIF.