Tối ưu hoá hình ảnh web bằng AVIF và WebP
8 tháng 6, 2026
Giới thiệu
Trong thời đại web hiện đại, hình ảnh chiếm tỷ lệ đáng kể trong tổng dung lượng của một trang. Việc giảm kích thước ảnh mà không làm giảm chất lượng trực tiếp ảnh hưởng đến tốc độ tải trang, trải nghiệm người dùng và thứ hạng SEO. Hai định dạng hình ảnh hiện đại AVIF và WebP đang trở thành lựa chọn hàng đầu nhờ khả năng nén siêu tốt và hỗ trợ rộng rãi trên các trình duyệt hiện nay.
Tại sao chọn AVIF và WebP?
AVIF (AV1 Image File Format) dựa trên codec video AV1, cung cấp tỷ lệ nén tốt hơn JPEG khoảng 50% ở chất lượng tương đương. WebP, phát triển bởi Google, cũng vượt trội so với JPEG và PNG trong nhiều trường hợp, đặc biệt là hình ảnh có màu sắc phong phú và độ trong suốt. Cả hai đều hỗ trợ nén mất dữ liệu và không mất dữ liệu, cho phép nhà phát triển linh hoạt tối ưu dựa trên nhu cầu.
So sánh định dạng AVIF vs WebP
| Tiêu chí | AVIF | WebP |
|---|---|---|
| Tỷ lệ nén trung bình | 30‑50% tốt hơn JPEG | 20‑30% tốt hơn JPEG |
| Hỗ trợ độ trong suốt | Có | Có |
| Hỗ trợ ảnh động | Có (AVIF animation) | Có (WebP animation) |
| Độ trễ mã hóa | Cao hơn do phức tạp codec | Thấp hơn, mã hóa nhanh |
| Hỗ trợ trình duyệt | Chrome, Firefox, Edge, Safari (từ phiên bản 16) | Chrome, Firefox, Edge, Safari, Opera |
Trong thực tế, AVIF thường cho kết quả nén tốt hơn khi dung lượng là ưu tiên hàng đầu, trong khi WebP được ưa chuộng khi cần tốc độ mã hóa nhanh và tương thích rộng hơn.
Nguyên lý nén của AVIF và WebP
AVIF sử dụng các kỹ thuật biến đổi dự báo intra‑frame từ AV1, kết hợp với biến đổi cosine离散 và các bộ lọc tự thích ứng để loại bỏ redundancy. WebP áp dụng biến đổi dự báo dựa trên khối và biến đổi Walsh‑Hadamard, cùng với entropy coding dạng aritmetic. Cả hai đều cho phép điều chỉnh mức chất lượng qua tham số quantizer, từ 0 (lossless) đến 63 (lossy) tùy theo định dạng.
Công cụ chuyển đổi ảnh
- ffmpeg: lệnh chuyển đổi đơn giản
ffmpeg -i input.png -c:v avif -q:v 30 output.avif ffmpeg -i input.jpg -c:v webp -q:v 80 output.webp - ImageMagick: hỗ trợ qua plugin
magick input.tif -define webp:lossless=true output.webp magick input.bmp -define avif:lossless=false -quality 40 output.avif - libavif và libwebp: thư viện C có thể tích hợp vào build pipeline.
- Squoosh: ứng dụng web của Google cho phép thử nghiệm trực quan và tải xuống kết quả.
- Sharp (Node.js): phổ biến trong các dự án frontend
const sharp = require('sharp'); sharp('input.png') .avif({ quality: 50 }) .toFile('output.avif');
Ví dụ sử dụng trong HTML với và srcset
Để trải nghiệm tốt nhất trên tất cả trình duyệt, chúng ta có thể kết hợp
<picture>
<source type='image/avif' srcset='image.avif' />
<source type='image/webp' srcset='image.webp' />
<img src='image.jpg' alt='Mô tả hình ảnh' loading='lazy' />
</picture>
Thuộc tính loading='lazy' giúp trì hoãn tải ảnh cho tới khi nó gần vào viewport, cải thiện thời gian tải First Contentful Paint (FCP).
Tích hợp vào build process (Webpack, Gulp, npm scripts)
Trong dự án sử dụng Webpack, chúng ta có thể thêm règle cho file ảnh:
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|tiff|bmp)$/i,
use: [
{
loader: 'responsive-loader',
options: {
adapter: require('responsive-loader/sharp'),
formats: ['avif', 'webp'],
quality: [50, 80],
name: '[name]_[hash].[ext]',
},
},
],
},
],
},
};
Với Gulp, một task đơn giản:
const gulp = require('gulp');
const avif = require('gulp-avif');
const webp = require('gulp-webp');
gulp.task('images', () => {
return gulp.src('src/images/**/*.{png,jpg,tiff}')
.pipe(avif({ quality: 50 }))
.pipe(gulp.dest('dist/images'))
.pipe(webp({ quality: 80 }))
.pipe(gulp.dest('dist/images'));
});
Hiệu năng trên các trình duyệt và fallback
Các trình duyệt hiện đại như Chrome 85+, Firefox 65+, Edge 85+, Safari 16+ đều hỗ trợ AVIF. WebP được hỗ trợ từ phiên bản cũ hơn (Chrome 23+, Firefox 65+, Edge 18+, Safari 14+). Để đảm bảo khả năng truy cập trên những trình duyệt cũ, chúng ta luôn đặt thẻ với nguồn JPEG/PNG làm fallback, như trong ví dụ
Những lưu ý khi sử dụng
- Chất lượng: Giá trị quality quá thấp có thể gây ra hiện tượng artifacts, đặc biệt là trong ảnh có đoạn văn bản hoặc đường nét sắc.
- Thời gian mã hóa: AVIF cần thời gian xử lý lâu hơn, không thích hợp cho việc tạo ảnh trên-the-fly mà không có cache.
- Dung lượng bộ nhớ: Các thư viện giải mã AVIF có thể tiêu tốn nhiều RAM hơn khi xử lý ảnh lớn.
- Giấy phép: AVIF dựa trên AV1, được phát hành dưới giấy phép mở royalty-free, tương tự WebP.
- Kiểm tra: Luôn kiểm tra ảnh đầu ra trên nhiều thiết bị và kích thước màn hình để đảm bảo không mất chi tiết quan trọng.
Case study: tối ưu trang blog
Một trang blog có 50 hình ảnh trung bình 800 KB mỗi ảnh (JPEG). Sau khi chuyển sang AVIF với quality 45 và WebP với quality 75, dung lượng trung bình giảm xuống 200 KB (AVIF) và 350 KB (WebP). Tổng dung lượng trang giảm từ 40 MB xuống khoảng 10 MB, thời gian tảiFirst Contentful Paint giảm từ 3,2 giây xuống 1,1 giây trên kết nối 3G. Điểm Lighthouse trong phần Performance tăng từ 68 lên 92.
Meilleures pratiques (best practices)
- Luôn cung cấp fallback dưới dạng JPEG hoặc PNG cho trình duyệt không hỗ trợ.
- Sử dụng CDN để lưu trữ và доставка ảnh dưới dạng đã nén, tận dụng khả năng nén ở mức edge.
- Tối ưu theo breakpoint: tạo nhiều phiên bản ảnh với độ rộng khác nhau và sử dụng atribut srcset để trình duyệt chọn phù hợp.
- Giảm kích thước không cần lệch: cắt ảnh theo kích thước hiển thị thực tế trước khi nén.
- Giám sát hiệu năng: sử dụng công cụ như WebPageTest hoặc Lighthouse để theo dõi thay đổi sau khi áp dụng định dạng mới.
Kết luận
AVIF và WebP mang lại lợi ích rõ rệt về giảm dung lượng băng thông và cải thiện tốc độ tải trang, đồng thời vẫn giữ được chất lượng hình ảnh tốt. Việc lựa chọn giữa hai định dạng phụ thuộc vào ưu tiên cụ thể của dự án: nếu cần nén tối đa và có thể chấp nhận thời gian mã hóa lâu hơn, AVIF là lựa chọn idéal; nếu cần sự linh hoạt, tốc độ xử lý nhanh và tương thích rộng hơn, WebP là sự lựa chọn an toàn. Bằng cách tích hợp chúng vào quy trình phát triển và sử dụng kỹ thuật