Адаптивная графика

1. Зачем нужна адаптивная графика

Одна и та же картинка смотрится на 27-дюймовом мониторе и на телефоне. Если отдавать всем один и тот же файл максимального качества, телефон скачает 300 КБ ради картинки, которую покажет в 100 раз меньше. Адаптивность графики — о том, чтобы каждый экран получал подходящий размер и формат без потери качества.

• размер файла — телефону не нужна картинка для десктопа;
• качество — retina-экран не должен видеть мыльные пиксели;
• образ — картинке на узкой колонке не нужна широкоугольная версия;
• скорость — экономия трафика ускоряет и страницу, и Core Web Vitals.

2. srcset с x-дескрипторами

Простой случай: один размер изображения, но разная плотность пикселей экрана (обычный против retina). Для этого в srcset перечисляют версии с дескрипторами 1x, 2x — браузер сам выбирает подходящую.

<img src="photo-1x.jpg"
     srcset="photo-1x.jpg 1x, photo-2x.jpg 2x"
     alt="Городской пейзаж">

• 1x — обычный экран (1 CSS-пиксель = 1 физический);
• 2x (и 3x) — retina и сверхплотные экраны телефонов;
• браузер решает сам, учитывая плотность экрана поворота;
• src обязателен — это резервный вариант и первый кандидат.

3. srcset с w-дескрипторами и sizes

Когда размер картинки зависит от ширины экрана, браузеру нужно знать и ширины файлов (w-дескрипторы), и занимаемую картинкой ширину (sizes). Тогда он посчитает, какой файл качать, учитывая плотность экрана.

<img src="city-800.jpg"
     srcset="city-400.jpg 400w,
             city-800.jpg 800w,
             city-1600.jpg 1600w"
     sizes="(min-width: 1024px) 50vw, 100vw"
     alt="Панорама города">

sizes — это строки медиаусловий и ширин: «на широком экране картинка занимает половину вьюпорта, на узком — всю ширину». Браузер берёт актуальную ширину, умножает на плотность 2x и выбирает ближайший файл из srcset.

• w-дескриптор равен реальной ширине файла в пикселях;
• sizes перечисляет самые узкие и широкие случаи вашей вёрстки;
• CSS max-width при этом задаётся, как обычно (ширина колонки).

4. picture: формат и art direction

Тег picture решает две задачи, которые srcset не может: отдать разный формат (WebP/AVIF вместо JPEG) и показать другое кадрирование на разных экранах (art direction). Внутри — source и обычный img как резерв.

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Отдых на природе">
</picture>

<picture>
  <source media="(min-width: 768px)" srcset="wide.jpg">
  <source media="(max-width: 767px)" srcset="crop.jpg">
  <img src="wide.jpg" alt="Комната с письменным столом">
</picture>

• браузер берёт первый source, который умеет и формат, и медиаусловие;
• img внутри обязателен: без него картинка не появится вообще;
• атрибуты (alt, loading, width/height) пишут на img, не на source;
• подписи и ширина в CSS — тоже на img.

5. Форматы изображений

Выбор формата — половина скорости страницы. Каждый формат отвечает своему типу контента: фотография, графика с резкими краями, иконка или экран страницы.

<picture>
  <source type="image/avif" srcset="img.avif">
  <source type="image/webp" srcset="img.webp">
  <img src="img.jpg" alt="Товар в интернет-магазине">
</picture>

6. width, height и aspect-ratio

Когда браузер знает размеры картинки заранее, он оставляет под неё место и страница не «прыгает» во время загрузки — это главный приём защиты от смещения макета (CLS). Всегда задавайте width и height, а CSS растягивает картинку с сохранением пропорций.

<img src="photo.jpg" width="1200" height="800"
     alt="Пример" class="photo">

      .photo {
        max-width: 100%;
        height: auto;   /* пропорция сохраняется */
      }

• width/height — это атрибуты разметки, они не фиксируют CSS-ширину;
• height: auto в CSS возвращает браузером зарезервированное место;
• alternative: aspect-ratio: 1200 / 800 — работает даже без атрибутов;
• пропорция пишется в разметке (1:1, 4:3, 16:9) — так же без прыжков.

