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

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

⚡ Кратко

Было: один тяжёлый <img> на всех экранах — телефон качает лишние мегабайты, нет WebP. Стало: srcset/sizes отдают файл под экран, <picture> добавляет WebP/AVIF с откатом и art direction. Всегда указываем width/height против скачков (CLS).

Старый подход

Одна версия для всех экранов перегружает телефон, не использует современные форматы и часто без width/height — из-за чего страница «прыгает» при загрузке.

📄 lesson-36/old.html
<img src="hero-2400.jpg" alt="Обложка" class="hero-img">
📄 lesson-36/old.css
.hero-img { width: 100%; }

Телефон с экраном 360px всё равно скачивает файл 2400px.

один файл 2400px
~1.4 МБ на любом экране
<img src="hero-2400.jpg" alt="Обложка">

Современный подход

Браузеру даём варианты файлов и форматов, а он выбирает подходящий по ширине вёрстки, DPR и поддержке формата.

📄 lesson-36/modern.html
<picture>
  <source type="image/webp"
          srcset="hero-480.webp 480w, hero-960.webp 960w"
          sizes="(min-width: 64rem) 50vw, 100vw">
  <img src="hero-480.jpg" alt="Обложка"
       srcset="hero-480.jpg 480w, hero-960.jpg 960w"
       sizes="(min-width: 64rem) 50vw, 100vw"
       width="960" height="640">
</picture>
WebP под экран
телефон ~60 КБ, desktop — чётко
<!-- браузер берёт минимально достаточный файл -->
srcset="… 480w, … 960w" sizes="50vw"

Навигация