Responsive image

Атрибут srcset дозволяє браузеру самому обрати, яке зображення завантажити залежно від розміру екрана та щільності пікселів.

Код

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Опис зображення"
  loading="lazy"
>

Пояснення

srcset перелічує варіанти файлів з їхньою реальною шириною (w). sizes повідомляє браузеру, яку ширину займе зображення в макеті — на основі цього браузер обирає найкращий варіант з srcset.

Для art direction (різне кадрування на мобільному й десктопі) використовуйте <picture> з кількома <source>.

Схожі інструменти

Тег <img>

Атрибути src, alt, loading та srcset тегу <img> з прикладами.

HTML Форматувач і Мініфікатор

Форматуйте та стискайте HTML код онлайн. Обробка повністю у браузері, без відправки на сервер.