Hoe implementeer je in HTML het aansluiten van verschillende formaten en maten van afbeeldingen voor schermen met verschillende pixeldichtheden? Wat is de tag picture en het attribuut 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> помогают оптимизировать загрузку изображений под разные устройства, улучшая производительность и качество отображения.