WebP là gì? So sánh WebP, PNG, JPG và khi nào nên dùng

WebP là gì? WebP là định dạng ảnh do Google phát triển và công bố năm 2010. Một tệp WebP (.webp) lưu hình ảnh bằng nén có mất dữ liệu (lossy), dựa trên codec video VP8, hoặc nén không mất dữ liệu (lossless), và cả hai chế độ đều hỗ trợ độ trong suốt alpha lẫn ảnh động. Mục đích của nó rất đơn giản: tệp nhỏ hơn JPG, PNG hay GIF với chất lượng hình ảnh tương đương.

Dùng thử miễn phí: Hình ảnh sang WebP Miễn phí, không cần tài khoản.

Vì vậy WebP trở thành lựa chọn mặc định của nhiều website, và đó cũng là lý do bạn giờ hay gặp tệp .webp khi lưu ảnh từ web. Bài hướng dẫn này giải thích tệp WebP là gì, WebP so với PNG và WebP so với JPG thực sự khác nhau ra sao, khi nào không nên dùng WebP, cũng như cách mở và chuyển đổi nó. Để chuyển ngay một ảnh PNG hoặc JPG sang WebP, hãy dùng công cụ chuyển ảnh sang WebP miễn phí, chạy ngay trong trình duyệt của bạn.

WebP là gì? Định dạng này hoạt động thế nào

Tệp WebP là một vùng chứa (container) nhỏ, dựa trên RIFF, cùng cấu trúc với tệp âm thanh WAV, chứa một trong hai loại dữ liệu ảnh:

• WebP lossy nén ảnh giống như một khung hình đơn của video VP8. Nó dự đoán từng khối điểm ảnh từ các khối lân cận và chỉ lưu phần chênh lệch, đây chính là nguồn gốc của mức tiết kiệm so với JPG. Định dạng này làm việc ở không gian màu Y'CbCr 4:2:0 8 bit, nên chi tiết màu được lưu ở một nửa độ phân giải, giống như phần lớn ảnh JPG.
• WebP lossless là một codec riêng, tái tạo chính xác từng điểm ảnh như PNG nhưng có công cụ nén tốt hơn.

Cả hai chế độ đều có thể mang kênh alpha cho độ trong suốt, và một tệp WebP có thể chứa nhiều khung hình kèm thời gian hiển thị, tạo thành WebP động (animated WebP), một sự thay thế gọn nhẹ hơn cho GIF động. Một ảnh WebP có thể lớn tới 16.383 × 16.383 điểm ảnh.

WebP cũng được mô tả trong tài liệu ngoài Google: RFC 9649, do IETF công bố vào tháng 11 năm 2024, mô tả định dạng này và đăng ký kiểu phương tiện image/webp mà máy chủ gửi trong header Content-Type.

Tệp WebP nhỏ hơn bao nhiêu?

Tài liệu WebP của Google đưa ra các số liệu sau từ thử nghiệm của chính hãng:

• Ảnh WebP lossless nhỏ hơn 26% so với PNG.
• Ảnh WebP lossy nhỏ hơn 25–34% so với ảnh JPEG tương đương ở cùng chỉ số SSIM, một thước đo mức độ giống ảnh gốc về mặt thị giác.
• Độ trong suốt ở chế độ lossless chỉ tốn thêm khoảng 22% dung lượng, còn WebP lossy có độ trong suốt thường cho tệp nhỏ hơn 3 lần so với PNG.

Đây là số liệu trung bình, không phải cam kết. Áp dụng vào con số thực tế, một ảnh chụp màn hình PNG 200 KB sẽ còn khoảng 148 KB ở dạng WebP lossless (200 × 0,74), còn một ảnh JPEG 500 KB sẽ còn khoảng 330 KB đến 375 KB ở dạng WebP lossy. Với một trang có mười ảnh 300 KB (tổng cộng 3.000 KB), cùng khoảng đó cho ra 1.980–2.250 KB, tiết kiệm 750–1.020 KB cho mỗi lượt truy cập không có bộ nhớ đệm.

Từng tệp cụ thể có thể tốt hơn hoặc kém hơn. Một ảnh JPEG đã bị nén mạnh thậm chí có thể lớn hơn khi mã hóa lại, vì vậy hãy luôn so sánh kích thước đầu ra với ảnh gốc.

So sánh WebP, PNG, JPG và AVIF

WebP so với PNG

