WebP và AVIF: cách chọn và kiểm thử định dạng ảnh phù hợp

AVIF có thể hơn WebP với một số ảnh và mục tiêu chất lượng; WebP có thể mã hóa nhanh hơn và phù hợp hơn với quy trình cũ rộng hơn. Phần mở rộng không bảo đảm kết quả. Hãy so sánh đầu ra đại diện, độ tương thích và chi phí quy trình, rồi cung cấp định dạng dự phòng nơi người dùng cần.

Tổng quan hai định dạng

Cả WebP và AVIF đều sinh ra từ codec video. Google phát hành WebP năm 2010 dựa trên VP8, cùng công nghệ đằng sau định dạng video WebM. Liên minh Alliance for Open Media phát hành AVIF năm 2019 dựa trên AV1, codec video mới hơn và hiệu quả hơn do Google, Mozilla, Apple, Netflix và nhiều công ty khác cùng phát triển.

Các công cụ mã hóa mới hơn của AV1 có thể cải thiện khả năng nén, trong khi triển khai WebP đơn giản và trưởng thành hơn có thể giảm chi phí xử lý. Hành vi mã hóa và giải mã thực tế phụ thuộc vào cách triển khai codec, cài đặt, đặc điểm ảnh và thiết bị.

Nén: File nhỏ hơn bao nhiêu?

Kết quả benchmark thay đổi theo tập ảnh, bộ mã hóa, mức độ tính toán, lịch sử nguồn và thước đo chất lượng. Một phép thử có trách nhiệm giữ nhất quán kích thước và chính sách siêu dữ liệu, đồng thời so sánh nhiều thước đo hình ảnh cùng đánh giá của con người:

• AVIF — có thể cho kết quả tốt với ảnh chụp, chuyển sắc, HDR và quy trình độ sâu bit cao, nhưng mã hóa có thể tốn kém
• WebP — có thể tạo đầu ra mất hoặc không mất dữ liệu hiệu quả với công cụ trưởng thành và độ phức tạp vận hành thấp hơn trong nhiều quy trình

Đừng biến con số trung bình tiếp thị thành dự đoán cho từng tệp. Xuất cả hai từ cùng bản gốc, chọn chất lượng thị giác tương đương và tính cả thời gian mã hóa, hành vi giải mã, siêu dữ liệu và dữ liệu truyền của bản dự phòng.

Tài sản không phải ảnh chụp có thể khác benchmark ảnh. Với đồ họa đơn giản, biểu tượng và minh họa phẳng, hãy so sánh ứng viên không mất dữ liệu hoặc gần như không mất dữ liệu khi được hỗ trợ; bảng màu, alpha, bộ mã hóa và cài đặt có thể làm mỗi định dạng thắng.

Hỗ trợ trình duyệt và phần mềm

Bảng hỗ trợ thay đổi và thị phần toàn cầu không đồng nghĩa với người dùng của bạn. Kiểm tra trình duyệt đích và hệ thống nhận không phải trình duyệt. Phần tử <picture> có thể đưa AVIF trước, rồi WebP, và dùng JPEG làm dự phòng <img> cuối:

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="Mô tả" />
</picture>

Tốc độ mã hóa và công cụ

Bộ mã hóa WebP thường cần ít tính toán hơn AVIF ở mức độ xử lý tương đương, nhưng tỷ lệ thay đổi lớn. Nếu CMS chuyển ảnh khi tải lên hoặc theo lô lớn, hãy đo thông lượng, bộ nhớ, thời gian chờ và chất lượng với đúng thư viện và cài đặt sẽ triển khai.

Hiệu năng bộ mã hóa thay đổi theo thư viện và phiên bản. Chi phí giải mã cũng phụ thuộc kích thước, độ sâu bit, thiết bị, trình duyệt và cách triển khai. Hãy thử thiết bị đích cấu hình thấp thay vì cho rằng khác biệt không thể nhận thấy.

Công cụ hỗ trợ rộng nhưng không đồng đều. Xác nhận nhập, xuất, ảnh động, hồ sơ màu, siêu dữ liệu và thương lượng tự động trong đúng trình chỉnh sửa, CMS, gói CDN và môi trường trình duyệt bạn dùng.

So sánh tính năng

AVIF có thể biểu diễn độ sâu bit cao hơn, dải màu rộng và tín hiệu HDR vượt mã hóa 8 bit của WebP. Khả năng này không đảm bảo màu chính xác: khâu làm master, hồ sơ, siêu dữ liệu, hành vi trình duyệt, khả năng màn hình và kiểm thử vẫn quan trọng.

Khi nào dùng định dạng nào

Chọn AVIF khi:

• Bạn kiểm soát pipeline ảnh và có thể cung cấp fallback
• Đầu ra AVIF đại diện cải thiện nút thắt truyền tải hoặc chất lượng liên quan
• Bạn cần khả năng AVIF như độ sâu bit cao hơn hoặc HDR và đã kiểm thử toàn bộ đường màu
• CDN hoặc quy trình build tạo, lưu cache và thương lượng đúng các biến thể đã xác minh

Chọn WebP khi:

• Thông lượng bộ mã hóa đo được hoặc sự đơn giản vận hành nghiêng về WebP
• Các máy khách được hỗ trợ nhận WebP và biến thể AVIF bổ sung không được biện minh
• Đồ họa đại diện đạt mục tiêu byte và chất lượng bằng WebP
• Bạn đã serve WebP và chi phí migration không đáng

Dùng cả hai khi lợi ích đo được đủ để biện minh:

Một cụm <picture> làm tăng công việc tạo, lưu trữ, cache, đánh dấu và kiểm tra chất lượng, nhưng có thể cải thiện phân phối. Một số CDN tự động thương lượng; hãy xác minh hành vi gói, khóa cache, xử lý Vary, cài đặt chất lượng và đầu ra dự phòng thay vì mặc định là “tối ưu”.

Cách chuyển đổi ảnh

Vizua có thể tạo đầu ra WebP và AVIF được hỗ trợ ngay trong trình duyệt mà không cần cài phần mềm. Tệp đã chọn không được gửi tới máy chủ xử lý ảnh của chúng tôi; mã cần thiết và dịch vụ trang vẫn có thể dùng mạng:

• Nén WebP — giảm dung lượng file WebP có sẵn
• Chuyển sang AVIF — tạo AVIF từ ảnh đầu vào được hỗ trợ
• JPG sang WebP — chuyển ảnh JPEG sang WebP
• PNG sang WebP — chuyển đồ họa PNG sang WebP

Nếu làm việc với nguồn JPEG, hướng dẫn nén ảnh không mất chất lượng giải thích cách chọn cài đặt ban đầu và so sánh đầu ra thực tế.

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