Що робить атрибут srcset?

HTMLJunior~2 хв читання

Атрибут srcset у тега <img> дає змогу вказати кілька версій одного зображення, з різними розмірами або роздільністю, і дає браузеру можливість самому обрати, яке зображення завантажити залежно від екрана користувача.

Він - основа технології responsive images (адаптивних зображень).

1. Найпростіший приклад

html

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  alt="Пейзаж">

Як це працює:

браузер бачить, що є три варіанти: 400, 800 і 1600 пікселів;
дивиться, яка ширина області відображення і щільність пікселів екрана;
вибирає оптимальний файл (наприклад, photo-400.jpg для телефона або photo-1600.jpg для Retina-монітора).

2. Формат запису `srcset`

У srcset можна вказати:

кілька файлів: розділяються комами;
кожен файл супроводжується:

або шириною в пікселях (400w, 800w тощо),
або щільністю пікселів (1x, 2x).

Приклад з ширинами:

html

srcset="
  img-400.jpg 400w,
  img-800.jpg 800w,
  img-1600.jpg 1600w"

Приклад з щільностями (для Retina-дисплеїв):

html

srcset="
  logo-1x.png 1x,
  logo-2x.png 2x"

3. Як браузер вибирає картинку

Алгоритм вибору:

Дивиться доступний простір для зображення (наприклад, 600 пікселів у ширину).
Дивиться srcset і знаходить найближче підхоже значення.
Завантажує найбільш підхожу за розміром версію (без зайвої ваги, але з потрібною якістю).

4. Часто використовується разом з атрибутом `sizes`

Щоб браузер міг точніше зрозуміти, яка ширина картинки використовується за різних розмірів екрана, додають атрибут sizes.

Приклад:

html

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="Захід сонця біля моря">

Інтерпретація:

якщо екран ≤ 600px → використовувати 400w;
якщо ≤ 1200px → 800w;
якщо більше → 1600w.

5. Без `sizes`

Якщо sizes не вказано, браузер вважає, що зображення займає всю ширину вікна (100vw), і вибирає картинку, яка максимально відповідає ширині пристрою.

6. Приклад з retina-екранами (`x`)

html

<img
  src="avatar-1x.jpg"
  srcset="avatar-1x.jpg 1x, avatar-2x.jpg 2x"
  alt="Фото профілю">

Браузер на звичайному екрані завантажить 1x, а на Retina: 2x (удвічі чіткіше).

7. Переваги `srcset`

Перевага	Опис
Швидше завантаження	Завантажується оптимальний за розміром файл
Менше трафіку	Мобільні пристрої не завантажують величезні зображення
Висока якість	Retina-дисплеї отримують детальніші версії
SEO і UX	Покращуються Core Web Vitals і сприйняття швидкості

Підсумок:

Атрибут	Призначення
`srcset`	Список зображень із зазначенням їхніх розмірів або щільності
Формати значень	`photo-800.jpg 800w`, `logo-2x.png 2x`
Працює з	`sizes` для адаптивного вибору
Мета	Автоматичний вибір потрібного файлу під екран користувача

Простими словами: srcset - це як меню для браузера:

«Ось тобі три версії однієї картинки, вибери сам ту, яка підійде твоєму екрану і швидкості завантаження.»

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

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

Premium

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