WebP là định dạng ảnh do Google công bố năm 2010, được thiết kế để thay thế JPEG, PNG và GIF trên web nhờ nén nén có tổn hao và không tổn hao đều tốt hơn, đồng thời hỗ trợ kênh alpha cho vùng trong suốt và ảnh động. Định dạng này mã nguồn mở theo giấy phép BSD thông qua dự án WebM, và gần như mọi trình duyệt hiện đại đều đọc được thông qua các phần tử picture và thuộc tính srcset.
WebP dùng codec nào và vì sao nhỏ hơn JPEG
WebP không phải một codec mới hoàn toàn mà là sự kết hợp của hai công nghệ đã có sẵn trong bộ giải mã video của Google:
- Chế độ có tổn hao: dựa trên các khung hình trong chuẩn VP8, cùng bộ giải mã với định dạng video WebM. Mỗi khối ảnh được dự đoán từ các vùng lân cận rồi mã hóa phần sai số bằng biến đổi và lượng tử hoá, giống cách JPEG hoạt động nhưng với bộ công cụ hiện đại hơn nhiều.
- Chế độ không tổn hao: dựa trên chuẩn VP8L, kết hợp bộ lọc biến đổi nguyên tử, bảng tra mã hóa thích nghi và mã hóa mà dựa trên ngữ cảnh, cho tỉ lệ nén cao hơn hẳn DEFLATE của PNG.
So với JPEG và PNG, con số mà Google công bố trên trang dành cho nhà phát triển là: ảnh có tổn hao nhỏ hơn JPEG khoảng 25 đến 34 phần trăm ở cùng mức chất lượng thị giác, và ảnh không tổn hao nhỏ hơn PNG khoảng 26 phần trăm. Cả hai chế độ đều hỗ trợ kênh alpha, nghĩa là có thể thay thế cả PNG lẫn JPEG trong hầu hết trường hợp trên web.
Ảnh động WebP gộp nhiều khung vào một tệp, mỗi khung có thể dùng chế độ không tổn hao hoặc khung trước làm dự đoán, nên nhỏ hơn đáng kể so với GIF và APNG cùng nội dung mà vẫn giữ được kênh alpha, thứ GIF không có.
So sánh WebP với JPEG, PNG, GIF và AVIF
| Định dạng | Có tổn hao | Kênh alpha | Ảnh động | Điểm mạnh | Hạn chế |
|---|---|---|---|---|---|
| JPEG | Có | Không | Không | Quen thuộc, được hỗ trợ ở mọi nơi | Không có alpha, mép ảnh dễ rung khi nén mạnh |
| PNG | Không | Có | Không | Không mất dữ liệu, alpha đủ 8 bit | Tệp lớn, không thay thế được JPEG cho ảnh chụp |
| GIF | Không | Không | Có | Đơn giản, phổ biến lâu năm | Tối đa 256 màu, tệp ảnh động rất nặng |
| WebP | Cả hai | Có | Có | Nén tốt ở cả hai chế độ, có alpha và ảnh động | Cần kiểm tra trình duyệt cũ |
| AVIF | Cả hai | Có | Có | Nén tốt hơn WebP, thiết kế để kế thừa | Mã hóa chậm hơn, hỗ trợ trình duyệt còn mới hơn |
Cách chuyển ảnh sang WebP bằng dòng lệnh
Bộ công cụ tham chiếu là libwebp thuộc dự án WebM. Bốn công cụ đáng chú ý:
- cwebp: mã hóa một ảnh từ PNG, JPEG, TIFF, WebP hoặc ảnh thô sang WebP.
- dwebp: giải mã WebP về PNG, PAM, TIFF hoặc JPEG.
- img2webp: ghép một loạt khung ảnh thành ảnh động WebP có thể lặp vô hạn.
- webpmux: thêm hoặc tách siêu dữ liệu như EXIF và XMP khỏi tệp WebP, đồng thời ghép ảnh tĩnh với ảnh động trong cùng tệp.
Các lệnh thường dùng cho một bài viết trên web:
# Nén có tổn hao, chất lượng 75 trên thang 0 đến 100 cwebp -q 75 anh-goc.png -o anh.webp # Nén không tổn hao, giữ nguyên dữ liệu pixel cwebp -lossless anh-goc.png -o anh.webp # Dung lượng càng nhỏ càng tốt, dùng cho ảnh phông chữ và logo cwebp -near_lossless 80 anh-goc.png -o anh.webp # Ghép 30 khung thành ảnh động lặp vô hạn, mỗi khung 80 mili giây img2webp -loop 0 -d 80 khung-*.png -o hien-thuoi.webp # Kiểm tra kích thước và kênh alpha của tệp vừa tạo webpmux -info anh.webp
Cả bốn công cụ đều đọc từ luồng và ghi ra luồng, nên có thể ghép thành một dòng xử lý cho cả thư mục ảnh thay vì gọi từng tệp một. Cờ -metadata none bỏ hẳn khối EXIF vốn có thể chứa thông tin định vị, hữu ích khi xuất bản ảnh lên website công khai.
Đưa WebP lên website mà không làm hỏng trang
Trình duyệt gửi kèm tiêu đề Accept liệt kê các định dạng nó chấp nhận, nên máy chủ có thể trả bản WebP cho trình duyệt mới và bản JPEG cho trình duyệt cũ. Có ba cách phổ biến, xếp theo mức độ linh hoạt:
- Phần tử picture: khai báo nhiều thẻ source với thuộc tính type, trình duyệt lấy thẻ đầu tiên mà nó hiểu rồi rơi xuống thẻ img làm phương án cuối.
- Thuộc tính srcset trên thẻ img: chỉ cần đổi định dạng mà không cần khác biệt ảnh theo kích thước hay theo loại bố cục, thì srcset là đủ.
- Module kiểm tra tiêu đề Accept ở máy chủ: Webpack, ImageMagick hoặc một quy tắc trong Nginx sinh sẵn hai biến thể rồi chọn theo tiêu đề, cách này đẹt nhất vì không phải sửa HTML.
Ví dụ bằng phần tử picture, mã HTML cần nhúng thẳng trong bài viết:
<picture> <source type="image/webp" srcset="anh.webp"> <source type="image/jpeg" srcset="anh.jpg"> <img src="anh.jpg" alt="Mô tả cụ thể nội dung ảnh"> </picture>
Phía máy chủ cần hai thứ khớp với nhau: tiêu đề Content-Type phải là image/webp, giá trị này đã được IANA đăng ký trong RFC 9649, và dung lượng tệp phải nén sẵn trước khi phục vụ vì WebP không nén được ở thời gian gửi. Nếu trình duyệt không hiểu WebP mà máy chủ vẫn ép trả về loại này, ảnh sẽ hiện ra một khung hỏng hoặc tải xuống dạng văn bản vô dụng.
Trình duyệt nào đọc được WebP
Mức độ hỗ trợ toàn cầu đã lên tới khoảng 96,8 phần trăm người dùng internet theo số liệu CanIUse. Mốc thời gian hỗ trợ theo từng trình duyệt:
- Chrome: có tổn hao từ bản 17, thêm không tổn hao và kênh alpha từ bản 23, thêm ảnh động từ bản 32.
- Firefox: đủ cả bốn tính năng từ bản 65.
- Safari: đủ cả bốn tính năng từ bản 14 trên macOS Big Sur và iOS 14.
- Edge: đủ cả bốn tính năng từ bản 18 vì chuyển sang nền Chromium.
- Opera: có tổn hao từ 11.10, thêm không tổn hao và alpha từ 12.10, thêm ảnh động từ 19.
Với mức hỗ trợ này, một lựa chọn hợp lý cho phần lớn website là phục vụ WebP rồi giữ JPEG làm dự phòng, thay vì phải chờ AVIF phổ biến rộng rãi.
WebP hay AVIF, nên chọn định dạng nào
AVIF là định dạng kế thừa WebP, dựa trên bộ giải mã AV1, thường nhỏ hơn thêm khoảng 10 đến 30 phần trăm ở cùng chất lượng và vẫn giữ đủ kênh alpha lẫn ảnh động. Đổi lại, mã hóa AVIF tốn nhiều thời gian CPU hơn hẳn và tỉ lệ hỗ trợ trình duyệt vẫn thấp hơn WebP đáng kể.
Vì vậy cách ra quyết định trong thực tế thường là:
- Chọn WebP khi muốn đơn giản, phủ rộng và không tốn thời gian mã hóa. Đây là lựa chọn hợp lý cho hầu hết website bài viết, blog và trang bán hàng.
- Chọn AVIF khi tệp ảnh là nút thắt hiệu năng và bạn đã sẵn sàng chấp nhận quy trình build chậm hơn, đồng thời phục vụ thêm một bản dự phòng WebP.
- Trong cả hai trường hợp, vẫn giữ một bản JPEG hoặc PNG để phục vụ trình duyệt không hỗ trợ bất kỳ định dạng nào.
Những lỗi thường gặp khi chuyển sang WebP
- Quên đặt Content-Type: máy chủ phục vụ tệp WebP với tiêu đề image/jpeg khiến trình duyệt từ chối hiển thị.
- Không có bản dự phòng: nếu trang chỉ gắn một tệp WebP, ảnh sẽ biến mất với nhóm người dùng cũ thay vì hiển thị sai một chút.
- Nén quá tay: mức chất lượng dưới khoảng 50 làm bệt màu và nhòe ở vùng trời phẳng, nên thử vài mức rồi tự so sánh trước khi áp dụng hàng loạt.
- Dùng WebP cho ảnh cần xử lý phía máy chủ: nhiều thư viện xử lý ảnh và một số công cụ cắt ghép chưa đọc tốt WebP, nên giữ bản gốc JPEG để xử lý sau.
- Mất kênh alpha khi chuyển từ PNG: phải dùng cờ -alpha_quality và không nén lại thành JPEG trung gian, nếu không vùng trong suốt sẽ thành nền đen.
Tóm tắt
WebP là định dạng ảnh mã nguồn mở giúp giảm đáng kể dung lượng ảnh trên web mà không hy sinh chất lượng, nhờ kết hợp bộ giải mã VP8 cho chế độ có tổn hao và VP8L cho chế độ không tổn hao. Với khả năng hỗ trợ kênh alpha, ảnh động và mức phủ gần 97 phần trăm người dùng trình duyệt, WebP là lựa chọn hợp lý cho đa số website muốn tăng tốc độ tải trang. Định dạng kế thừa AVIF nhỏ hơn nữa nhưng mã hóa nặng và hỗ trợ chưa phổ biến bằng, nên chiến lược an toàn vẫn là phục vụ WebP kèm bản dự phòng JPEG.
Nguồn: developers.google.com/speed/webp, faq của WebP, Wikipedia: WebP, caniuse.com/webp, caniuse.com/avif, tài liệu công cụ libwebp, MDN: phần tử picture, RFC 9649