WebP có tốt hơn PNG không? Với website thì thường là có. WebP lossless giữ nguyên từng điểm ảnh của PNG và, theo số liệu của Google, nhỏ hơn trung bình 26%, trong khi WebP lossy có kênh alpha có thể thu nhỏ ảnh sản phẩm nền trong suốt hơn nhiều. PNG vẫn thắng ở ba điểm: mở được trong mọi chương trình từng được tạo ra, hỗ trợ màu 16 bit cho việc chỉnh sửa đòi hỏi độ chính xác cao, và vẫn là định dạng an toàn hơn cho tệp gốc bạn sẽ còn chỉnh sửa. Với ảnh chụp màn hình có chữ màu nhỏ, hãy dùng WebP lossless thay vì lossy, vì lấy mẫu màu 4:2:0 có thể làm nhòe các đường mảnh màu đỏ hoặc xanh lam.

WebP so với JPG

Với ảnh chụp trên web, WebP lossy cho chất lượng tương đương với dung lượng nhỏ hơn, và khác với JPG, nó có thể trong suốt hoặc chuyển động. Lợi thế của JPG là khả năng tương thích: mọi máy ảnh, máy in, ứng dụng email và phần mềm văn phòng đều đọc được. Nếu tệp được dùng bên ngoài trình duyệt, JPG là lựa chọn an toàn hơn.

AVIF, dựa trên codec video AV1, là đối thủ mới hơn. Nó hỗ trợ độ sâu bit cao hơn và thường nén được nhiều hơn, nhưng mã hóa chậm hơn và được hỗ trợ muộn hơn. Cách thiết lập phổ biến là AVIF trước, WebP thứ hai, JPG cuối cùng.

Trình duyệt hỗ trợ WebP

Mọi trình duyệt lớn hiện hành đều hiển thị được WebP, kể cả tệp lossless, trong suốt và ảnh động:

• Chrome 32 trở lên, Edge 18 trở lên, Firefox 65 trở lên, Opera 19 trở lên.
• Safari 14 trở lên trên macOS 11 Big Sur hoặc mới hơn, và Safari trên iOS/iPadOS 14 trở lên.

Chỉ các hệ thống cũ bị bỏ lại, chẳng hạn Internet Explorer hoặc một máy Mac vẫn chạy macOS 10.15 Catalina. Google Tìm kiếm cũng lập chỉ mục ảnh WebP: hướng dẫn về hình ảnh của Google liệt kê BMP, GIF, JPEG, PNG, WebP, SVG và AVIF là các định dạng được hỗ trợ.

Khi nào không nên dùng WebP

WebP là định dạng phân phối để hiển thị trên màn hình. Hãy bỏ qua nó trong các trường hợp sau:

• In ấn. WebP chỉ hỗ trợ RGB, không có chế độ CMYK, và các dịch vụ in thường yêu cầu PDF, TIFF hoặc JPG chất lượng cao.
• Tệp gốc để chỉnh sửa. Mỗi lần lưu lossy lại mất đi một chút chi tiết. Hãy giữ tệp gốc PNG, TIFF, RAW hoặc tệp dự án của trình chỉnh sửa, và chỉ xuất WebP khi đăng tải.
• Tệp bạn gửi cho người khác. Các phiên bản cũ của trình chỉnh sửa ảnh, bộ ứng dụng văn phòng, ứng dụng email và biểu mẫu tải lên có thể từ chối .webp. Hãy gửi JPG hoặc PNG khi bạn không biết người nhận dùng phần mềm gì.
• Ảnh vượt quá 16.383 điểm ảnh ở bất kỳ cạnh nào, chẳng hạn ảnh toàn cảnh hoặc bản đồ lớn.
• Ảnh JPG đã nén mạnh. Mã hóa lại sẽ thêm một thế hệ nhiễu nén thứ hai và có thể chẳng tiết kiệm được gì.

Cách dùng WebP trên website kèm phương án dự phòng

Vì mọi trình duyệt hiện hành đều hỗ trợ WebP, một thẻ <img src="photo.webp"> đơn giản hoạt động với gần như tất cả mọi người. Để bao quát cả trình duyệt cũ, hãy dùng phần tử <picture>: trình duyệt chọn <source> đầu tiên có type mà nó hỗ trợ, nếu không thì quay về <img>.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="Ghế bành màu xanh trong phòng khách sáng sủa"
       width="1200" height="800">
</picture>

Hãy giữ alt, width và height trên thẻ <img>, vì chúng áp dụng cho bất kỳ tệp nào được tải. Đồng thời kiểm tra rằng máy chủ của bạn gửi Content-Type: image/webp; với cấu hình Apache cũ, bạn có thể cần thêm AddType image/webp .webp vào .htaccess.

WebP ảnh hưởng đến SEO chủ yếu thông qua tốc độ. Chỉ số Largest Contentful Paint (LCP) trong Core Web Vitals thường là một ảnh hero (ảnh lớn đầu trang), và tệp nhỏ hơn sẽ tải xong sớm hơn, nhất là trên kết nối di động. Tuy vậy, chỉ đổi định dạng sẽ không cứu được một ảnh rộng gấp bốn lần khoảng trống mà nó lấp đầy.

