Khái niệm

Tag <picture> là một phần tử HTML mới được giới thiệu trong phiên bản HTML5. Nó cho phép bạn cung cấp nhiều hình ảnh khác nhau để hiển thị trên các thiết bị và màn hình khác nhau.

Điều này hữu ích khi bạn muốn tối ưu hóa trải nghiệm người dùng trên các thiết bị có độ phân giải và kích thước màn hình khác nhau.

Cách sử dụng

<picture>
  <source srcset="path/to/image1.jpg" media="(min-width: 1200px)">
  <source srcset="path/to/image2.jpg" media="(min-width: 768px)">
  <img src="path/to/default-image.jpg" alt="Mô tả hình ảnh">
</picture>