Concept

Tag <picture> is a new HTML element introduced in HTML5. It allows you to provide multiple different images to be displayed on different devices and screens.

This is useful when you want to optimize the user experience on devices with different resolutions and screen sizes.

How to use

<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>