Xử lý ảnh

WebP là gì? Khi nào nên dùng WebP thay cho JPG và PNG

Đội ngũ Softonline6 phút đọc

WebP là gì: so sánh định dạng ảnh WebP với JPG và PNG về dung lượng và độ trong suốt

Tải ảnh từ một trang web về thì thấy đuôi .webp, mở bằng phần mềm cũ không được, nhưng website của bạn lại được khuyên dùng chính định dạng này. Vậy WebP là gì? Đây là định dạng ảnh Google phát triển cho web, vừa nén được kiểu JPG vừa kiểu PNG, cho tệp nhẹ hơn ở cùng chất lượng. Bài này giúp bạn hiểu WebP khác JPG, PNG ở đâu, khi nào nên dùng, khi nào nên giữ định dạng cũ và cách đổi qua lại.

Tóm tắt nhanh

  • WebP là định dạng ảnh Google công bố năm 2010, có cả nén mất dữ liệu và không mất dữ liệu, hỗ trợ nền trong suốt và ảnh động.
  • Theo Google, WebP lossless nhỏ hơn PNG khoảng 26%, WebP lossy nhỏ hơn JPG 25–34% ở chất lượng tương đương.
  • Nên dùng cho ảnh trên website, banner, ảnh sản phẩm; Chrome, Safari, Firefox, Edge đều hiển thị được.
  • Giữ JPG, PNG khi gửi in, nộp hồ sơ hoặc gửi cho người dùng phần mềm cũ.
  • Đổi qua lại nhanh bằng công cụ đổi định dạng ảnh JPG, PNG, WebP.

WebP là gì?

WebP (đọc là "uép-pi") được Google giới thiệu trên blog Chromium ngày 30/9/2010 như một định dạng ảnh mới cho web. Phần nén mất dữ liệu dựa trên dòng bit của chuẩn video VP8, còn chế độ không mất dữ liệu được bổ sung sau đó để thay thế PNG.

Một tệp WebP có thể là:

  • WebP lossy: giống JPG, bỏ bớt chi tiết khó thấy để tệp nhỏ, hợp với ảnh chụp.
  • WebP lossless: giống PNG, giữ nguyên từng điểm ảnh, hợp với logo, ảnh chụp màn hình.
  • Có kênh trong suốt: theo Google, WebP lossless hỗ trợ trong suốt chỉ tốn thêm khoảng 22% dung lượng.
  • Ảnh động: thay cho GIF, APNG với dung lượng nhỏ hơn.

Kích thước tối đa của một ảnh WebP là 16.383 × 16.383 px, dư cho mọi ảnh dùng trên web.

WebP khác JPG và PNG thế nào?

Tiêu chíJPGPNGWebP
Kiểu nénMất dữ liệuKhông mất dữ liệuCả hai
Nền trong suốtKhôngCóCó
Ảnh độngKhôngCó (APNG)Có
Dung lượngNhỏ với ảnh chụpLớn với ảnh chụpThường nhỏ nhất
Tương thíchGần như mọi nơiGần như mọi nơiTrình duyệt hiện đại, một số phần mềm cũ chưa mở được

Một điểm kỹ thuật nên biết: WebP lossy luôn lưu màu ở chế độ 8-bit YUV 4:2:0, tức thông tin màu được lấy mẫu thưa hơn độ sáng. Ảnh chụp không bị ảnh hưởng thấy được, nhưng chữ màu đỏ nhỏ hay đường kẻ màu mảnh có thể hơi nhòe viền. Với loại ảnh này, hãy dùng PNG hoặc WebP lossless.

Khi nào nên dùng WebP thay cho JPG và PNG?

  • Ảnh trên website, blog, trang bán hàng: ảnh nhẹ hơn giúp trang tải nhanh trên 4G. Công cụ Lighthouse của Chrome cũng khuyến nghị phục vụ ảnh ở định dạng hiện đại như WebP.
  • Ảnh sản phẩm nền trong suốt: thay PNG nặng bằng WebP có kênh trong suốt.
  • Banner, ảnh minh họa nhiều màu: giữ chất lượng tốt mà dung lượng nhỏ hơn JPG.
  • Website WordPress: từ phiên bản 5.8, WordPress cho tải lên và dùng ảnh WebP như JPG, PNG, miễn là thư viện xử lý ảnh trên hosting hỗ trợ WebP.

Khi nào vẫn nên giữ JPG hoặc PNG?

  • Nộp hồ sơ trực tuyến: nhiều biểu mẫu chỉ nhận JPG, PNG hoặc PDF.
  • Gửi in ấn: nhà in thường làm việc với JPG, PNG, TIFF, PDF.
  • Gửi cho người dùng phần mềm cũ: phần mềm chỉnh ảnh, trình xem ảnh đời cũ có thể không mở được WebP.
  • Kho ảnh gốc: giữ bản gốc chất lượng cao để sau này xuất ra định dạng nào cũng được.

