Kể từ khi Google áp dụng Mobile-First Indexing toàn diện, ảnh không được tối ưu cho mobile là yếu tố kéo tuột thứ hạng nghiêm trọng nhất. Ảnh responsive — với srcset, sizes, và thẻ picture — không chỉ cải thiện UX mà còn trực tiếp ảnh hưởng đến Core Web Vitals và thứ hạng tìm kiếm.
Theo dữ liệu HTTP Archive 2026, 78% lưu lượng web đến từ mobile. Ảnh chiếm trung bình 58% tổng dung lượng trang. Sử dụng ảnh responsive đúng cách có thể giảm 40–65% dung lượng ảnh trên thiết bị di động.
1. Thuộc Tính srcset — Cung Cấp Nhiều Phiên Bản Ảnh
Thuộc tính srcset cho phép bạn khai báo nhiều phiên bản của cùng một ảnh với độ phân giải khác nhau. Trình duyệt tự động chọn phiên bản phù hợp nhất dựa trên kích thước màn hình và mật độ điểm ảnh (DPR).
- ▸srcset với descriptor w (width): `srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"`
- ▸srcset với descriptor x (DPR): `srcset="image.jpg 1x, image@2x.jpg 2x"` — phù hợp cho logo/icon
- ▸Trình duyệt tự chọn: Chrome và Safari chọn ảnh tốt nhất dựa trên `sizes` và DPR thực tế
- ▸Ảnh không có srcset: trình duyệt luôn tải file lớn nhất, lãng phí bandwidth mobile
Tạo 3–4 phiên bản kích thước cho mỗi ảnh nội dung: 400w, 800w, 1200w, 1600w. Với ảnh thumbnail nhỏ (dưới 200px), một phiên bản là đủ.
2. Thuộc Tính sizes — Nói Cho Trình Duyệt Biết Kích Thước Hiển Thị
srcset khai báo các ảnh có sẵn, còn sizes nói với trình duyệt ảnh sẽ được hiển thị rộng bao nhiêu trên màn hình. Đây là thông tin quyết định để trình duyệt chọn đúng ảnh trước khi CSS được parse.
- ▸Cú pháp: `sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"`
- ▸Đọc từ trái sang phải: dùng giá trị đầu tiên khớp với viewport hiện tại
- ▸Không có sizes: trình duyệt giả định ảnh rộng 100vw → luôn tải ảnh to nhất
- ▸Sai sizes: gây tải ảnh không phù hợp, lãng phí hoặc ảnh mờ
3. Thẻ <picture> — Kiểm Soát Định Dạng Theo Trình Duyệt
Thẻ `<picture>` cho phép phục vụ định dạng ảnh khác nhau tùy theo khả năng hỗ trợ của trình duyệt. Đây là cách chuẩn để cung cấp WebP/AVIF cho trình duyệt hỗ trợ, đồng thời fallback sang JPEG/PNG cho trình duyệt cũ.
- ▸`<source type="image/avif" srcset="img.avif">` — AVIF: nhỏ hơn WebP 20–30%, Chrome/Firefox mới nhất
- ▸`<source type="image/webp" srcset="img.webp">` — WebP: hỗ trợ 95%+ trình duyệt 2026
- ▸`<img src="img.jpg" alt="...">` — Fallback JPEG/PNG cho trình duyệt không hỗ trợ
- ▸Kết hợp với srcset trong mỗi source để responsive + next-gen format cùng lúc
4. Ảnh Responsive Và Core Web Vitals
LCP (Largest Contentful Paint) — thường là ảnh hero hoặc banner — là metric quan trọng nhất của Core Web Vitals. Ảnh responsive trực tiếp cải thiện LCP bằng cách giảm kích thước file cần tải.
- ▸LCP mục tiêu: dưới 2.5 giây — ảnh responsive giúp đạt mục tiêu này trên mobile
- ▸Preload ảnh LCP: `<link rel="preload" as="image" imagesrcset="..." imagesizes="...">` — tải song song với HTML
- ▸fetchpriority="high" trên ảnh LCP để trình duyệt ưu tiên tải sớm
- ▸Không đặt loading="lazy" trên ảnh above-the-fold — gây LCP penalty
Trong Next.js và Nuxt, dùng component Image tích hợp sẵn — nó tự động tạo srcset, chuyển WebP, thêm lazy loading và placeholder. Bạn không cần viết srcset thủ công.
5. SEO Mobile-First Và Ảnh Responsive
Google crawl bằng Googlebot Smartphone. Ảnh mà bot mobile không tải được (vì URL chặn, thiếu, hoặc quá lớn) sẽ bị bỏ qua trong quá trình index. Ảnh responsive giúp đảm bảo tất cả phiên bản đều có thể crawl và index được.