Bạn sẽ sử dụng thuộc tính srcset khi muốn cung cấp các hình ảnh khác nhau cho người dùng tùy thuộc vào chiều rộng màn hình thiết bị của họ - cung cấp hình ảnh chất lượng cao hơn cho các thiết bị có màn hình retina giúp nâng cao trải nghiệm người dùng và cung cấp hình ảnh có độ phân giải thấp hơn cho các thiết bị cấp thấp giúp tăng hiệu suất và giảm lãng phí dữ liệu (vì việc cung cấp hình ảnh lớn hơn sẽ không có bất kỳ sự khác biệt nào mà người dùng có thể nhìn thấy được).

Ví dụ: <img srcset = "small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src = "..." alt = ""> cho trình duyệt hiển thị hình ảnh .jpg nhỏ, vừa hoặc lớn tùy theo resolution của máy khách hàng. Giá trị đầu tiên là tên hình ảnh và giá trị thứ hai là chiều rộng của hình ảnh tính bằng pixel. Đối với chiều rộng thiết bị là 320px, các phép tính sau được thực hiện:

• 500/320 = 1,5625
• 1000/320 = 3,125
• 2000/320 = 6,25

Nếu độ phân giải của máy khách hàng là 1x, thì gần nhất là 1.5625 và 500w tương ứng với small.jpg sẽ được trình duyệt chọn.

Nếu độ phân giải là retina (2x), trình duyệt sẽ sử dụng độ phân giải gần nhất trên mức tối thiểu.

Có nghĩa là nó sẽ không chọn 500w (1.5625) vì nó lớn hơn 1 và hình ảnh có thể trông xấu. Vì vậy, trình duyệt sẽ chọn hình ảnh có tỷ lệ kết quả gần hơn với 2 là 1000w (3.125).

Theo đó “srcset” giải quyết vấn đề bạn muốn cung cấp các tệp hình ảnh nhỏ hơn cho các thiết bị màn hình hẹp, vì chúng không cần hình ảnh lớn như màn hình máy tính để bàn - và cũng có thể tùy chọn khi bạn muốn cung cấp hình ảnh có độ phân giải khác nhau cho màn hình mật độ cao / mật độ thấp (high density/low-density screens).