Совет по HTML: Используй тег <picture> для адаптивных изображений

Когда тебе нужно отображать разные версии изображения на разных устройствах например, для мобильных и десктопных экранов, применяй тег <picture>. Он позволяет задавать условия, при которых будет загружаться конкретная версия картинки.

<picture>
  <source srcset="320.jpg" media="(max-width: 800px)">
  <img src="640.jpg" alt="...">
</picture>

Как это работает:

Браузер проходит по тегам <source> сверху вниз и выбирает первый, условия media которого совпадают с текущими

Если ни один <source> не подходит или браузер не поддерживает <picture>, загрузится изображение из тега <img>