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

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

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

Вариант 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'>

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

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

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

<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'>

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

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

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

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

Итог

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

Источник