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

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#srcset #sizes #picture #source #media #type #img #object-fit #object-position #contain #fill

⚡ Кратко

Готовые решения трёх заданий: резиновый <img>, srcset+sizes на три файла и полный <picture> с WebP + art direction + fallback.

Решение 1 — резиновая картинка

<img src="cover.jpg" alt="Обложка"
     width="600" height="400">
img { max-width: 100%; height: auto; display: block; }

Решение 2 — srcset + sizes

Три файла одной картинки. sizes описывает реальный CSS-размер: 50vw на desktop, 100vw иначе.

480w 960w (мобильный Retina ✓) 1440w (desktop Retina) 
<img
  src="cover-960.jpg"
  srcset="cover-480.jpg 480w,
          cover-960.jpg 960w,
          cover-1440.jpg 1440w"
  sizes="(min-width: 64rem) 50vw, 100vw"
  alt="Обложка" width="1440" height="960">

Решение 3 — picture: формат + art direction

портрет
панорама
<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: 0.75rem;
}
Почему так: первый <source> с media ловит desktop и отдаёт широкий WebP; второй — мобильный WebP; <img> закрывает браузеры без WebP и несёт alt.

Навигация