WebP và AVIF là 2 format ảnh thế hệ mới thay thế JPG và PNG. Bài so sánh 8 khía cạnh — tỷ lệ nén, hỗ trợ trình duyệt 2026, tốc độ mã hoá — và hướng dẫn chọn format phù hợp cho shop WordPress VN.
WebP và AVIF là gì
WebP là format ảnh do Google phát hành năm 2010, dựa trên codec video VP8. Mục tiêu ban đầu là thay thế JPG, PNG và GIF trong một format duy nhất.
AVIF ra đời năm 2019, dựa codec AV1 — do liên minh AOMedia phát triển. AVIF nén hiệu quả hơn WebP nhưng đòi hỏi CPU nhiều hơn khi mã hoá.
WebP — chuẩn Google từ 2010
WebP hỗ trợ lossy (dành cho ảnh sản phẩm, hero) và lossless (dành cho logo, icon, screenshot). Tỷ lệ nén giảm 25–35% so với JPG cùng chất lượng theo tài liệu chính thức của Google.
Trình duyệt hỗ trợ ~96% toàn cầu năm 2026. WordPress 5.8+ tích hợp WebP native, không cần plugin chuyển đổi.
WebP — 2 chế độ nén
Chế độ lossy dựa trên VP8 phù hợp cho ảnh chụp, sản phẩm, hero. Chế độ lossless giữ nguyên pixel — phù hợp logo, icon, màu phẳng.
Animation WebP thay thế GIF với kích thước nhỏ hơn đáng kể. Transparency (alpha channel) được hỗ trợ ở cả 2 chế độ.
AVIF — royalty-free từ AOMedia
AVIF nén mạnh hơn WebP 30–50% ở cùng chất lượng hình ảnh. Đổi lại, thời gian mã hoá chậm hơn 5–10 lần và giải mã tốn CPU hơn trên thiết bị di động phổ thông.
Trình duyệt hỗ trợ ~92% toàn cầu năm 2026. WordPress 6.5+ tích hợp AVIF native từ tháng 4/2024.
AVIF — ưu và nhược điểm thực tế
AVIF nén vượt trội và giữ chất lượng ảnh ở bitrate thấp tốt hơn — đặc biệt cho phong cảnh và chân dung chi tiết cao.
Nhược điểm: mã hoá AVIF tốn CPU server nhiều. Batch convert toàn bộ thư viện ảnh cùng lúc có thể gây quá tải trên hosting share.
Bảng so sánh WebP vs AVIF
Hai format có điểm mạnh khác nhau tuỳ use case. Bảng dưới tóm tắt 8 tiêu chí để chọn đúng format.
8 tiêu chí so sánh
| Khía cạnh | WebP | AVIF |
|---|---|---|
| Năm phát hành | 2010 (Google) | 2019 (AOMedia) |
| Codec nền | VP8/VP9 | AV1 |
| Nén so với JPG | −25% đến −35% | −40% đến −60% |
| Nén so với PNG | −26% (lossless) | −50% (lossless) |
| Hỗ trợ trình duyệt 2026 | ~96% toàn cầu | ~92% toàn cầu |
| Tốc độ mã hoá | Nhanh (chuẩn 1x) | Chậm (5–10x) |
| Chi phí giải mã CPU | Thấp | Trung bình–Cao |
| Hỗ trợ animation | Có (thay GIF) | Có |
Hỗ trợ trình duyệt — chi tiết 2026
WebP: Chrome 32+, Firefox 65+, Safari 14+, Edge 18+. IE11 không hỗ trợ — nhưng IE11 đã retired và không còn là vấn đề thực tế.
AVIF: Chrome 85+, Firefox 93+, Safari 16+, Edge 121+. Safari bắt đầu hỗ trợ AVIF từ iOS 16/macOS Ventura — phủ gần hết người dùng Apple hiện tại.
Tốc độ mã hoá và giải mã — thực tế trên server
Mã hoá WebP với libwebp nhanh và nhẹ — phù hợp batch convert real-time khi upload. Mã hoá AVIF với libaom chậm hơn nhiều, nhưng các encoder mới (svt-av1, rav1e) đang cải thiện tốc độ đáng kể.
Giải mã: cả hai đều nhanh trên CPU modern. Thiết bị di động phổ thông tầm trung (Snapdragon 680, Helio G85) giải mã AVIF tốn nhiều điện hơn WebP rõ rệt.
So sánh tỷ lệ nén thực tế
Số liệu đo trên ảnh 1920×1080 điển hình với cùng chất lượng hình ảnh chủ quan. AVIF nén mạnh hơn nhất quán ở mọi loại ảnh.
Bảng đo kích thước theo 4 loại ảnh
| Loại ảnh | JPG q80 | WebP q80 | AVIF q60 |
|---|---|---|---|
| Ảnh hero phong cảnh | 320 KB | 210 KB (−34%) | 140 KB (−56%) |
| Ảnh sản phẩm nền trắng | 180 KB | 110 KB (−39%) | 72 KB (−60%) |
| Ảnh chụp màn hình UI | 240 KB | 140 KB (−42%) | 95 KB (−60%) |
| Minh hoạ màu phẳng | 140 KB | 62 KB (−56%) | 40 KB (−71%) |
AVIF chiến thắng nhất quán, giảm 50–70% so với JPG. WebP giảm 30–45%.
Cả hai đều vượt trội so với JPG/PNG rõ ràng. Không cần tranh luận về điều này.
Khi nào % nén thực tế thấp hơn kỳ vọng
Ảnh đã nén sẵn (JPG quality dưới 60) thì re-nén sang WebP/AVIF tiết kiệm ít hơn. Ảnh có nhiều noise (ISO cao, chụp tối) cũng nén kém hiệu quả hơn ảnh sáng, phẳng.
Để đánh giá chính xác, nên convert batch 20–30 ảnh đại diện và đo file size thực tế trước khi quyết định workflow.
Chọn format nào cho shop WordPress VN
Không có format thắng tuyệt đối — tuỳ use case. Bảng dưới là hướng dẫn thực tế cho shop VN năm 2026.
| Use case | Format | Lý do |
|---|---|---|
| Ảnh hero trang chủ | AVIF + WebP dự phòng | Nén mạnh, ảnh lớn tác động LCP trực tiếp |
| Ảnh sản phẩm shop | WebP (đủ) | Mã hoá nhanh, hỗ trợ trình duyệt cao |
| Logo + icon trong suốt | WebP lossless | Thay PNG, giảm kích thước đáng kể |
| Banner animation | WebP animation | Thay GIF, giảm dung lượng rõ rệt |
| Lưới thumbnail nhiều ảnh | WebP | Mã hoá batch nhanh, giải mã ổn trên di động phổ thông |
| Portfolio studio ảnh cao cấp | AVIF | Giữ chất lượng tối đa với file nhỏ |
Hướng dẫn thực tế — bắt đầu từ đâu
WebP đủ cho phần lớn trường hợp của shop thương mại điện tử. AVIF chỉ đáng đầu tư khi ảnh hero vượt 200 KB và LCP đang cần cải thiện.
Mã hoá AVIF tốn CPU server — không bật batch convert toàn bộ thư viện cùng lúc trên hosting share.
Fallback với element picture
Dùng <picture> để hỗ trợ cả 3 cấp độ trình duyệt. Trình duyệt chọn format đầu tiên nó hỗ trợ.
<picture>
<source type="image/avif" srcset="/hero.avif">
<source type="image/webp" srcset="/hero.webp">
<img src="/hero.jpg" alt="Hero" width="1920" height="1080">
</picture>Kết hợp với lazy load và srcset
Format ảnh chỉ là một phần của bộ tối ưu. Kết hợp WebP/AVIF với lazy load và srcset để tối ưu băng thông toàn diện.
Image CDN như Cloudflare Polish tự động chọn format phù hợp cho từng trình duyệt — không cần tạo file thủ công. Xem chi tiết tại bài Image CDN.
Bật WebP và AVIF trong WordPress
WordPress 5.8+ hỗ trợ WebP native. WordPress 6.5+ hỗ trợ thêm AVIF từ tháng 4/2024.
Plugin convert phổ biến
- ShortPixel: hỗ trợ cả WebP và AVIF, mã hoá chất lượng cao, gói từ $9,99/tháng.
- Imagify: miễn phí đến 200 MB/tháng, hỗ trợ WebP và AVIF.
- Smush: miễn phí, hỗ trợ WebP, chưa có AVIF ở bản miễn phí.
Cloudflare Polish — convert on-the-fly
Cloudflare Polish (gói Pro, $20/tháng) convert ảnh khi phân phối — không cần plugin WordPress, không lưu file phụ. Tự động serve AVIF cho Chrome, WebP cho Safari, JPG fallback.
Xem hướng dẫn cấu hình chi tiết tại bài Image CDN — tự động tối ưu và phân phối.
Verify format đang được serve
Mở Chrome DevTools → tab Network → chọn một ảnh → xem “Content-Type” trong phần Headers. Nếu thấy image/webp hoặc image/avif là đã hoạt động.
Có thể test thêm qua curl -I -H "Accept: image/webp" https://yoursite.com/image.jpg để xem CDN có serve WebP không.
Bài liên quan
Tối ưu ảnh gắn liền với nhiều kỹ thuật khác trong cùng nhóm. Đọc thêm để có kiến thức đầy đủ.
- Lazy load image — kỹ thuật tải trễ 2026
- Responsive image — viết srcset đúng kích thước
- Image CDN — tự động tối ưu và phân phối
- LCP — đo và tối ưu thời gian hiển thị
- Core Web Vitals 2026 — tổng quan 3 chỉ số
Câu hỏi thường gặp
WordPress 6.5+ có hỗ trợ AVIF upload native không?
Có. WordPress 6.5+ hỗ trợ AVIF từ tháng 4/2024.
Plugin ShortPixel và Imagify tự động convert khi upload.
Lưu ý: mã hoá AVIF tốn CPU, có thể gây quá tải trên hosting share. Test với 10–20 ảnh trước khi chạy bulk.
Trình duyệt cũ không hỗ trợ AVIF — xử lý thế nào?
Dùng element <picture> với nhiều source theo thứ tự: AVIF trước, WebP dự phòng, JPG cuối. Trình duyệt chọn format đầu tiên nó hỗ trợ.
Plugin ShortPixel và Imagify tự động tạo markup <picture> khi serve ảnh.
Plugin nào chuyển đổi ảnh WebP/AVIF tốt nhất?
Tuỳ nhu cầu cụ thể:
- ShortPixel: mã hoá chất lượng cao, hỗ trợ cả WebP và AVIF.
- Imagify: miễn phí đến 200 MB/tháng, giao diện đơn giản.
- Smush: miễn phí, hỗ trợ WebP, phù hợp shop nhỏ mới bắt đầu.
- Cloudflare Polish: convert on-the-fly, không cần lưu file phụ.
Chạy bulk convert toàn bộ thư viện ảnh cũ — làm thế nào?
Plugin ShortPixel và Imagify có chế độ “Bulk Optimize” — chạy hàng đợi nền, khoảng 50–200 ảnh/giờ. Tránh chạy giờ cao điểm vì tốn CPU server.
Backup cơ sở dữ liệu và thư mục media trước khi bulk convert để an toàn.
AVIF và WebP có ảnh hưởng SEO hình ảnh không?
Tích cực — ảnh nhỏ hơn giảm LCP, LCP là chỉ số xếp hạng trong Core Web Vitals. Google Image Search vẫn index ảnh WebP và AVIF bình thường.
Đảm bảo giữ nguyên URL ảnh gốc hoặc redirect đúng nếu đổi đường dẫn sau convert.
Cần hỗ trợ tối ưu ảnh toàn diện cho site WordPress? Web22 cung cấp dịch vụ tối ưu Core Web Vitals — bao gồm audit ảnh, convert format và cấu hình CDN.