Mẹo dùng WebP cho website bán hàng

  1. Thu nhỏ trước, đổi định dạng sau: ảnh sản phẩm hiển thị rộng 600–800 px thì xuất khoảng 1.200–1.600 px là đủ nét trên màn hình độ phân giải cao. Đổi một ảnh 4.000 px sang WebP vẫn nặng hơn cần thiết.
  2. Chọn mức chất lượng theo loại ảnh: ảnh chụp để khoảng 75–85; logo, ảnh nhiều chữ giữ PNG hoặc chất lượng cao.
  3. Giữ bản gốc: lưu JPG hoặc ảnh gốc trong kho riêng để dùng cho sàn thương mại điện tử, nhà in hay đối tác chưa nhận WebP.
  4. Hỏi đơn vị làm website trước: nhiều nền tảng, plugin hoặc CDN đã tự tạo bản WebP khi bạn tải ảnh JPG lên. Khi đó chỉ cần tải ảnh đã thu nhỏ, tránh nén hai lần.
  5. Đo lại sau khi đổi: chạy Lighthouse trong Chrome để xem trang còn ảnh nào bị đánh giá chưa tối ưu.

Cách chuyển ảnh JPG, PNG sang WebP và ngược lại

Công cụ Đổi định dạng ảnh của Softonline chuyển đổi ngay trên trình duyệt, giữ nguyên kích thước điểm ảnh, nhận diện định dạng thật theo nội dung tệp và xóa EXIF, GPS.

  1. Kéo thả ảnh hoặc bấm "Chọn ảnh" (tối đa 20 ảnh, 25 MB mỗi ảnh trên máy tính).
  2. Ở "Định dạng đích", chọn "WebP (.webp)" để làm nhẹ ảnh cho web, hoặc "JPG (.jpg)", "PNG (.png)" khi cần mở bằng phần mềm cũ.
  3. Với JPG, WebP, giữ "Chất lượng" mặc định 85 hoặc chỉnh trong khoảng 10–100.
  4. Ảnh có nền trong suốt: giữ ô "Giữ nền trong suốt (PNG/WebP)"; nếu đổi sang JPG, chọn màu nền thay thế và xem ở khung "Bản xem trước".
  5. Bấm nút chuyển đổi, rồi tải từng ảnh hoặc "Tải tất cả (.zip)".

Safari chưa tạo được ảnh WebP, nên muốn xuất WebP hãy dùng Chrome, Edge hoặc Firefox. Công cụ không nhận ảnh động (GIF, WebP động), AVIF hay TIFF. Muốn vừa đổi sang WebP vừa giảm kích thước, dùng công cụ nén ảnh, chọn định dạng đầu ra WebP và bật giới hạn chiều rộng trong "Tùy chọn khác".

Lỗi thường gặp khi dùng WebP

  • Đổi đuôi tệp thay vì chuyển đổi: đổi tên .jpg thành .webp không làm ảnh nhẹ đi mà còn khiến phần mềm báo lỗi.
  • Chuyển ảnh JPG đã mờ sang WebP mong nét hơn: chuyển định dạng không thêm chi tiết; ảnh vẫn mờ như cũ.
  • Đổi logo nhiều chữ sang WebP chất lượng thấp: viền chữ dễ nhòe. Giữ PNG hoặc để chất lượng cao.
  • Chuyển qua lại nhiều lần: mỗi lần mã hóa mất dữ liệu lại mất thêm chi tiết. Luôn chuyển từ bản gốc.

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

WebP có phải định dạng trả phí không?

Không. WebP là định dạng ảnh mã nguồn mở; trình duyệt và nhiều phần mềm đều hỗ trợ mà người dùng không phải trả thêm gì.

Ảnh WebP tải về không mở được thì làm sao?

Mở bằng trình duyệt web là xem được ngay. Nếu cần chỉnh sửa hoặc gửi đi, đổi sang JPG hoặc PNG bằng công cụ đổi định dạng ảnh.

Dùng WebP có giúp website lên top Google không?

Định dạng ảnh không trực tiếp quyết định thứ hạng. WebP giúp ảnh nhẹ, trang tải nhanh hơn, và tốc độ là một phần của trải nghiệm trang mà Google đánh giá.

Safari trên iPhone có xem được ảnh WebP không?

Có. Safari hỗ trợ WebP từ phiên bản 14, ra mắt năm 2020 cùng iOS 14.

Nguồn tham khảo

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây