Адаптивні зображення: picture, srcset та sizes

Чому адаптивні зображення?

Використання одного великого зображення для всіх пристроїв витрачає пропускну здатність на мобільних пристроях і виглядає погано на дисплеях Retina. Адаптивні зображення дозволяють браузеру вибирати найкраще зображення на основі розміру екрану, роздільної здатності та підтримки формату.

Атрибут srcset

srcset надає список джерел зображень з їхніми дескрипторами:

Дескриптори ширини

html

<img 
  src="image-800.jpg"
  srcset="
    image-400.jpg  400w,
    image-800.jpg  800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
  alt="Приклад адаптивного зображення"
>

400w означає "це зображення шириною 400 пікселів"
sizes вказує браузеру, якою буде ширина зображення при відображенні
Браузер вибирає найкраще зображення на основі розміру вікна перегляду та щільності пікселів

Дескриптори щільності пікселів

html

<img
  src="logo.png"
  srcset="
    logo.png    1x,
    logo@2x.png 2x,
    logo@3x.png 3x
  "
  alt="Логотип компанії"
>

Елемент picture

<picture> надає повний контроль над тим, яке зображення відображати, включаючи художнє напрямок та вибір формату:

Художнє напрямок

html

<picture>
  <!-- Мобільний: обрізана портретна версія -->
  <source media="(max-width: 600px)" srcset="hero-mobile.jpg">
  <!-- Плоский: інше обрізання -->
  <source media="(max-width: 1024px)" srcset="hero-tablet.jpg">
  <!-- Настільний: повний ландшафт -->
  <img src="hero-desktop.jpg" alt="Героїчне зображення">
</picture>

Вибір формату

html

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Фото в найкращому доступному форматі">
</picture>

Браузер вибирає перший підтримуваний формат.

Атрибут sizes

sizes описує, якою буде ширина зображення при різних ширинах вікна перегляду:

html

<img
  srcset="img-300.jpg 300w, img-600.jpg 600w, img-900.jpg 900w"
  sizes="
    (max-width: 480px) 100vw,
    (max-width: 960px) 50vw,
    33vw
  "
  src="img-600.jpg"
  alt="Приклад"
>

Вікно перегляду	Ширина відображення зображення
≤ 480px	100% вікна перегляду
≤ 960px	50% вікна перегляду
> 960px	33% вікна перегляду

CSS Object-fit для адаптивних зображень

css

.responsive-img {
  width: 100%;
  height: 300px;
  object-fit: cover;     /* Заповнює область, може обрізати */
  object-position: center;
}

Оптимізація завантаження

html

<!-- Ліниве завантаження (нижче області видимості) -->
<img src="photo.jpg" alt="..." loading="lazy">

<!-- Активне завантаження (вище області видимості, критичне) -->
<img src="hero.jpg" alt="..." loading="eager" fetchpriority="high">

<!-- Асинхронне декодування -->
<img src="photo.jpg" alt="..." decoding="async">

Важливо:

Завжди надавайте запасне <img> всередині <picture> та в атрибуті src srcset. Використовуйте loading="lazy" для зображень нижче області видимості та подавайте сучасні формати (WebP, AVIF) з запасними варіантами для максимальної продуктивності.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань