Генератор адаптивного srcset и sizes для изображений

Генератор srcset и sizes создаёт готовый HTML-код адаптивного изображения. Добавьте версии файла с разной шириной, задайте предполагаемый размер картинки в макете и получите тег <img>, который поможет браузеру выбрать подходящий источник.

Для чего нужны srcset и sizes

Если всем посетителям сайта отдавать одно большое изображение, мобильные устройства будут загружать лишние данные. Атрибут srcset сообщает браузеру, какие версии файла доступны, а sizes описывает, сколько места изображение предположительно займёт при разных размерах viewport.

Браузер сопоставляет эти данные с шириной экрана и плотностью пикселей устройства. В результате телефон может загрузить небольшой файл, а монитор с высокой плотностью пикселей — более крупный.

Как пользоваться генератором srcset

1. Укажите URL каждой версии изображения и её фактическую ширину в пикселях.
2. Добавьте минимум два файла. Желательно подготовить несколько размеров от мобильного до большого настольного.
3. Введите основной адрес src, альтернативный текст, ширину и высоту исходника.
4. Выберите готовый сценарий sizes или составьте собственное правило.
5. Нажмите «Создать HTML-код» и скопируйте готовый тег.

Синтаксис атрибута srcset

При использовании дескрипторов ширины каждый URL дополняется фактической шириной файла и буквой w:

srcset="image-480.webp 480w,
        image-800.webp 800w,
        image-1280.webp 1280w,
        image-1920.webp 1920w"

Дескриптор 800w означает, что файл имеет ширину 800 пикселей. Он не задаёт ширину отображения в CSS и не является условием медиазапроса.

Как работает атрибут sizes

Атрибут sizes состоит из медиусловий и предполагаемой ширины изображения. Браузер проверяет условия слева направо и использует первое подходящее значение. Последняя часть без условия служит вариантом по умолчанию.

sizes="(max-width: 767px) 100vw, 50vw"

На экранах шириной до 767 px изображение занимает всю ширину viewport. На более широких экранах оно занимает примерно половину ширины.

Готовые примеры sizes

Изображение на всю ширину

sizes="100vw"

Подходит для полноширинного баннера или изображения без ограничения контейнером.

Контент с максимальной шириной 1200 px

sizes="(max-width: 1200px) 100vw, 1200px"

На небольших экранах изображение занимает ширину viewport, а на больших не превышает 1200 px.

Две колонки на компьютере

sizes="(max-width: 767px) 100vw, 50vw"

На телефоне карточка занимает всю ширину, а после контрольной точки — половину окна.

Контент с боковой панелью

sizes="(max-width: 767px) 100vw,
       (max-width: 1200px) 70vw,
       840px"

Такое правило подходит для основной колонки, которая уменьшается из-за сайдбара и ограничена максимальной шириной.

Готовый HTML-код адаптивного изображения

<img
  src="image-1280.webp"
  srcset="image-480.webp 480w, image-800.webp 800w, image-1280.webp 1280w"
  sizes="(max-width: 1200px) 100vw, 1200px"
  width="1280"
  height="720"
  alt="Описание изображения"
  loading="lazy"
  decoding="async">

Атрибут src остаётся запасным источником и также может использоваться поисковыми системами, инструментами предпросмотра и старыми браузерами.

Почему важно указывать width и height

HTML-атрибуты ширины и высоты позволяют браузеру заранее вычислить соотношение сторон и зарезервировать место до загрузки файла. Это уменьшает внезапные сдвиги контента и помогает улучшить показатель CLS из Core Web Vitals.

Эти атрибуты не запрещают адаптивное уменьшение. Обычно достаточно добавить CSS:

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Что выбрать: дескрипторы w или x

Дескрипторы w описывают фактическую ширину файлов и используются вместе с sizes. Это наиболее гибкий вариант для адаптивных макетов. Дескрипторы 1x, 2x и 3x подходят, когда изображение всегда отображается в одном CSS-размере, но подготовлено для экранов с разной плотностью пикселей.

Как подобрать размеры файлов

Не обязательно создавать изображение для каждой возможной ширины экрана. Обычно достаточно нескольких разумных ступеней, например 480, 800, 1280 и 1920 пикселей. Точный набор зависит от максимальной ширины контента, статистики устройств и плотности экранов аудитории.

• Не добавляйте версии шире исходного изображения.
• Используйте одинаковое соотношение сторон для всех файлов в одном srcset.
• Сжимайте каждый вариант и выбирайте современный формат, если он подходит проекту.
• Указывайте реальную ширину файла, а не предполагаемый размер в макете.

Lazy loading и приоритет загрузки

Для изображений ниже первого экрана обычно подходит loading="lazy". Главное изображение первого экрана лучше загружать сразу с loading="eager". Не стоит включать отложенную загрузку для важного LCP-изображения: это может задержать его появление.

Частые ошибки при создании srcset

• Одинаковые дескрипторы ширины указаны для нескольких файлов.
• Вместо фактической ширины файла записана ширина CSS-контейнера.
• Атрибут sizes отсутствует при использовании дескрипторов w.
• Все версии имеют одинаковый вес или фактический размер.
• В одном наборе смешаны изображения с разным кадрированием.
• Для основного изображения первого экрана включён необязательный lazy loading.

Ответы на частые вопросы

Браузер всегда выбирает ближайшую ширину?

Не обязательно. Он учитывает размер слота, плотность пикселей, масштабирование и собственные алгоритмы оптимизации. Атрибуты дают браузеру набор допустимых вариантов, но не приказывают загрузить конкретный файл.

Нужно ли перечислять srcset по возрастанию?

Для браузера порядок обычно не принципиален, но сортировка по ширине делает код понятнее. Генератор выполняет её автоматически.

Можно ли использовать один и тот же URL в src и srcset?

Да. Основной файл часто одновременно выступает запасным значением src и одним из вариантов srcset.

Подходит ли код для WordPress?

Да, готовый тег можно использовать в HTML-блоке. Однако WordPress также умеет автоматически формировать адаптивные атрибуты для изображений, загруженных в медиатеку.