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

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

⚡ Кратко

Главные грабли: один файл на всех экранах; sizes не совпадает с реальным CSS; нет alt; нет width/height (скачки CLS); <img>-fallback вынесен наружу <picture>; забыли object-fit и картинка искажается.

1. Один тяжёлый файл для всех экранов

Как ломается: телефон с экраном 360px качает desktop-картинку 2400px — лишние мегабайты и медленная загрузка.

Как правильно: дайте srcset с несколькими файлами — браузер выберет минимально достаточный.

<!-- плохо -->  <img src="hero-2400.jpg">
<!-- хорошо --> <img src="hero-960.jpg"
  srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-2400.jpg 2400w"
  sizes="(min-width: 64rem) 50vw, 100vw" alt="…" width="2400" height="1600">

2. sizes не совпадает с реальной вёрсткой

Как ломается: написали sizes="100vw", а картинка по факту занимает 50vw — браузер скачивает файл вдвое больше нужного.

Как правильно: sizes должен описывать фактический CSS-размер при каждом условии.

3. Картинка искажается в блоке фикс. размера

Как ломается: задали width и height с разными пропорциями — без object-fit изображение растягивается (значение по умолчанию fill).

✗ fill — искажено
✓ cover — пропорции целы
.tile img {
  width: 120px; height: 80px;
  object-fit: cover;   /* было: по умолчанию fill */
}

4. Нет width/height — страница «прыгает» (CLS)

Как ломается: без атрибутов размера браузер не знает место под картинку, и при её загрузке контент скачет вниз.

Как правильно: всегда указывайте width и height в теге; height:auto в CSS сохранит адаптивность.

5. <img> вынесен из <picture> или забыт alt

Как ломается: без финального <img> внутри <picture> картинки нет вовсе; без alt страдают доступность и SEO. alt и width/height ставятся именно на <img>, а не на <source>.

Навигация