Домашнее задание

Задача: Подготовьте hero-изображение для телефона и desktop: добавьте <picture> с двумя <source>, WebP/fallback, корректный alt, width, height и sizes. Реальные файлы можно заменить любыми изображениями подходящих размеров (или плейсхолдерами вроде picsum/placeholder-сервисов).

Соберите структуру

Создайте index.html и styles.css без внешних зависимостей. Добавьте контейнер .hero с картинкой и текстом.

Добавьте picture с форматом и art direction

Первый <source> — широкий WebP для (min-width: 64rem), второй — мобильный WebP, финальный <img> — JPG-fallback с alt и размерами.

<picture class="hero-media">
  <source type="image/webp" media="(min-width: 64rem)"
          srcset="hero-wide.webp 960w, hero-wide@2x.webp 1920w" sizes="50vw">
  <source type="image/webp"
          srcset="hero-mobile.webp 480w, hero-mobile@2x.webp 960w" sizes="100vw">
  <img src="hero-mobile.jpg" alt="Опишите содержание кадра"
       width="960" height="640">
</picture>

Сделайте картинку резиновой

.hero-media img { display: block; width: 100%; height: auto; border-radius: .75rem; }

Проверьте вручную

Откройте DevTools (F12) → эмуляция устройства. Меняйте ширину и DPR, во вкладке Network смотрите, какой файл реально скачался на mobile и desktop.

Критерии

Нет горизонтального скролла, картинка не вылезает за контейнер.
У <img> есть осмысленный alt, width и height (нет скачков CLS).
На телефоне грузится лёгкий файл, на desktop Retina — крупный и чёткий.
В браузере без WebP показывается JPG-fallback.

Урок 36. Домашнее задание: Адаптивные изображения: srcset, sizes, picture

⚡ Кратко