CSSsrcset liệt kê nhiều phiên bản ảnh, sizes cho browser biết ảnh sẽ hiển thị rộng bao nhiêu để chọn đúng file.
<!-- width descriptor: browser tự chọn theo kích thước hiển thị + DPR -->
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(min-width: 1024px) 50vw, 100vw"
width="800" height="600"
alt="...">
<!-- pixel density descriptor: khi ảnh luôn hiển thị đúng một kích thước -->
<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" alt="Logo">Cách browser quyết định với sizes="(min-width: 1024px) 50vw, 100vw" trên màn 1280px, DPR 2:
- Ảnh sẽ rộng 50vw = 640px CSS → cần 1280px thật → chọn photo-1600.jpg.
Lưu ý 1: sizes phải khớp bề rộng thật do CSS quy định. Khai 100vw trong khi ảnh nằm trong container 600px sẽ khiến browser tải file lớn hơn cần thiết — đây là lỗi phổ biến nhất và nó âm thầm làm nặng trang.
Lưu ý 2: thiếu width/height gây layout shift (CLS). Có hai thuộc tính này, browser giữ chỗ đúng tỉ lệ trước khi ảnh tải xong.
Khi nào dùng <picture> thay vì srcset: khi cần đổi định dạng (AVIF/WebP kèm dự phòng) hoặc đổi bố cục ảnh (art direction) chứ không chỉ đổi kích thước.