TL;DR – Thay thế JPEG/PNG bằng AVIF (hoặc WebP khi AVIF không được hỗ trợ) có thể giảm 30‑80 % kích thước hình ảnh, giảm LCP tới 0.5 s, và tăng SEO mà không ảnh hưởng về hình ảnh. Một fallback <picture> đơn giản hoặc quy tắc header Accept sẽ giúp bạn đạt được trong vài phút, và hầu hết các CDN có thể tự động thực hiện.
Tại sao các định dạng hình ảnh “thế hệ mới” lại quan trọng ngay bây giờ
Mỗi mili giây đều quan trọng trên web. Các nghiên cứu từ Akamai và Google cho thấy 100 ms được tiết kiệm tương đương với mức tăng doanh thu 1‑2 % cho các trang thương mại điện tử. Hình ảnh là nguyên nhân gây tốn băng thông lớn nhất trên một trang điển hình – > 60 % tổng byte (HTTP Archive, 2024).
Giới thiệu AVIF và WebP. Cả hai đều hứa hẹn giảm 30‑80 % kích thước tệp so với JPEG/PNG truyền thống trong khi vẫn giữ chất lượng hình ảnh không thể phân biệt bằng mắt người. Lợi ích ngay lập tức:
- Băng thông thấp hơn → gói dữ liệu rẻ hơn cho người dùng di động.
- Tải trang nhanh hơn → Core Web Vitals tốt hơn, xếp hạng Google cao hơn.
- Giảm tải máy chủ → dung lượng cache nhỏ hơn, chi phí CDN rẻ hơn.
Nếu bạn đã tối ưu CSS/JS, nén hình ảnh là việc dễ dàng nhất mang lại ROI lớn nhất.
AVIF vs. WebP – so sánh nhanh
| Tính năng | AVIF | WebP |
|---|---|---|
| Nguồn gốc | Dựa trên AV1 (ISO/IEC 23000‑22, 2020) | Định dạng dựa trên VP8 của Google (2010) |
| Nén | Mất dữ liệu & không mất dữ liệu (cả dựa trên AV1), alpha, HDR (10‑bit) | Mất dữ liệu (VP8), không mất dữ liệu, alpha, hoạt hình |
| Độ sâu bit | 8‑bit & 10‑bit (HDR) | Chỉ 8‑bit |
| Giảm kích thước so với JPEG (trung bình) | Nhỏ hơn 45‑65 % (mất dữ liệu) | Nhỏ hơn 25‑35 % (mất dữ liệu) |
| Giảm kích thước so với PNG (trung bình) | Nhỏ hơn 50‑70 % (không mất dữ liệu) | Nhỏ hơn 30‑45 % (không mất dữ liệu) |
| Giải mã phần cứng | Hỗ trợ GPU ngày càng tăng (Intel Xe, AMD, ARM Mali) | Bản địa trên hầu hết CPU/GPU; tăng tốc phần cứng trên Android, Chrome, Safari iOS 16+ |
| Hoạt hình | AVIF‑A (thử nghiệm) | WebP‑A (ổn định, được sử dụng rộng rãi) |
| Phạm vi hỗ trợ trình duyệt (Tháng 4 2026) | Chrome 85+, Edge 85+, Firefox 93+, Safari 16.4+, Android WebView 85+ | Chrome 23+, Edge 18+, Firefox 65+, Safari 14+, Android WebView 23+ |
Kết luận: AVIF thắng về mức nén thô và hỗ trợ HDR, trong khi WebP có phạm vi hỗ trợ legacy rộng nhất và hệ sinh thái hoạt hình đã trưởng thành. Cách thực tế là phục vụ AVIF trước, fallback sang WebP, rồi đến JPEG/PNG cho một số ít ngoại lệ.
Hỗ trợ trình duyệt & chiến lược fallback bạn có thể sao chép
1. Mẫu <picture> (đàm phán phía client)
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="Hình ảnh hero của một bình minh trên thành phố" loading="lazy" width="1200" height="800">
</picture>
Trình duyệt sẽ chọn định dạng đầu tiên mà nó hiểu; các trình duyệt cũ sẽ bỏ qua các thẻ <source> và tải fallback JPEG.
2. Đàm phán header Accept phía máy chủ (cho một URL duy nhất)
# Nginx example
map $http_accept $image_ext {
default ".jpg";
"~*image/avif" ".avif";
"~*image/webp" ".webp";
}
location /images/hero {
try_files $uri$image_ext =404;
}
Nếu client quảng cáo image/avif, Nginx sẽ phục vụ hero.avif; nếu không sẽ fallback sang WebP hoặc JPEG.
3. Để CDN thực hiện công việc nặng
Hầu hết các nhà cung cấp edge (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) có tùy chọn tự động chuyển đổi JPEG/PNG đã tải lên sang AVIF/WebP dựa trên header Accept. Bật tính năng này, xóa cache, và bạn đã xong.
Công cụ & quy trình – đưa AVIF/WebP vào pipeline xây dựng của bạn
| Nhiệm vụ | AVIF command | WebP command |
|---|---|---|
| Mã hoá không mất dữ liệu | avifenc -l -q 0 input.png output.avif | cwebp -lossless input.png -o output.webp |
| Mã hoá mất dữ liệu (chất lượng 50) | avifenc -q 50 input.jpg output.avif | cwebp -q 50 input.jpg -o output.webp |
| Chuyển đổi hàng loạt (Node) | sharp('src/**/*.png').avif({quality:50}).toFile('dist/') | sharp('src/**/*.png').webp({quality:50}).toFile('dist/') |
| Chuyển đổi hoạt hình | avifenc --animation frames/*.png output.avif (still experimental) | gif2webp animation.gif -o animation.webp |
Dòng lệnh một dòng cho hầu hết các pipeline CI
# Convert every PNG in assets/ to AVIF with 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;
Mẹo: Giữ nguyên nguồn ảnh độ phân giải cao trong repo; tạo AVIF/WebP ngay trong bước build. Như vậy bạn có thể chạy lại với thiết lập chất lượng khác mà không cần tải lại tài nguyên.
Tác động thực tế – các con số quan trọng
| Kịch bản | JPEG (cơ sở) | WebP (mất dữ liệu) | AVIF (mất dữ liệu) | AVIF (không mất dữ liệu) |
|---|---|---|---|---|
| Ảnh 1 MP, chất lượng 90 % | 120 KB | 78 KB (‑35 %) | 55 KB (‑55 %) | 68 KB (‑43 %) |
| Logo trong suốt (500 × 500) | 45 KB (PNG) | 28 KB (‑38 %) | 22 KB (‑51 %) | 24 KB (‑47 %) |
| Banner hoạt hình 5 s (10 fps) | 1.2 MB (GIF) | 380 KB (‑68 %) | 340 KB (‑72 %) | – |
Nguồn: Kiểm tra WebPageTest + Lighthouse (2024‑2025) trên một trang bán lẻ đã thực hiện A/B test trong 4 tuần. Phiên bản AVIF mang lại LCP nhanh hơn 0.4 s và tăng 12 % chuyển đổi trên di động.
Các nghiên cứu trường hợp bạn có thể trích dẫn
- Các thương gia Shopify (2025) – AVIF cho ảnh thu nhỏ sản phẩm giảm trọng lượng trang 38 % và rút ngắn LCP 0.3 s trên 3G.
- The New York Times – Chuyển ảnh trong bài viết sang AVIF, tiết kiệm 45 % băng thông và tăng 12 % tương tác trên di động.
- Airbnb – Ảnh hồ sơ host được phục vụ dưới dạng AVIF trên các trình duyệt hỗ trợ, mang lại lần vẽ đầu tiên nhanh hơn 0.4 s trên mạng chậm.
Những việc cần làm tiếp theo – danh sách kiểm tra nhanh
- Kiểm tra tải hình ảnh hiện tại – Lighthouse “Serve images in next‑gen formats”.
- Thêm bước build xuất AVIF (và WebP làm fallback) bằng
sharphoặcavifenc. - Cập nhật HTML với khối
<picture>hoặc bật đàm phánAcceptphía máy chủ. - Đặt header cache lâu dài (
Cache‑Control: max-age=31536000, immutable). - Bật lazy‑loading (
loading="lazy"hoặc IntersectionObserver) để tránh giải mã AVIF ngoài màn hình. - Bật chuyển đổi edge CDN nếu bạn không muốn lưu AVIF cục bộ.
- Giám sát Core Web Vitals – bạn sẽ thấy LCP giảm 0.2‑0.5 s trong vòng một tuần sau khi triển khai.
Nhìn về tương lai: Đến năm 2028 IDC dự đoán > 80 % hình ảnh web sẽ ưu tiên AVIF, nhờ hỗ trợ HDR và header “image format negotiation” sắp ra mắt trong Chrome 130+. Đầu tư sớm không chỉ cải thiện hiệu năng hiện tại mà còn chuẩn bị cho trang web của bạn trước làn sóng trải nghiệm hình ảnh mới.
Tags: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp