Загрузка скрытых изображений

Представьте задачу: нужно показывать разные изображения в зависимости от ширины области просмотра. Это может быть баннер в верхней части страницы с широким изображением для компьютеров и узким для телефонов. Иногда эту задачу решают двумя <img> и служебными классами, которые управляют отображением.

<div class="banner">
  <img 
    src="banner-desktop.webp"
    alt=""
    width="1200"
    height="600"
    class="mobile-hide"
  >
  <img 
    src="banner-mobile.webp"
    alt=""
    width="400"
    height="200"
    class="desktop-hide"
  >
  <!-- пустой alt, декоративные изображения -->
</div>

Классы mobile-hide и desktop-hide скрывают изображения на мобильных и десктопных экранах. Сами классы могут называться иначе, но суть в том, чтобы скрывать элемент на определённых размерах экрана.

@media (width <= 599px) {
  .mobile-hide {
    display: none;
  }
}

@media (width > 600px) {
  .desktop-hide {
    display: none;
  }
}

По умолчанию изображения с display: none не загружаются. Но если изображение находится в верхней части страницы, которая видна при начальной загрузке, то вопреки display: none оно всё равно будет загружаться. Chrome, например, загружает 6 первых изображений, игнорируя свойство display.

Поэтому правильнее будет использовать элементы <picture> и <source> в сочетании с атрибутом media для выбора источника изображения в зависимости от медиа-запроса.

<picture class="banner">
  <source 
    src="banner-desktop.webp"
    media="(width > 600px)"
    width="1200"
    height="600"
  >
  <img 
    src="banner-mobile.webp"
    alt=""
    width="400"
    height="200"
  >
</picture>

Также не стоит добавлять изображениям в верхней части страницы атрибут loading="lazy". Ещё можно поэкспериментировать с приоритетом. А ещё <picture> можно использовать как контейнер и задавать ему любые свойства, чтобы не оборачивать в лишний <div>.

#html #performance