Responsive Images trên Web

Sử dụng thuộc tính srcset

Ví dụ 1: <img src="image300.png" srcset="image150.png 600w, image100.png 480w" alt="">
Ở trên hình ảnh image300 bình thường sẽ được tải nhưng nếu màn hình nhỏ hơn hoặc bằng 600õ thì hình image160 sẽ được tải
600w ở đây có nghĩa media query làm max-width: 600px
Ví dụ 2: <img src="image.jpg" srcset="image0.jpg 720w, image721.jpeg 1280w, image1281.jpg 1x" alt="">
Ở trên hình image0 được tải khi chiều rộng trình duyệt là nhỏ hơn hoặc bằng 720px
Và với trường hợp kích thước lớn hơn 1280px nếu trình duyệt và độ phân giải thiết bị có tỉ lệ là 1 thì hình sẽ tải là image1281
Còn image.jpg cho trường hợp trình duyệt chưa hỗ trợ thuộc tính srcset.
Ví dụ 3: Như vậy ta có thể thấy giải pháp dùng <picture> và giải pháp dùng thuộc tính srcset đều có cùng mục đích và có thể dùng độc lập, đã có nhiều bàn luận về giải pháp nào tốt hơn nhưng bạn có thể kết hợp cả 2 giải pháp.
<picture>
   <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
   <img src="fallback.jpg" alt="" />
</picture>

Thử xem trình duyệt đã tính toán thế nào.

Thí dụ kích thước thiết bị là 320px, 1x (là gía trị density của màn hình)
Chúng ta có 3 hình
1.1 small.jpg: 500px wide
1.2 medium.jpg: 1000px wide
1.3 large.jpg: 2000px wide
Link: https://luubinhan.github.io/blog/2018-07-30-huong-dan-tam-quan-trong-cua-thuoc-tinh-sizes-trong-the-img/
Link: https://developer.mozilla.org/vi/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images