Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить атрибут srcset?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`srcset`** - це атрибут тега `<img>`, який дає змогу вказати кілька версій одного зображення (з різними розмірами або щільністю пікселів), а браузер сам обирає, яку з них завантажити. **Ключове:** він є основою технології responsive images і часто застосовується разом з атрибутом `sizes`, щоб точніше підказати браузеру потрібну ширину картинки.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняАтрибут `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` можна вказати: 1. **кілька файлів**: розділяються комами; 2. **кожен файл** супроводжується: - або **шириною в пікселях** (`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. Як браузер вибирає картинку Алгоритм вибору: 1. Дивиться доступний простір для зображення (наприклад, 600 пікселів у ширину). 2. Дивиться `srcset` і знаходить найближче підхоже значення. 3. Завантажує **найбільш підхожу за розміром версію** (без зайвої ваги, але з потрібною якістю). --- ### 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` - це як меню для браузера: > «Ось тобі три версії однієї картинки, вибери сам ту, > яка підійде твоєму екрану і швидкості завантаження.»Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.