shadcn.io— hàng nghìn khối shadcn/ui dựng sẵn
Tới nội dung

AVIF hay WebP — tệp nhỏ hơn không phải lúc nào cũng đúng

Có lần tôi tiêu cả một buổi tối ngượng ngùng để so đi so lại cùng một tấm ảnh hero dưới dạng WebP và AVIF, lật qua lật lại giữa hai tab trình duyệt, cố bắt cho được một khác biệt mà mắt tôi thật sự nhìn ra. Bản AVIF nhỏ hơn 31%. Tôi không phân biệt nổi hai bản. Tôi ngồi đó thấy như vừa nhặt được tiền chùa — rồi tôi chạy cả loạt trên một thư mục 200 tấm và nhớ ra cái bẫy.

AVIF, hầu như luôn, là tệp nhỏ hơn. Điều đó đúng và đáng biết. Nhưng "nhỏ hơn" chỉ là một cột trong bảng tính, còn những cột khác mới là nơi quyết định thật sự nằm ở đó.

Nơi AVIF thắng

AVIF xây trên bộ mã hóa video AV1, và nó là một thiết kế thật sự mới hơn, khôn khéo hơn WebP. Với nội dung dạng ảnh chụp, nó thường nhỏ hơn WebP tầm 15–30% ở cùng mức chất lượng nhìn thấy. Nó xử lý các dải chuyển màu mượt — trời, da người, bóng đổ nhạt — mà không để lại những vết bệt vuông vức như các bộ mã hóa cũ trét lên. Nó hỗ trợ HDR và dải màu rộng, điều WebP không có. Nó giữ trọn kênh alpha, giống WebP.

Vài con số áng chừng từ cái thư mục tôi vừa nhắc, tất cả ở một mức chất lượng mà tôi không phát hiện ra khác biệt:

NguồnWebPAVIF
Ảnh hero — PNG 3.1 MB~360 KB~250 KB
Ảnh chụp sản phẩm — JPG 1.4 MB~180 KB~140 KB
Minh họa giao diện phẳng~28 KB~30 KB

Nhìn lại hàng cuối cùng đi. Với đồ họa phẳng, đơn giản, AVIF đôi khi ra to hơn. Sự khôn khéo của nó được chỉnh cho độ phức tạp của ảnh chụp, và nó chẳng có gì để nhằn trong một minh họa hai màu. WebP, hay thậm chí PNG, có thể thắng ở đó.

Nơi AVIF bắt bạn trả giá

Phần thắng về dung lượng không miễn phí. Hai cái giá thật:

Thời gian mã hóa. AVIF nén chậm hơn rõ rệt. Trên cùng một tấm ảnh, một lần mã hóa AVIF có thể lâu gấp mấy lần WebP — đôi khi là khác biệt giữa "tức thì" và "chờ vài giây mỗi tệp". Với một tấm ảnh hero, ai mà quan tâm. Với một loạt 200 tấm, bạn cảm nhận từng giây. WebP mã hóa nhanh đến mức gần như miễn phí.

Giải mã và hỗ trợ. Mọi trình duyệt người ta thật sự dùng giờ đều giải mã được AVIF — Chrome từ 2020, Firefox không lâu sau, Safari từ phiên bản 16 cuối 2022. Đến 2026, chừng đó bao phủ tuyệt đại đa số lưu lượng thật. Nhưng "được hỗ trợ" và "phổ quát" không cùng một từ. WebP có thêm vài năm phủ sóng phía sau, và nó giải mã nhanh hơn trên điện thoại đời thấp, nơi giải mã AV1 có thể ngốn pin và CPU thấy rõ. Một số ứng dụng email và webview nhúng đời cũ vẫn hoàn toàn không đụng tới AVIF.

Câu hỏi 20%

Vậy quyết định thật sự rút lại thành thế này: cái ~20% dôi ra có quan trọng với tấm ảnh này, ở chỗ này không?

Với một ảnh hero lớn trên trang đích — thứ tài nguyên nặng mà mọi khách ghé đều tải về — thì có. Cạo bớt 100 KB khỏi thứ chặn giữa lần vẽ hình đầu tiên của bạn thì đáng đánh đổi một lần mã hóa chậm mà bạn chỉ trả một lần. Đó là trường hợp rõ ràng nhất cho AVIF mà tôi biết.

Với một lưới ảnh nhỏ, những ảnh chụp màn hình chèn trong blog, hay bất cứ thứ gì đã dưới tầm 50 KB ở dạng WebP, câu trả lời thường là không. Hai mươi phần trăm của một số nhỏ vẫn là một số nhỏ hơn nữa. Bạn vừa đổi thời gian mã hóa và một mẩu tương thích để tiết kiệm những byte chẳng ai chờ. Ở đó WebP là mặc định điềm tĩnh hơn.

Khi nào tôi không bận tâm tới AVIF

Nếu một tệp sắp đi tới bất cứ đâu ngoài một trình duyệt hiện đại — một bản tin email, một CMS cũ, hệ thống của đối tác mà tôi không kiểm soát — tôi không đánh cược vào AVIF. Tôi dùng WebP, hoặc JPG thường nếu muốn không một chút rủi ro. Tệp nhỏ nhất mà không hiển thị nổi thì chẳng đáng giá gì.

Và tôi không mã hóa AVIF cho đồ họa phẳng, logo hay nét kẻ. Đó không phải việc của bộ mã hóa này, và tôi đã thấy nó thua WebP ở những thứ đó đủ nhiều để thôi cố.

Tôi thật sự quyết định thế nào

Quy trình thật lòng của tôi: tôi chuyển những thứ ảnh chụp nặng nề sang AVIF và giữ những thứ nhẹ, đơn giản, phân phối rộng ở dạng WebP. Không có một định dạng nào cai trị tất cả. Chỉ là chọn theo từng tấm ảnh.

Nếu bạn muốn tự thử so sánh, cả hai đều chạy ngay trong trình duyệt của bạn ở đây — WebP sang AVIF để ép nhỏ thêm các tài nguyên WebP sẵn có, và PNG sang AVIF để đi thẳng từ bản gốc. Không có gì được tải lên đâu cả; việc mã hóa diễn ra ngay trên máy bạn, cũng chính là lý do bạn sẽ tự tay cảm nhận sự chậm chạp của AVIF. Đó không phải lỗi. Đó là bộ mã hóa đang làm nhiều việc hơn để đổi lấy một tệp nhỏ hơn, ngay trước mắt bạn.

Hãy cho chính tấm ảnh hero của bạn chạy qua cả hai. Nếu bạn không thấy khác biệt mà bản AVIF nhỏ hơn đáng kể, bạn đã có câu trả lời. Chỉ đừng cho rằng câu trả lời cũng như thế với 200 tấm tiếp theo.

Bài viết liên quan


Tất cả bài viết