AVIF

AVIF là gì?

AVIF (AV1 Image File Format) là định dạng hình ảnh mã nguồn mở, dựa trên công nghệ nén video AV1 do Alliance for Open Media (AOM) phát triển. Đây không phải phiên bản mở rộng của WebP hay JPEG — mà là một định dạng hoàn toàn mới, tận dụng khả năng nén tiên tiến từ codec AV1 để đạt tỷ lệ nén cao hơn ở cùng mức chất lượng thị giác.

AVIF hỗ trợ đầy đủ các tính năng hiện đại: màu 10-bit, không gian màu HDR (BT.2020, PQ, HLG), độ trong suốt (alpha channel), ảnh động (animated AVIF), và metadata phong phú. So với WebP, AVIF thường giảm 20–30% dung lượng ở cùng chất lượng SSIM hoặc VMAF — con số này được xác nhận qua thử nghiệm độc lập bởi Google, Cloudflare và Mozilla (tài liệu công khai năm 2022–2024).

Tại sao quan trọng trong SEO?

Tốc độ tải trang là yếu tố xếp hạng trực tiếp trên cả mobile và desktop theo cập nhật Core Web Vitals của Google. Hình ảnh chiếm trung bình 40–60% tổng kích thước trang web. Dùng AVIF giúp giảm dung lượng ảnh trung bình 25% so với WebP — từ đó cải thiện chỉ số LCP (Largest Contentful Paint), giảm thời gian tải, tăng tỷ lệ giữ chân người dùng và hỗ trợ xếp hạng tốt hơn.

Ngoài ra, AVIF giúp tối ưu trải nghiệm người dùng trên thiết bị cao cấp (màn hình OLED, Retina, HDR) nhờ hỗ trợ màu sâu và dải tương phản rộng — điều mà Google ngày càng coi trọng trong đánh giá chất lượng nội dung.

Cách hoạt động

AVIF sử dụng codec AV1 để nén ảnh theo nguyên lý biến đổi khối (transform coding), dự đoán nội bộ (intra prediction), và lượng tử hóa thích ứng. Khác với JPEG (dựa trên DCT) hay WebP (dựa trên VP8), AVIF tận dụng các kỹ thuật như: adaptive quantization, directional intra prediction, và tile-based parallel encoding — giúp giữ chi tiết ở vùng có độ phức tạp cao (ví dụ: tóc, da, nền xốp) mà vẫn nén mạnh ở vùng đồng nhất.

Mỗi tệp AVIF là một container ISO Base Media File Format (ISOBMFF), tương tự MP4 — cho phép nhúng metadata, ICC profile, và thông tin độ phân giải linh hoạt.

Hướng dẫn thực hiện

Dưới đây là quy trình triển khai AVIF an toàn và hiệu quả cho website:

1. Đảm bảo hỗ trợ trình duyệt: Kiểm tra mức độ hỗ trợ hiện tại tại caniuse.com/avif. Tính đến tháng 6/2024: Chrome 85+, Firefox 93+, Edge 18+, Safari 16.3+ (macOS Ventura trở lên và iOS 16.4+). Safari trên iOS cũ hơn 16.4 KHÔNG hỗ trợ.
2. Sử dụng thẻ <picture> với fallback:

   <picture>
     <source srcset="anh.avif" type="image/avif">
     <source srcset="anh.webp" type="image/webp">
     <img src="anh.jpg" alt="Mô tả ảnh" width="800" height="600">
   </picture>

3. Tối ưu hoá trước khi xuất: Dùng công cụ có kiểm soát chất lượng như libavif, avifenc (CLI), hoặc dịch vụ như Squoosh.app. Giá trị --qmax 30–45 thường cân bằng giữa dung lượng và chất lượng thị giác. Tránh dùng --lossless trừ khi cần chỉnh sửa lại ảnh sau này.
4. Kích thước và định dạng đáp ứng: Kết hợp AVIF với srcset và sizes để cung cấp ảnh phù hợp từng màn hình. Luôn khai báo width và height tĩnh để tránh layout shift.
5. Cache và CDN: Đảm bảo server hoặc CDN gửi đúng header Content-Type: image/avif và hỗ trợ HTTP/2 hoặc HTTP/3 để tận dụng lợi thế multiplexing.

