WebP & AVIF Image Formats

WebP & AVIF Image Formats là gì?

WebP và AVIF là hai định dạng ảnh nén hiện đại do Google (WebP) và Liên minh Hình ảnh Mở (AOMedia, với sự tham gia của Google, Netflix, Apple, Microsoft…) phát triển. Cả hai đều hỗ trợ nén mất dữ liệu (lossy), nén không mất dữ liệu (lossless), và trong một số trường hợp — nén có độ trong suốt (alpha channel) và hình ảnh động (animation). Chúng được thiết kế để thay thế JPEG và PNG trên web bằng cách giảm đáng kể kích thước tệp mà vẫn giữ chất lượng hình ảnh ở mức chấp nhận được hoặc cao hơn.

WebP ra mắt năm 2010, được hỗ trợ rộng rãi từ Chrome 23 (2013), Firefox 65 (2019), Edge 18 (2019) và Safari 14 (2020). AVIF ra đời muộn hơn (2018), dựa trên codec AV1, đạt hiệu suất nén cao hơn WebP — thường giảm thêm 10–20% kích thước so với WebP ở cùng mức chất lượng — nhưng hỗ trợ trình duyệt chậm hơn: Chrome 85+, Firefox 93+, Edge 92+, Safari 16.4+ (từ tháng 3/2023).

Tại sao quan trọng trong SEO?

Ảnh chiếm trung bình 40–60% dung lượng tải trang theo báo cáo HTTP Archive (2024). Kích thước ảnh lớn làm chậm tốc độ tải, tăng thời gian tương tác đầu tiên (FCP), thời gian hiển thị nội dung chính (LCP) — cả hai đều là chỉ số Core Web Vitals do Google dùng để xếp hạng. Việc chuyển sang WebP hoặc AVIF giúp giảm trung bình:

• WebP: nhỏ hơn JPEG 25–35%, nhỏ hơn PNG 26–34% (theo dữ liệu thử nghiệm chính thức từ Google Developers)
• AVIF: nhỏ hơn WebP 10–20% ở chế độ lossy, nhỏ hơn JPEG tới 40–50% (tùy điều kiện, theo AOMedia và thử nghiệm độc lập của Cloudflare, 2023)

Giảm kích thước ảnh trực tiếp cải thiện điểm LCP, giảm băng thông máy chủ, tiết kiệm chi phí CDN và nâng cao trải nghiệm người dùng — yếu tố gián tiếp nhưng mạnh mẽ ảnh hưởng đến tỷ lệ thoát và thời gian ở lại trang.

Cách hoạt động

Cả WebP và AVIF đều sử dụng kỹ thuật nén dựa trên dự đoán khối (block prediction), biến đổi rời rạc (DCT hoặc lõi AV1 dùng biến đổi không gian tần số linh hoạt hơn), và mã hóa entropy tiên tiến (VP8/VP9 cho WebP; AV1 cho AVIF). Khác biệt chính:

• WebP xây dựng trên nền tảng VP8 video — tận dụng các công cụ như dự đoán hướng, bộ lọc vòng (in-loop filtering) và bảng mã hóa ngữ cảnh (context modeling) để tối ưu ảnh tĩnh.
• AVIF kế thừa toàn bộ kiến trúc AV1: hỗ trợ khối biến đổi linh hoạt (rectangular and non-square transforms), dự đoán nội suy (intra prediction) với 56 hướng (so với ~10 hướng ở WebP), và mã hóa độ sâu màu 10-bit, 12-bit — giúp tái tạo chi tiết bóng mờ, gradient mượt hơn, ít hiện tượng banding.

Cả hai định dạng đều hỗ trợ responsive image qua thuộc tính srcset và <picture>, cho phép trình duyệt chọn tệp phù hợp nhất dựa trên độ phân giải màn hình, mật độ pixel (dpr) và khả năng hỗ trợ định dạng.

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

1. Đánh giá hiện trạng: Dùng PageSpeed Insights hoặc Lighthouse để xác định ảnh chưa tối ưu (thường báo “Serve images in next-gen formats”). Xuất danh sách ảnh PNG/JPEG >100 KB.
2. Chuyển đổi hàng loạt: Dùng công cụ tin cậy như cwebp (WebP), avifenc (AVIF), hoặc thư viện như Sharp (Node.js), Pillow (Python), hoặc plugin CMS (ví dụ: WebP Express cho WordPress).
3. Triển khai HTML đúng cách:

   <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>

   Lưu ý: <source> được đọc từ trên xuống — trình duyệt chọn định dạng đầu tiên nó hỗ trợ.
