WebP, PNG hay JPG: Định dạng nào cho ảnh của bạn?

Cách mỗi định dạng nén

JPG: mất dữ liệu, tối ưu ảnh chụp

JPG chia ảnh khối 8×8, đổi thành thành phần tần số, bỏ chi tiết cao mắt ít nhận. Thanh chất lượng kiểm soát mức bỏ. Rất tốt cho ảnh có chi tiết nhỏ không đều, sai nhỏ ẩn trong nhiễu.

Kém với cạnh cứng. Đường đen trên trắng là thông tin tần số cao, đúng thứ định dạng bỏ, nên có quầng nhiễu vòng quanh chữ/viền. JPG cũng hoàn toàn không alpha, không phải yếu mà không có. Lưu trong suốt thành JPG thay bằng màu đặc thường đen/trắng vĩnh viễn.

PNG: không mất dữ liệu, tối ưu cho đồ họa màu phẳng

PNG không bao giờ bỏ dữ liệu pixel. Nó dự đoán từng pixel từ các pixel lân cận, lưu chênh lệch nhỏ rồi chạy DEFLATE. Chuỗi dài các pixel giống hoặc gần giống nhau nén xuống gần như không còn gì, nên đồ họa màu phẳng, ảnh giao diện, hình nét và pixel art giảm dung lượng rất tốt.

Định dạng có hai chế độ cần phân biệt. PNG truecolor lưu màu đầy đủ 24-bit cùng alpha tùy chọn. PNG bảng màu (PNG-8) lưu chỉ số trong bảng tối đa 256 màu, nên mỗi pixel cần một byte thay vì bốn. Với đồ họa phẳng thực sự dùng ít màu, chế độ bảng màu nhỏ hơn rất nhiều và hoàn toàn không mất dữ liệu. Hầu hết mọi người không dùng đến nó, và đây là lý do PNG đôi khi vượt hẳn WebP.

WebP: cả hai trong một định dạng chứa

WebP có hai chế độ riêng biệt dùng chung một phần mở rộng tệp. WebP mất dữ liệu dùng dự đoán khối mượn từ mã hóa video — thường tạo tệp nhỏ hơn JPG 20–30% ở chất lượng cảm nhận tương đương. WebP không mất dữ liệu dùng cơ chế khác với dự đoán tinh vi hơn PNG và thường nhỏ hơn PNG truecolor 20–30%.

Quan trọng là cả hai chế độ hỗ trợ alpha. Đây là ưu điểm thật của WebP: trước đó ảnh trong suốt phải là PNG, nghĩa không mất dữ liệu, nghĩa lớn. WebP mất dữ liệu có alpha cho phép nén ảnh tách nền như ảnh thường.

So sánh nhanh

Chọn theo nội dung ảnh

Ảnh chụp, không trong suốt

WebP mất dữ liệu chất lượng 80 là lựa chọn nhỏ nhất hợp lý, JPG 80 làm dự phòng tương thích. Cả hai tốt; WebP thường nhỏ hơn một phần tư. Một phần tử chọn theo nội dung <picture> phần tử cung cấp WebP với JPG dự phòng cho bạn cả hai, dù vào năm 2026 phương án dự phòng chủ yếu là để chắc chắn hơn.

Đồ họa phẳng, logo, pixel art, ảnh chụp giao diện

PNG, và hãy thử chế độ bảng màu. Đây là nơi quy tắc “WebP cho mọi thứ” thất bại rõ nhất. Logo 12 màu lưu bằng PNG bảng màu có thể chỉ vài kilobyte; cùng logo đó ở WebP mất dữ liệu chất lượng 80 thường lớn hơn vì mã hóa mất dữ liệu dành bit cho chi tiết theo khối mà bảng màu biểu diễn không tốn thêm, đồng thời thêm lỗi vào các vùng phẳng hoàn hảo. WebP không mất dữ liệu có sức cạnh tranh và đôi khi tốt hơn, nhưng chênh lệch nhỏ đến mức nên xuất cả hai để so sánh.

Sprite và mọi thứ cần alpha

PNG. Mọi game engine, trình sửa ảnh và quy trình tài nguyên đều đọc được; không mất dữ liệu nên sửa nhiều lần không tích lũy hư hại, và sprite đủ nhỏ để dung lượng hiếm khi là giới hạn. WebP không mất dữ liệu hợp lý để phân phối nếu engine hỗ trợ; dù vậy hãy giữ PNG làm bản làm việc. Không bao giờ dùng JPG: thiếu alpha khiến sprite cắt kỹ xuất hiện trong hộp trắng.

