Wie man in HTML die Verbindung verschiedener Formate und Größen von Bildern für Bildschirme mit unterschiedlicher Pixeldichte realisiert? Was ist das Tag picture und das Attribut 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> помогают оптимизировать загрузку изображений под разные устройства, улучшая производительность и качество отображения.