Image srcset

Image srcset là gì?

Image srcset là thuộc tính HTML dùng trong thẻ <img> để cung cấp nhiều phiên bản hình ảnh với kích thước hoặc độ phân giải khác nhau. Trình duyệt sẽ tự chọn phiên bản phù hợp nhất dựa trên điều kiện thực tế như chiều rộng màn hình, tỷ lệ điểm ảnh (device pixel ratio), băng thông mạng và cài đặt người dùng.

Thuộc tính này luôn đi kèm với src (hình ảnh mặc định) và thường kết hợp với sizes để mô tả cách hình ảnh sẽ được hiển thị trên các khung nhìn khác nhau.

Tại sao quan trọng trong SEO?

Image srcset không trực tiếp ảnh hưởng đến thứ hạng từ khóa, nhưng lại tác động mạnh đến các yếu tố xếp hạng trải nghiệm người dùng — một phần thiết yếu trong thuật toán Google Core Web Vitals và Page Experience.

• Tăng tốc độ tải trang: Trình duyệt chỉ tải hình ảnh vừa đủ — không quá lớn (giảm KB gửi về), không quá nhỏ (tránh kéo giãn). Điều này cải thiện chỉ số LCP (Largest Contentful Paint).
• Giảm bounce rate: Trang tải nhanh hơn → người dùng ở lại lâu hơn, tương tác nhiều hơn — tín hiệu gián tiếp tích cực với SEO.
• Hỗ trợ thiết bị đa dạng: Đảm bảo hình ảnh sắc nét trên điện thoại, tablet, laptop và màn hình Retina — nâng cao độ tin cậy thương hiệu.
• Tối ưu hóa băng thông: Giúp giảm chi phí lưu lượng cho cả người dùng và chủ website, đặc biệt quan trọng với trang có hàng chục hình ảnh.

Google xác nhận rằng tốc độ trang là yếu tố xếp hạng trên di động từ năm 2018, và hình ảnh chiếm trung bình 40–60% dung lượng trang web — do đó, việc kiểm soát hình ảnh qua srcset là bước tối ưu bắt buộc.

Cách hoạt động

Khi trình duyệt đọc thẻ <img> có srcset, nó thực hiện 3 bước chính:

1. Phân tích môi trường: Xác định chiều rộng khung nhìn (viewport width), device pixel ratio (ví dụ: 1x, 2x, 3x), khả năng hỗ trợ định dạng (WebP, AVIF), và đôi khi là tín hiệu mạng (nếu bật Save-Data).
2. So sánh với danh sách srcset: Mỗi giá trị trong srcset gồm đường dẫn ảnh + mô tả (ví dụ: image-400w.jpg 400w hoặc image-2x.jpg 2x). Trình duyệt chọn ảnh phù hợp nhất theo tiêu chí ưu tiên: độ phân giải > kích thước > định dạng.
3. Tải và hiển thị: Chỉ tải một ảnh duy nhất — không phải tất cả — rồi render ngay lập tức.

Lưu ý: Nếu không có sizes, trình duyệt giả định hình ảnh chiếm 100% chiều rộng viewport — điều này có thể gây chọn sai ảnh nếu hình ảnh thực tế chỉ chiếm 50% màn hình.

Hướng dẫn thực hiện

Dưới đây là các bước triển khai srcset đúng kỹ thuật:

1. Chuẩn bị ảnh: Tạo ít nhất 3 phiên bản: nhỏ (400–600px), trung bình (800–1200px), lớn (1600–2400px). Dùng công cụ như Squoosh, ImageMagick hoặc plugin WordPress (Smush, ShortPixel).
2. Đặt tên rõ ràng: Gắn đuôi kích thước hoặc độ phân giải (ví dụ: banner-800w.jpg, banner-2x.jpg) để dễ quản lý.
3. Viết thẻ img chuẩn:

<img src="banner-800w.jpg" srcset="banner-400w.jpg 400w, banner-800w.jpg 800w, banner-1200w.jpg 1200w, banner-2x.jpg 2x" sizes="(max-width: 768px) 100vw, 50vw" alt="Banner khuyến mãi tháng 10" width="1200" height="400" >

4. Kiểm tra bằng DevTools: Mở tab Network → Filter “Img” → Thay đổi kích thước cửa sổ → xác minh chỉ 1 ảnh được tải mỗi lần.
5. Test trên thiết bị thật: Dùng Chrome DevTools → Toggle Device Toolbar → chọn iPhone 14 Pro (2x) hoặc Pixel 7 (3x) để kiểm tra ảnh 2x/3x có xuất hiện.

Lỗi thường gặp

Lỗi	Dấu hiệu	Cách khắc phục
Thiếu thuộc tính sizes khi dùng w descriptor	Trình duyệt bỏ qua srcset, luôn tải ảnh từ src	Thêm sizes mô tả chiều rộng hiển thị thực tế, ví dụ: sizes="(min-width: 1024px) 50vw, 100vw"
Sử dụng sai đơn vị descriptor	Hình ảnh mờ hoặc bị kéo giãn trên màn hình Retina	Dùng 2x cho thiết bị có pixel ratio cao; dùng 400w khi cần kiểm soát theo chiều rộng viewport — không trộn lẫn hai kiểu trong cùng srcset
Không cung cấp ảnh fallback (src)	Hiển thị ảnh lỗi trên trình duyệt cũ (IE, Safari < 9)	Luôn giữ thuộc tính src trỏ tới ảnh chất lượng trung bình — đây là yêu cầu bắt buộc

Ví dụ thực tế

Dưới đây là đoạn mã áp dụng cho ảnh sản phẩm trên trang danh mục:

<img src="product-medium.jpg" srcset="product-small.jpg 480w, product-medium.jpg 768w, product-large.jpg 1200w, product-x2.jpg 2x" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" alt="Tai nghe không dây chống ồn" loading="lazy" width="400" height="400" >

→ Trên điện thoại 480px: tải product-small.jpg (480w).
→ Trên iPad (768px): tải product-medium.jpg (768w).
→ Trên laptop Retina: tải product-x2.jpg (2x) dù viewport rộng 1200px.

Câu hỏi thường gặp

srcset có thay thế được picture element không?

Không. <picture> dùng khi cần thay đổi định dạng (JPEG → WebP), khung hình (portrait → landscape) hoặc nội dung (ảnh khác hoàn toàn). Còn srcset chỉ dùng để thay đổi phiên bản cùng nội dung — nên ưu tiên srcset nếu chỉ cần tối ưu kích thước/độ phân giải.

Có cần nén tất cả ảnh trong srcset?

Có. Mỗi ảnh trong srcset phải được nén riêng — không thể nén ảnh gốc rồi resize. Nén sai làm tăng kích thước file lên 2–3 lần. Công cụ khuyên dùng: Squoosh (Web), ImageOptim (macOS), hoặc TinyPNG (online).

srcset có hỗ trợ lazy loading không?

Có, nhưng cần thêm thuộc tính loading="lazy". Tuy nhiên, trình duyệt vẫn đọc srcset sớm để chọn ảnh phù hợp — nên lazy load chỉ trì hoãn tải, không trì hoãn quyết định. Với ảnh phía trên gấp (above-the-fold), nên bỏ loading="lazy" để đảm bảo LCP tốt.