Ảnh chụp có độ trong suốt

Đây là sở trường WebP mất dữ liệu, lấp khoảng năng lực thật. Sản phẩm nền trong suốt PNG 800KB, WebP alpha quality 80 có thể dưới 100KB không khác thấy. PNG là dự phòng duy nhất, lớn nhiều lần.

Hai ví dụ cần biết

Con số cụ thể giúp hiểu các đánh đổi. Hai trường hợp từ các lượt tối ưu thực:

• Thẻ mạng xã hội PNG 606 KB được mã hóa lại thành JPG 81 KB. Thẻ có nền ảnh chụp với chữ phủ lên, được xuất PNG vì đó là mặc định trong phần lớn công cụ thiết kế. PNG không phù hợp với nội dung ảnh chụp, nên tệp rất lớn; ở JPG chất lượng 82, khác biệt nhìn thấy là không có tại kích thước mọi người thực sự xem. Chỉ đổi một danh sách thả xuống đã giảm 87%.
• Ảnh nền trang giảm khoảng 57% khi chuyển PNG sang WebP. Ảnh lớn, mềm, nhiều gradient, không mép cứng hay trong suốt, đúng thứ nén mất dữ liệu xử lý tốt. Cùng hình, dưới nửa byte.

Cả hai kết quả tốt đều nhờ chọn định dạng theo nội dung thay vì quy tắc chung. Thử tương tự với bộ biểu tượng màu phẳng thì PNG sẽ thắng cả hai.

Ngoại lệ ảnh xã hội

Một nơi nên chủ ý không dùng WebP: ảnh Open Graph và thẻ Twitter. Các URL đó được trình thu thập dữ liệu và bot xem trước liên kết truy xuất — Slack, Discord, iMessage, WhatsApp, LinkedIn, trình đọc RSS, trình duyệt trong ứng dụng cùng rất nhiều công cụ nội bộ — chứ không phải những trình duyệt hiện đại mà thống kê hỗ trợ WebP mô tả.

Mức hỗ trợ ở nhóm đó thấp đáng kể, lỗi theo cách khó chịu: không báo lỗi nhìn thấy, liên kết chỉ không có ảnh, nhiều tuần sau mới được nhắc. Dùng JPG thay có thể thêm 30% byte ở một tệp do hạ tầng lấy, không phải người dùng kết nối tính phí dung lượng.

Email cũng cần thận trọng. Các trình email có hệ tương thích riêng, một số vẫn không hỗ trợ WebP. Tệp đính kèm và ảnh cho email nên là JPG hoặc PNG.

Quy trình quyết định

1. Có cần độ trong suốt không? Nếu không, tới bước 3. Nếu có, loại hẳn JPG.
2. Ảnh trong suốt là ảnh chụp? Ảnh chụp có alpha → WebP mất dữ liệu. Hình màu phẳng hoặc sprite có alpha → PNG.
3. Đó là ảnh chụp? Có → WebP mất dữ liệu, hoặc JPG khi tính tương thích quan trọng. Không → tiếp tục.
4. Màu phẳng và cạnh sắc? Xuất PNG bảng màu và WebP không mất dữ liệu, so hai tệp rồi dùng nhỏ hơn. Đừng giả định.
5. Đó là thẻ social, ảnh email hoặc tài nguyên cho quy trình không biết? Bỏ qua mọi lựa chọn ở trên và dùng JPG hoặc PNG.

Bước 4 là bước mọi người hay bỏ qua. Xuất hai tệp và so sánh số byte mất mười lăm giây, đáng tin cậy hơn mọi quy tắc kinh nghiệm, vì câu trả lời thực sự phụ thuộc vào từng ảnh cụ thể.

Của chúng tôi Cắt sprite sheet xuất PNG, JPG hoặc WebP với điều khiển chất lượng cho định dạng mất dữ liệu, nên bạn có thể cắt sheet một lần rồi thử hai định dạng mà không rời trang. Với sprite, PNG vẫn là mặc định an toàn — định dạng xuất quan trọng hơn nhiều cho tài nguyên web cuối cùng so với các khung trung gian.

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