7. Ленивая загрузка

Картинки ниже первого экрана не нужны мгновенно: браузер может подождать, пока пользователь доскроллит. Атрибут loading="lazy" включает это поведение нативно — без скриптов. Первый экран остаётся быстрым: loading="eager" по умолчанию, fetchpriority помогает главной картинке.

<!-- в зоне видимости сразу: eager + приоритет -->
<img src="cover.jpg" alt="Обложка статьи" fetchpriority="high">

<!-- ниже первого экрана: догрузится при прокрутке -->
<img src="photo-1.jpg" alt="Галерея" loading="lazy">
<img src="photo-2.jpg" alt="Галерея" loading="lazy">

• lazy не вешайте на первую картинку страницы — её и так качают сразу;
• через fetchpriority="high" можно ускорить LCP-изображение;
• lazy + gap-высота: задавайте height/width, иначе место схлопнется до загрузки;
• для iframe и video тоже есть loading="lazy".

8. Адаптивные фоны CSS

Картинка как фон background не умеет требовать srcset, но умеет брать разные файлы по медиаусловиям через image-set() и @media. Формат — как обычно, через список.

.hero {
  background-image: -webkit-image-set(
    url("hero-1x.jpg") 1x,
    url("hero-2x.jpg") 2x
  );
  background-image: image-set(
    "hero-1x.jpg" 1x,
    "hero-2x.jpg" 2x
  );
  background-size: cover;
}

@media (min-width: 768px) {
  .hero { background-image: image-set("hero-wide.jpg" 1x, "hero-wide-2x.jpg" 2x); }
}

• фон-картинки участвуют в CLS: дайте блоку высоту (aspect-ratio или min-height);
• image-set поддерживается в современных браузерах, префикс -webkit- для старых Safari;
• декоративные фоны не несут информации — alt им не нужен, они скрыты от скринридера.

9. Иконки и фавиконки

Иконки интерфейса почти всегда векторные: одна SVG-иконка отображается на любом экране с идеальной чёткостью и весит байты. Фавиконки — отдельная история: размеры и форматы задаются в link rel="icon".

<!-- SVG-иконка масштабируется идеально -->
<svg class="icon" width="24" height="24" viewBox="0 0 24 24">
  <path d="M3 12h18M12 3v18" stroke="currentColor" stroke-width="2"/>
</svg>

<link rel="icon" href="favicon.ico" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="favicon.svg">

• SVG не теряет чёткость на retina — плотность не нужна;
• вектор весит 0.1–2 КБ против 10–50 КБ у PNG-иконок;
• Colorized по currentColor — одна иконка, разные темы;
• для фавикона держите favicon.ico и favicon.svg.

10. Проверка реальной отдачи

Адаптивность графики проверяется во вкладке Network — той же, что показывает любой ответ сервера. Скачанный файл должен «соответствовать» тому, что видно на экране.

• откройте DevTools → Network → Img: размер отданного файла;
• уменьшите окно до мобильного и повторите: файл должен стать меньше;
• на мобильном экране должен грузиться лёгкий вариант без «расплывов»;
• смотрите, что реально запрошено (WebP/AVIF), а не что указано в src;
• проверьте кеш: повторное открытие отдаёт закешированные копии (status 200/304).

11. Чек-лист адаптивной графики

Статья о растровой сетке лучше готова при коротком контроле. Прогоните страницу с картинками по пунктам один раз после вёрстки.

• каждая картинка имеет альт или пустой альт для декора;
• у картинок заданы width/height или aspect-ratio — нет прыжков;
• главная картинка (LCP) с fetchpriority="high", остальные — lazy;
• для фото подключён picture с AVIF/WebP и JPEG-резервом;
• для колонок с резиновой шириной — srcset с w и sizes;
• иконки — SVG (currentColor), фавикон SVG + ICO;
• фон-картинки используют image-set, блоку задана высота.

Что дальше

Курс завершён.

← Вернуться к курсам