Cách chỉ định URL hình ảnh cho các tình huống khác nhau (srcset) trong HTML?

Thuộc tính srcset trên <img> hoặc <source> (trong <picture>) cung cấp nhiều phiên bản hình ảnh cho các điều kiện khác nhau (độ phân giải màn hình, viewport width, pixel density). Trình duyệt tự chọn phù hợp nhất.

Cú pháp

• Density descriptor (x): srcset="img-1x.jpg 1x, img-2x.jpg 2x, img-3x.jpg 3x" — cho Retina/HiDPI.
• Width descriptor (w): srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w" + sizes — responsive images.

Ví dụ Responsive (width descriptor + sizes)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <picture>
      <source media="(min-width: 800px)" srcset="large.jpg">
      <source media="(min-width: 400px)" srcset="medium.jpg">
      <img src="small.jpg" alt="Hình ảnh responsive" style="width:100%;">
    </picture>
  </body>
</html>

Ví dụ Density (Retina)

<img src="logo.png" srcset="logo@2x.png 2x, logo@3x.png 3x" alt="Logo">

Thuộc tính sizes (bắt buộc khi dùng w)

Gợi ý kích thước hiển thị của ảnh tại các breakpoint:

<img 
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 400px) 100vw, (max-width: 800px) 50vw, 33vw"
  src="fallback.jpg" alt="...">

Lợi ích

• Tiết kiệm bandwidth (mobile tải ảnh nhỏ).
• Tăng tốc độ tải trang (Core Web Vitals: LCP).
• Hiển thị nét trên màn hình HiDPI.