20 tháng 12, 2025 · 8 phút đọc

Tối ưu hình ảnh cho web: AVIF, WebP và chiến lược lazy loading

Format hình ảnh hiện đại, responsive images, lazy loading và blur placeholder — tất cả để giảm payload mà không hy sinh visual quality.

Hình ảnh chiếm trung bình 50-60% total page weight. Optimize hình ảnh đúng cách là ROI cao nhất trong web performance — không cần refactor code, chỉ cần serve đúng format, đúng size, đúng lúc.

AVIF và WebP: lựa chọn nào?

AVIF (AOMedia Video 1) là format mới nhất, nhỏ hơn WebP 20-50% ở cùng quality. Browser support đã đủ rộng (Chrome, Firefox, Edge, Safari 16+). Nhược điểm: encode chậm hơn WebP đáng kể — cần pre-generate ở build time, không phải on-the-fly.

WebP vẫn là safe default với browser support gần universal. Strategy thực tế: serve AVIF với <picture> fallback WebP, cuối cùng fallback JPEG/PNG. Next.js Image component làm điều này tự động.

Photography equipment on wooden desk — AVIF giảm file size đáng kể so với JPEG tại cùng visual quality

Responsive Images với srcset

Một ảnh 2000px wide không nên serve cho mobile 375px. srcset + sizes attribute cho phép browser chọn size phù hợp. Next.js Image tự động generate srcset. Nếu dùng <img> thuần, cần generate multiple sizes ở build time hoặc dùng image CDN.

Lazy Loading và Intersection Observer

loading='lazy' attribute là đủ cho hầu hết cases — browsers implement lazy loading native và hiệu quả hơn JavaScript solutions. Với images above the fold (LCP candidate), dùng loading='eager' và fetchpriority='high' để prioritize.

Blur Placeholder

Blur placeholder giảm layout shift và cải thiện perceived performance. Generate placeholder image nhỏ (10-20px) tại build time, encode thành base64, dùng làm background trong khi load full image. Next.js có built-in support với placeholder='blur'.