В HTML тег «picture» используется для предоставления нескольких источников изображения, позволяя браузеру выбрать наиболее подходящий из них на основе таких факторов, как размер экрана, разрешение и возможности устройства. Вот некоторые методы и атрибуты, которые обычно используются с тегом «picture»:

1. Основное использование: вы можете использовать тег «picture» вместе с тегами «source» и «img» для определения различных источников изображений. Например:

<picture>
  <source srcset="image-large.jpg" media="(min-width: 1200px)">
  <source srcset="image-medium.jpg" media="(min-width: 768px)">
  <img src="image-small.jpg" alt="Description of the image">
</picture>

В приведенном выше примере браузер выберет подходящий источник изображения в зависимости от ширины экрана.

2. Художественное оформление: вы можете использовать атрибут «размеры», чтобы указать размер контейнера изображения. Это помогает браузеру определить, какой источник изображения использовать. Например:

<picture>
  <source srcset="image-large.jpg" media="(min-width: 1200px)" sizes="50vw">
  <source srcset="image-medium.jpg" media="(min-width: 768px)" sizes="30vw">
  <img src="image-small.jpg" alt="Description of the image">
</picture>

3. Дисплеи Retina. Вы можете предоставить изображения высокого разрешения для устройств с дисплеями Retina, используя атрибут «srcset» и дескриптор «2x». Например:

<picture>
  <source srcset="image-large.jpg 2x" media="(min-width: 1200px)">
  <source srcset="image-medium.jpg 2x" media="(min-width: 768px)">
  <img src="image-small.jpg" alt="Description of the image">
</picture>

Это гарантирует, что изображения более высокого качества будут отображаться на устройствах с более высокой плотностью пикселей.