Cách mở tệp WebP trên Windows và macOS

Cách mở tệp WebP tùy thuộc vào hệ thống của bạn:

• Bất kỳ trình duyệt nào: kéo tệp vào cửa sổ Chrome, Edge, Firefox hoặc Safari.
• Windows 10 và 11: mở bằng Ảnh (Photos) hoặc Paint. Nếu Windows không nhận ra tệp, hãy cài Webp Image Extensions miễn phí của Microsoft từ Microsoft Store; tiện ích này cũng thêm ảnh thu nhỏ trong File Explorer.
• macOS 11 Big Sur trở lên: nhấp đúp để mở tệp trong Xem trước (Preview); Quick Look (phím Space trong Finder) cũng hiển thị được.

Cách chuyển đổi WebP

Cách chuyển đổi WebP tùy thuộc vào chiều chuyển đổi bạn cần.

Sang WebP, ngay trong trình duyệt: công cụ chuyển đổi WebP của TimeToTime chuyển đổi mỗi lần một ảnh PNG, JPG hoặc ảnh khác mà trình duyệt đọc được. Chọn Chất lượng từ 1 đến 100 (mặc định 80), nhấp Chuyển đổi sang WebP, và công cụ sẽ hiển thị kích thước đầu ra cùng mức nhỏ hơn hoặc lớn hơn so với ảnh gốc, ví dụ "Nhỏ hơn ảnh gốc 67%" khi một ảnh PNG 1.250.000 byte trở thành tệp WebP 412.500 byte. Độ trong suốt được giữ nguyên, và ảnh không bao giờ rời khỏi thiết bị của bạn. Công cụ không có chế độ hàng loạt hay thay đổi kích thước, siêu dữ liệu EXIF không được sao chép, và ảnh GIF động sẽ trở thành ảnh tĩnh. Safari có thể không mã hóa được WebP; khi đó công cụ sẽ thông báo và lưu tệp PNG, vì vậy hãy dùng Chrome, Edge hoặc Firefox. Nếu bạn cũng cần giảm kích thước khung hình, Trình nén ảnh có tùy chọn chiều rộng tối đa và cũng xuất được WebP.

Sang WebP, bằng dòng lệnh: công cụ cwebp của Google trong gói libwebp chuyển đổi từng tệp riêng lẻ hoặc cả thư mục bằng script:

cwebp -q 80 in.png -o out.webp
cwebp -lossless logo.png -o logo.webp

-q đặt chất lượng từ 0 đến 100 (mặc định 75), còn -lossless chuyển sang chế độ lossless.

Từ WebP sang PNG hoặc JPG: trên macOS, mở tệp trong Xem trước, chọn Tệp › Xuất rồi chọn PNG hoặc JPEG. Trên Windows, mở tệp trong Paint và dùng File › Save as. Bằng dòng lệnh, dwebp in.webp -o out.png sẽ ghi ra một tệp PNG.

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

Tệp WebP là gì?

Tệp .webp là ảnh ở định dạng WebP của Google. Nó có thể là ảnh chụp (lossy), đồ họa chính xác đến từng điểm ảnh (lossless), ảnh trong suốt hoặc một đoạn ảnh động ngắn, và mọi trình duyệt hiện hành đều mở được.

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

Với trang web thì thường là có: WebP lossless nhỏ hơn PNG trung bình 26% mà vẫn giữ nguyên từng điểm ảnh. Với tệp gốc để chỉnh sửa, ảnh 16 bit và những tệp người khác cần mở được bằng bất kỳ chương trình nào, PNG là lựa chọn an toàn hơn.

Chuyển sang WebP có làm giảm chất lượng không?

WebP lossy loại bỏ một phần chi tiết, giống như JPG; ở chất lượng 75–85, sự khác biệt khó nhận ra trên hầu hết ảnh chụp. WebP lossless giữ nguyên từng điểm ảnh. Chuyển một ảnh JPG sang WebP lossless sẽ không khôi phục được chi tiết mà JPG đã mất.

Vì sao các website dùng WebP thay vì JPG?

Tệp nhỏ hơn tải nhanh hơn và tốn ít băng thông hơn, giúp cải thiện Largest Contentful Paint. WebP còn hỗ trợ độ trong suốt và ảnh động, điều mà JPG không làm được.

Có thể chuyển WebP ngược lại sang JPG hoặc PNG không?

Có. Dùng chức năng Xuất của Xem trước trên Mac, Save as của Paint trên Windows, hoặc dwebp bằng dòng lệnh. Kết quả không thể tốt hơn tệp WebP, vì vậy hãy giữ lại ảnh gốc bất cứ khi nào có thể.

Dùng thử miễn phí: Hình ảnh sang WebP Miễn phí, không cần tài khoản.