Теория — Урок 36

Главная идея

Адаптивное изображение — это не просто width: 100%. У одной и той же картинки есть несколько физических файлов разного размера, а браузер должен сам выбрать самый подходящий: маленький — для телефона, большой и чёткий — для Retina-ноутбука. Чтобы он мог это сделать, мы заранее описываем, какие файлы существуют (srcset) и какой CSS-размер картинка займёт на странице (sizes). Если же на разных экранах нужна не просто другая разрешалка, а другая композиция кадра — в дело вступает <picture>.

srcset как официант в ресторане. Вы говорите официанту, насколько вы голодны (это sizes — сколько места займёт блюдо на столе), а на кухне есть порции разного размера (это файлы в srcset: 480w, 960w, 1920w). Официант приносит порцию ровно под ваш аппетит — не заставляет съедать гигантский desktop-стейк, если вы просто перекусываете с телефона.

<picture> как разные кадры одной сцены. Это уже работа режиссёра: на широком экране — общий план панорамой, на узком телефоне — крупный портретный кадр того же героя. Не уменьшенная копия, а другой кадр, специально снятый под формат экрана. Это и есть art direction.

Как браузер выбирает файл

При srcset с дескриптором ширины (w) браузер считает: «картинка займёт вот столько CSS-пикселей (из sizes), экран у пользователя с плотностью DPR=2, значит мне нужен файл шириной примерно CSS-ширина × DPR». И берёт ближайший подходящий из списка. Схема:

srcset = меню файлов, sizes = размер на странице, DPR = плотность. Браузер перемножает и выбирает.

Два дескриптора в srcset

Ширина (w): hero-960.jpg 960w — «этот файл реально 960px шириной». Работает в паре с sizes и подходит для картинок, меняющих размер по вёрстке.
Плотность (x): logo@2x.png 2x — «этот файл для экранов с DPR=2». Подходит для элементов фиксированного размера (логотип, иконка), где sizes не нужен.

picture: art direction и форматы

<picture> — это контейнер. Внутри идут несколько <source> (браузер берёт первый подошедший сверху вниз) и обязательный <img> в конце — он же fallback и носитель alt. Два главных сценария: другой кроп через media и новые форматы (WebP/AVIF) через type — с автоматическим откатом на JPG, если формат не поддержан.

object-fit: картинка в блоке фиксированного размера

Когда у картинки заданы и ширина, и высота (например, карточка-плитка), пропорции файла редко совпадают с пропорциями блока. object-fit решает, что делать: cover — заполнить без полей, обрезав лишнее; contain — вписать целиком, возможны поля; fill (по умолчанию) — растянуть, искажая. Это аналог background-size, но для настоящего тега <img>.

Когда что применять

Картинка просто меняет размер по вёрстке → srcset + sizes (дескриптор w).
Нужен другой кадр/кроп под экран → <picture> + <source media>.
Хотите отдать WebP/AVIF с откатом → <source type> внутри <picture>.
Картинка вписывается в блок фикс. размера → object-fit + width/height.

Базовое правило резиновой картинки

📄 lesson-36/styles.css

/* картинка никогда не вылезет за контейнер и сохранит пропорции */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

Важно про CLS: всегда задавайте width и height в HTML-теге <img> (атрибутами). Браузер заранее резервирует место под нужные пропорции, и контент не «прыгает» при загрузке. CSS height:auto при этом сохраняет адаптивность.

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

⚡ Кратко