Как в HTML реализовать подключение разных форматов и размеров изображений для экранов с разной плотностью пикселей? Что такое тег picture и атрибут srcset?

Для адаптивной загрузки изображений в HTML используют атрибуты srcset и тег <picture>, чтобы подгружать разные форматы и размеры в зависимости от устройства и плотности пикселей.

• Атрибут srcset позволяет указать несколько вариантов одного изображения с разным разрешением или размерами. Браузер сам выберет подходящий вариант в зависимости от плотности пикселей экрана (например, 1x, 2x) или размеров viewport.

Пример использования srcset:

<img src="image-1x.jpg" srcset="image-2x.jpg 2x, image-3x.jpg 3x" alt="Пример">

Здесь браузер загрузит image-2x.jpg для экранов с плотностью 2x, image-3x.jpg — для 3x и т.д.

• Тег <picture> расширяет возможности, позволяя задавать разные изображения не только по плотности, но и по условиям медиа-запросов или формату файла. Внутри <picture> можно использовать несколько <source> с атрибутами media и type.

Пример:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Пример">
</picture>

Здесь браузер сначала попробует загрузить WebP, если поддерживается, иначе fallback на JPEG.

Таким образом, srcset и <picture> помогают оптимизировать загрузку изображений под разные устройства, улучшая производительность и качество отображения.