Адаптивні зображення

1. Тег picture

Тег <picture> дозволяє показувати різні зображення на різних пристроях. Це обгортка (як <div>), яка сама нічого не відображає.

Структура

<picture>
  <source
    srcset="banner-mobile.webp 1x, banner-mobile-2x.webp 2x"
    media="(max-width: 480px)"
  >
  <source
    srcset="banner-desktop.webp 1x, banner-desktop-2x.webp 2x"
  >
  <img src="banner-desktop.webp" alt="Банер">
</picture>

Як це працює

• <source> — аналог <img>, задає зображення через srcset
• Атрибут media — ті самі медіазапити, що й у CSS (min-width, orientation тощо)
• Атрибут srcset — список зображень із умовами (1x, 2x для щільності пікселів або 320w, 768w для ширини)
• <img> в кінці — обов'язковий; потрібний для атрибута alt та як fallback при проблемах із завантаженням

Коли використовувати

• Банери — горизонтальний банер на десктопі, вертикальний на мобільному
• Різні формати — WebP для сучасних браузерів, PNG/JPEG як fallback
• Різний вміст — детальне зображення на великому екрані, спрощене на маленькому

2. Атрибут srcset

Атрибут srcset можна використовувати як у <source>, так і безпосередньо в <img>:

<img
  src="photo.jpg"
  srcset="photo.jpg 1x, photo-2x.jpg 2x, photo-3x.jpg 3x"
  alt="Фото"
>

Дескриптори

• 1x, 2x, 3x — щільність пікселів (1x = звичайний екран, 2x = Retina)
• 320w, 768w — ширина зображення в пікселях (браузер обирає найкраще за шириною viewport)

Особливості кешування

Браузер кешує зображення і не «понижує» якість: якщо вже завантажено 2x-версію, при зменшенні вікна він не завантажить 1x. Для тестування увімкніть Disable cache у DevTools.

SVG як адаптивне зображення

Всередині SVG-файлу можна писати медіазапити. Елементи SVG будуть показуватися або зникати залежно від розміру. Наприклад, іконка будинку: на маленькому екрані — спрощена, на великому — з деталями (вікна, двері).

3. Підсумкова таблиця