So sánh định dạng
AVIF hay WebP: nên dùng định dạng ảnh thế hệ mới nào?
Cả AVIF và WebP đều vượt JPEG và PNG với khoảng cách đáng kể, nhưng chúng khác nhau ở đánh đổi giữa nén và tốc độ. AVIF nén tốt hơn JPEG tới 50 phần trăm; WebP nằm quanh mức tốt hơn 25 đến 35 phần trăm và mã hóa nhanh hơn nhiều. Với một trang web mà bạn kiểm soát, AVIF đáng để chờ mã hóa; với những trường hợp tốc độ phân phối quan trọng hơn từng kilobyte, WebP là lựa chọn thực dụng.
WebP làm tốt nhất điều gì
WebP được Google thiết kế như một bước cải tiến thay thế trực tiếp cho JPEG và PNG trên web. Nó cho tệp nhỏ hơn JPEG khoảng 25 đến 35 phần trăm ở cùng chất lượng hiển thị, hỗ trợ độ trong suốt và ảnh động, và đã được mọi trình duyệt lớn hỗ trợ từ năm 2020. Việc mã hóa nhanh: cả một loạt ảnh chuyển sang WebP chỉ trong vài giây. Sự kết hợp giữa nén vững vàng, hỗ trợ rộng và mã hóa nhanh khiến WebP trở thành lựa chọn mặc định an toàn cho ảnh trên trang web hiện nay.
AVIF làm tốt nhất điều gì
AVIF dựa trên codec video AV1 và đạt mức nén thường tốt hơn JPEG khoảng 50 phần trăm và tốt hơn WebP rõ rệt ở cùng chất lượng hiển thị. Nó cũng xử lý các dải chuyển màu mượt và chi tiết nhỏ sạch hơn WebP, với ít hiện tượng nhiễu viền quanh các cạnh tương phản cao vốn xuất hiện ở định dạng nén mất dữ liệu. Hỗ trợ trình duyệt đã phủ tới mọi trình duyệt lớn kể từ cuối năm 2023. Chi phí thực sự là thời gian mã hóa: AVIF mất vài phút trong khi WebP chỉ mất vài giây, nên nó phù hợp nhất với những ảnh được nén một lần và phục vụ nhiều lần, chẳng hạn ảnh tiêu đề và ảnh sản phẩm.
Cách chọn và thử cả hai ngay trong trình duyệt
Cách thực dụng là thử cả hai trên chính bức ảnh của bạn rồi so sánh kết quả. Thả cùng một bức ảnh vào trình nén ảnh, xuất một lần ra WebP và một lần ra AVIF, rồi so sánh dung lượng tệp và chất lượng hiển thị cạnh nhau. Trình nén chạy hoàn toàn trong trình duyệt của bạn: tệp của bạn không bao giờ rời khỏi thiết bị. Với ảnh tiêu đề của một trang hoặc một thư viện ảnh sản phẩm nơi từng kilobyte ảnh hưởng đến điểm tốc độ trang, AVIF đáng để bỏ thêm thời gian mã hóa. Với nội dung do người dùng tải lên mà bạn cần xử lý nhiều ảnh thật nhanh, WebP là đánh đổi đúng đắn.
Các công cụ dùng trong hướng dẫn này
- Nén hình ảnh Giảm dung lượng tệp ảnh mà không cần tải lên. Thanh chất lượng hoặc kích thước mục tiêu theo KB. Hỗ trợ hàng loạt.
- Đổi kích thước ảnh Đổi kích thước và chuyển đổi ảnh (JPEG, PNG, WebP) mà không cần tải lên.
- Hình ảnh sang Base64 Chuyển hình ảnh sang URI dữ liệu Base64 (và ngược lại) ngay trong trình duyệt. Sao chép, đoạn CSS, không tải lên.
Câu hỏi thường gặp
Tôi có thể dùng AVIF mà không cần phương án dự phòng WebP không?
Với các trang web mới nhắm tới trình duyệt hiện đại thì có. AVIF được hỗ trợ trong Chrome, Firefox, Safari và Edge kể từ cuối năm 2023, vốn phủ phần lớn áp đảo lượng truy cập web. Nếu khán giả của bạn gồm những trình duyệt cũ hoặc một số webview di động mà bạn không thể kiểm chứng, việc cung cấp phương án dự phòng WebP trong một phần tử picture là cách an toàn: trình duyệt chọn định dạng đầu tiên mà nó hỗ trợ và bỏ qua phần còn lại.
Nên dùng định dạng nào cho ảnh trong suốt?
Cả hai đều hỗ trợ độ trong suốt. AVIF xử lý điều đó với mức nén nhỉnh hơn WebP một chút ở cùng chất lượng. Nếu ảnh trong suốt là một logo hay phần tử giao diện xuất hiện trên nhiều trang, AVIF tiết kiệm một lượng byte đáng kể. Nếu tốc độ mã hóa là một ràng buộc, WebP trong suốt cho kết quả tuyệt vời và là lựa chọn thực dụng cho việc xử lý hàng loạt.