4. Tối ưu tham số: Với WebP, dùng -q 75-85 cho ảnh lossy cân bằng; với AVIF, --cq-level 20–35 (càng thấp càng chất lượng cao, càng nặng). Tránh -q 100 vì không cải thiện rõ ràng mà tăng kích thước.
5. Kiểm tra hậu triển khai: Kiểm tra console trình duyệt (xem network tab → filter “avif”, “webp”), kiểm tra fallback trên Safari cũ hoặc IE (nếu còn cần hỗ trợ), và đo lại LCP trước/sau.

Lỗi thường gặp

• Không có fallback ảnh JPEG/PNG: Khi dùng <picture> nhưng thiếu thẻ <img> cuối cùng → ảnh không hiển thị trên trình duyệt không hỗ trợ bất kỳ <source> nào. ✅ Cách khắc phục: Luôn đặt <img> làm phần tử cuối, không có type.
• Thiếu thuộc tính width/height cố định: Gây layout shift (CLS cao). ✅ Khắc phục: Ghi rõ width và height (hoặc dùng CSS aspect-ratio nếu hỗ trợ).
• Dùng AVIF cho ảnh nhỏ hoặc biểu tượng: AVIF kém hiệu quả với ảnh dưới 10 KB do overhead header lớn. ✅ Khắc phục: Chỉ dùng AVIF cho ảnh >20 KB; ảnh nhỏ giữ PNG/WebP.
• Server không gửi đúng MIME type: Một số máy chủ gửi AVIF với Content-Type: application/octet-stream → trình duyệt từ chối tải. ✅ Khắc phục: Cấu hình server gửi image/avif và image/webp chính xác (Apache: AddType image/avif .avif; Nginx: types { image/avif avif; }).

Ví dụ thực tế

Một trang sản phẩm thời trang có 8 ảnh JPEG tổng cộng 4,2 MB. Sau khi chuyển sang WebP (chất lượng 82): tổng kích thước giảm còn 1,8 MB (giảm 57%). Tiếp tục thử AVIF (cq-level 25) cho 4 ảnh lớn nhất (>300 KB): giảm thêm 220 KB. Kết quả cuối: tổng dung lượng ảnh còn 1,58 MB — giảm 62% so với gốc. Đo Lighthouse: LCP cải thiện từ 4,2s → 2,1s; điểm Core Web Vitals tăng từ “Cần cải thiện” lên “Tốt”. Lưu lượng thoát giảm 11% sau 3 tuần (theo Google Analytics).

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

WebP và AVIF có hỗ trợ trong suốt và hình ảnh động không?

Có. Cả hai định dạng đều hỗ trợ kênh alpha (trong suốt) ở chế độ lossy và lossless. WebP hỗ trợ hình ảnh động từ phiên bản ban đầu; AVIF cũng hỗ trợ animation từ spec AV1, nhưng trình duyệt hiện tại (Chrome, Firefox, Edge) mới chỉ hỗ trợ ảnh tĩnh — hỗ trợ animation AVIF đang trong quá trình triển khai và chưa ổn định (tùy trường hợp).

Có nên dùng AVIF cho tất cả ảnh ngay bây giờ?

Không nên áp dụng đồng loạt. AVIF chưa được hỗ trợ trên Safari dưới 16.4 (iOS 16.4+, macOS Ventura 13.3+) và một số trình duyệt cũ trên Android. Nếu đối tượng người dùng bao gồm nhiều người dùng iOS 15 trở xuống, hãy ưu tiên WebP làm định dạng chính, AVIF làm lựa chọn thứ cấp trong <picture>. Tỷ lệ hỗ trợ AVIF toàn cầu hiện đạt ~82% (đến tháng 6/2024, theo CanIUse).

Googlebot có thể xử lý WebP và AVIF không?

Có. Googlebot (từ phiên bản Chromium 110 trở lên, triển khai từ quý II/2023) hỗ trợ đầy đủ WebP và AVIF, bao gồm cả việc thu thập, xử lý và hiểu metadata. Không cần gửi phiên bản JPEG riêng cho bot — miễn là có fallback hợp lệ trong HTML, bot sẽ đọc đúng định dạng được hỗ trợ.

Đặc điểm	WebP	AVIF	JPEG	PNG
Hỗ trợ trình duyệt (tỷ lệ toàn cầu, Q2/2024)	98,2%	82,1%	100%	100%
Hỗ trợ trong suốt (alpha)	Có (lossy & lossless)	Có (lossy & lossless)	Không	Có
Hỗ trợ hình ảnh động	Có	Có (spec), nhưng chưa hỗ trợ rộng rãi trên trình duyệt	Không	Không
Độ sâu màu tối đa	8-bit	10-bit / 12-bit	8-bit	8-bit / 16-bit
Thời gian mã hóa (so sánh tương đối)	Nhanh	Chậm hơn WebP 3–5 lần	Nhanh	Trung bình