Bạn biết gì về thuộc tính srcset trong thẻ img?

Thuộc tính srcset trong thẻ img của HTML5 cho phép bạn định nghĩa nhiều kích thước của cùng một hình ảnh, giúp trình duyệt có thể chọn nguồn hình ảnh phù hợp nhất dựa trên điều kiện của trình duyệt, như kích thước màn hình hoặc độ phân giải. Điều này giúp tối ưu hóa hiệu suất tải trang và cải thiện trải nghiệm người dùng bằng cách đảm bảo rằng hình ảnh không bị quá lớn hoặc quá nhỏ so với kích thước màn hình của người dùng.

Cách Sử Dụng srcset

Bạn sử dụng srcset bằng cách liệt kê các URL của hình ảnh và kích thước tương ứng của chúng, phân tách bằng dấu phẩy. Kích thước có thể được chỉ định bằng số pixel (đánh dấu bằng w cho chiều rộng) hoặc bằng mật độ điểm ảnh (đánh dấu bằng x)

<img srcset="example-small.jpg 500w, example-medium.jpg 1000w, example-large.jpg 1500w"
     src="example-fallback.jpg"
     alt="Mô tả hình ảnh">

Trong ví dụ trên, trình duyệt sẽ chọn example-small.jpg nếu chiều rộng của khu vực hiển thị hình ảnh là 500px, example-medium.jpg cho 1000px, và ...