Адаптивные изображения в HTML5: srcset, sizes и picture — практическое руководство

Адаптивные изображения в HTML5 помогают ускорить сайт и улучшить качество картинки на разных устройствах. Ключевые инструменты: атрибуты srcset, sizes и элемент picture. Разберём, когда и как их использовать, добавим lazy loading, а в конце — чеклист и типичные ошибки.

Зачем нужны адаптивные изображения

• Скорость: мобильным устройствам не нужно грузить гигантские файлы.
• Качество: на ретина-экранах изображение остаётся чётким.
• Экономия: меньше трафика, лучше показатели Core Web Vitals.

Вариант 1: плотность пикселей (1x, 2x)

Если макет фиксированный или слот изображения имеет стабильную ширину, достаточно указать версии для обычных и ретина-экранов:

<img
  src='img/photo-800.jpg'
  srcset='img/photo-800.jpg 1x, img/photo-1600.jpg 2x'
  alt='Пейзаж на закате'
  width='800' height='600'>

Браузер сам выберет подходящий файл по плотности пикселей. Обязательно указывайте width и height — это предотвращает сдвиги верстки (CLS).

Вариант 2: ширинные дескрипторы (w) + sizes

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

<style>
  .card { max-width: 600px; }
  .card img { display: block; width: 100%; height: auto; }
</style>

<img
  class='card__img'
  src='img/hero-600.jpg'
  srcset='
    img/hero-300.jpg 300w,
    img/hero-600.jpg 600w,
    img/hero-900.jpg 900w'
  sizes='(max-width: 600px) 100vw, 600px'
  alt='Горный пейзаж'
  loading='lazy' decoding='async'
  width='600' height='400'>

Что происходит:

• srcset перечисляет варианты с реальной шириной файлов (w).
• sizes говорит: если экран до 600px — слот ≈ 100vw (вся ширина), иначе — 600px. Браузер подберёт ближайший файл по ширине и плотности пикселей.

Вариант 3: picture для форматов и арт-дирекции

Элемент picture позволяет:

• Отдавать современные форматы (AVIF, WebP) с автоматическим фолбэком на JPEG/PNG.
• Менять композицию изображения под разные брейкпоинты (арт-дирекция).

<picture>
  <!-- Сначала современные форматы -->
  <source type='image/avif'
          srcset='img/cat-480.avif 480w, img/cat-960.avif 960w'
          sizes='(max-width: 600px) 100vw, 600px'>
  <source type='image/webp'
          srcset='img/cat-480.webp 480w, img/cat-960.webp 960w'
          sizes='(max-width: 600px) 100vw, 600px'>

  <!-- Арт-дирекция: на широких экранах показываем широкую композицию -->
  <source media='(min-width: 800px)' srcset='img/cat-wide.jpg'>

  <img src='img/cat.jpg' alt='Кот на подоконнике' width='600' height='400'>
</picture>

Важно: порядок источников имеет значение — браузер выберет первый подходящий по типу и медиа-условию, а затем упадёт на <img> как на фолбэк.

Lazy loading, decoding и fetchpriority

Для изображений вне первого экрана используйте отложенную загрузку, а для главного изображения — повышенный приоритет:

<!-- LCP (герой): высокий приоритет и синхронная декодировка -->
<img src='/img/hero-1200.avif'
     alt='Основной баннер'
     width='1200' height='720'
     fetchpriority='high' decoding='sync'>

<!-- Остальные: ленивые и асинхронные -->
<img src='/img/gallery-1-600.jpg'
     alt='Галерея'
     width='600' height='400'
     loading='lazy' decoding='async' fetchpriority='low'>

width и height всегда указывайте — это позволяет браузеру заранее зарезервировать место и уменьшить CLS.

Как подобрать sizes: практические шаблоны

Примеры соответствия макету:

<!-- 1) Картинка на всю ширину до 768px, затем фиксированная 720px -->
sizes='(max-width: 768px) 100vw, 720px'

<!-- 2) Две колонки на ≥ 900px (каждая ~50vw), иначе одна колонка -->
sizes='(min-width: 900px) 50vw, 100vw'

<!-- 3) Три карточки в ряд на ≥ 1200px -->
sizes='(min-width: 1200px) 33vw, (min-width: 768px) 50vw, 100vw'

Совет: сначала опишите условия для больших экранов, затем — дефолт. Следите, чтобы sizes отражал фактическую ширину слота в CSS пикселях, иначе браузер выберет не тот ресурс.

Предзагрузка критичного изображения (опционально)

Для первого экрана можно подсказать браузеру, какой ресурс понадобится раньше других:

<link rel='preload' as='image'
      href='/img/hero-1200.avif'
      imagesrcset='/img/hero-800.avif 800w, /img/hero-1200.avif 1200w'
      imagesizes='(max-width: 768px) 100vw, 1200px'>

Используйте аккуратно: предзагружайте только действительно критичные изображения, чтобы не перегружать сеть.

Отладка и типичные ошибки

• Неверный sizes: браузер выбирает слишком тяжёлые файлы — проверьте соответствие макету в DevTools (Network → выбрать картинку и посмотреть фактический источник).
• Нет width/height: визуальные сдвиги. Всегда задавайте исходные размеры или соотношение сторон через CSS.
• Лишние форматы: не плодите варианты, которые не дают выигрыша. Держите 3–4 разумных ширины и пару форматов (AVIF/WebP + JPEG).
• Неправильный порядок <source>: сначала форматы с type, затем арт-дирекция, потом <img> как фолбэк.
• Забыли lazy-loading для изображений ниже первого экрана — потеря скорости и трафика.

Мини-чеклист перед релизом

• Для картинок со сменой ширины — используете w + sizes; для фиксированных — 1x/2x.
• Для первого экрана — fetchpriority='high', для остальных — loading='lazy'.
• Ширины файлов в srcset соответствуют реальным пикселям изображений.
• Ширина слота в sizes соответствует макету (vw или фиксированные px).
• У всех изображений есть корректный alt, width и height.
• Проверили выбор ресурса в DevTools на разных ширинах экрана и DPR 1x/2x.

Хотите закрепить навыки адаптивной вёрстки и системно прокачать HTML/CSS на практике? Рекомендую интенсивный курс: Прокачать адаптивную вёрстку на практике за месяц →

Итог

Адаптивные изображения в HTML5 — это несложно: выберите подход (1x/2x или w+sizes), при необходимости добавьте picture для форматов и арт-дирекции, не забудьте про lazy-loading и правильные размеры. Такой подход заметно ускорит сайт и улучшит пользовательский опыт на любых устройствах.