Lỗi thường gặp

• Ảnh không hiển thị trên Safari cũ hoặc Android WebView: Nguyên nhân do thiếu fallback. Cách khắc phục: luôn bao bọc AVIF trong thẻ <picture> và đặt ảnh JPEG/WebP làm ảnh cuối cùng.
• Thời gian encode quá lâu khiến build chậm: AVIF có tốc độ nén chậm hơn WebP (đặc biệt ở chế độ chất lượng cao). Giải pháp: dùng preset --speed 6–8 cho môi trường CI/CD; hoặc xử lý hậu kỳ bằng worker riêng.
• Ảnh bị vỡ màu hoặc mất alpha trên một số nền tảng: Một số công cụ chuyển đổi chưa xử lý đúng profile màu hoặc kênh alpha. Kiểm tra bằng ffprobe -v quiet -show_entries stream=codec_name,width,height,pix_fmt -of csv anh.avif. Nếu pix_fmt không phải yuva420p (cho alpha) hoặc gbrp10le (cho 10-bit), cần điều chỉnh tham số đầu vào.
• Googlebot không thu thập ảnh AVIF: Hiện tại Googlebot hỗ trợ AVIF từ tháng 3/2022. Nếu ảnh không xuất hiện trong Search Console > Enhancements > Images, kiểm tra file robots.txt, thẻ noindex, hoặc lỗi 404/403 khi crawl anh.avif.

Ví dụ thực tế

Một trang sản phẩm thời trang tại Việt Nam (domain: giayxinh.vn) đã chuyển 1.200 ảnh sản phẩm sang AVIF kết hợp fallback WebP/JPEG. Kết quả sau 4 tuần:

Chỉ số	Trước	Sau	Thay đổi
Dung lượng ảnh trung bình	124 KB	89 KB	↓ 28%
LCP (mobile)	3.8s	2.6s	↑ cải thiện 32%
Tỷ lệ thoát (mobile)	64%	57%	↓ 7 điểm phần trăm
Click-through rate (CTR) từ tìm kiếm ảnh	1.2%	1.8%	↑ 50%

Lưu ý: Kết quả phụ thuộc vào cấu trúc trang, tốc độ mạng người dùng và mức độ tối ưu khác (CSS, JS, font). Không áp dụng chung cho mọi website.

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

AVIF có thay thế hoàn toàn JPEG và WebP được không?

Không — AVIF chưa thể thay thế hoàn toàn vì thiếu hỗ trợ trên một số trình duyệt cũ (Safari <16.4, Android WebView <117) và công cụ quản lý nội dung (CMS) chưa tích hợp sẵn. Nên dùng theo mô hình progressive enhancement: AVIF làm ưu tiên, WebP làm fallback, JPEG làm dự phòng cuối cùng.

Tôi có nên nén ảnh AVIF ở chế độ lossless không?

Không khuyến khích cho ảnh hiển thị trên web. Lossless AVIF thường lớn hơn lossy 2–3 lần mà mắt người không phân biệt được. Chỉ dùng lossless khi ảnh cần chỉnh sửa lại sau này (ví dụ: kho ảnh nội bộ, hệ thống DAM). Với web, mức qmin=20, qmax=40 là hợp lý.

Google có hiểu và xếp hạng ảnh AVIF khác biệt so với WebP?

Google không xếp hạng ảnh dựa trên định dạng. Nhưng định dạng ảnh ảnh hưởng gián tiếp qua trải nghiệm người dùng (tốc độ, chất lượng hiển thị, tương thích). Googlebot thu thập và xử lý AVIF bình thường từ năm 2022. Không có bằng chứng nào cho thấy AVIF được ưu tiên đặc biệt trong kết quả tìm kiếm ảnh — nhưng việc cải thiện LCP và CLS thì có tác động rõ ràng đến thứ hạng tổng thể.