Адаптивные изображения в Html: как настроить srcset и sizes

Адаптивные изображения в HTML настраивают через набор файлов в srcset и описание ожидаемой ширины изображения в sizes. Браузер сопоставляет эти данные с размером области отображения и плотностью экрана, затем выбирает подходящий файл. Для разных кадрирований используют элемент picture. Такой подход помогает управлять загрузкой без JavaScript.

Короткий маршрут к корректному srcset

• Подготовьте несколько версий одного изображения с одинаковым кадрированием.
• Укажите ширину каждого файла в дескрипторе w и не перечисляйте в srcset отсутствующие файлы.
• Опишите в sizes, какую ширину изображения ожидает макет на разных экранах.
• Используйте picture, если на разных экранах нужны разные кадрирование или композиция.
• Проверьте результат при разных размерах окна и настройках сети в инструментах разработчика.

Подготовьте версии изображения под разные экраны

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

Не создавайте набор вариантов, если изображение всегда показывается в одном фиксированном размере и достаточно одного подходящего файла. Для логотипов и простых пиктограмм также проверьте, не лучше ли использовать SVG.

Подготовьте файлы с одинаковым содержанием и пропорциями, например photo-480.jpg, photo-960.jpg и photo-1440.jpg. Сохраняйте варианты в подходящем для проекта формате и убедитесь, что каждый файл открывается по указанному пути. Это практичная основа, если нужны адаптивные изображения для сайта и одновременно важна оптимизация изображений на сайте.

Соберите srcset с дескрипторами ширины

Понадобятся готовые файлы, доступ к HTML-шаблону и возможность проверить страницу в браузере. Убедитесь, что сервер отдаёт файлы по указанным URL и не заменяет их перенаправлением на одно изображение.

Для вариантов с разной шириной указывайте фактическую ширину файла в пикселях и дескриптор w:

<img
  src="photo-960.jpg"
  srcset="photo-480.jpg 480w,
          photo-960.jpg 960w,
          photo-1440.jpg 1440w"
  sizes="100vw"
  alt="Горный пейзаж">

В этом примере sizes="100vw" служит простым вариантом, когда изображение занимает всю ширину окна. Для карточки или колонки задайте размеры, соответствующие реальному макету, - подробнее это описано ниже.

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

<img
  src="logo.png"
  srcset="logo.png 1x, logo-2x.png 2x"
  alt="Логотип компании">

Не смешивайте дескрипторы ширины w и плотности x в одном значении srcset. Для изображений, размеры которых меняются вместе с макетом, обычно удобнее набор с w и атрибут sizes.

Опишите размеры отображения через sizes

1. Определите ширину изображения в макете.
   Посмотрите, какую часть контейнера занимает изображение на узком и широком экране. Учитывайте колонки, боковые поля и максимальную ширину контента.
2. Запишите условия для контрольных ширин.
   В sizes перечислите медиавыражение и ожидаемую ширину слота. Значение указывают в CSS-единицах, например px или vw.
   • Для изображения во всю ширину окна подойдет 100vw.
   • Для изображения шириной половина окна можно указать 50vw, если это соответствует макету.
3. Поставьте общее значение последним.
   Браузер использует первое подходящее медиавыражение, а если ни одно не подошло - последнее значение без условия. Например: sizes="(max-width: 600px) 100vw, 50vw".
4. Сверьте описание с реальной вёрсткой.
   Подставьте ширину окна в условия и сравните получившуюся ширину слота с шириной изображения в макете. Если сайт создан с ограничением ширины контейнера, значение 50vw может переоценивать фактический размер на широких экранах.
5. Проверьте связку srcset и sizes.
   Убедитесь, что в наборе есть файл, подходящий для предполагаемого размера, а значение src указывает на рабочий резервный файл. Не рассчитывайте, что браузер обязательно выберет один и тот же кандидат при каждом тесте: на выбор могут влиять условия загрузки и настройки браузера.

Быстрый режим

1. Экспортируйте несколько файлов одинакового кадрирования.
2. Добавьте их в srcset с корректными дескрипторами w.
3. Укажите в sizes ширину слота для мобильного и широкого макета.
4. Проверьте адреса файлов и выбранный браузером вариант.

Добавьте art direction с помощью picture

Если для мобильного экрана требуется другой кадр, используйте picture с отдельным источником для нужного условия. Элемент img внутри остаётся обязательным: он содержит резервный вариант и текст альтернативы.

<picture>
  <source
    media="(max-width: 600px)"
    srcset="photo-portrait.jpg">
  <img
    src="photo-landscape.jpg"
    alt="Путешественник у горного озера">
</picture>

Перед публикацией пройдите этот чек-лист:

• Для мобильной и широкой версии подготовлены файлы с нужным кадрированием.
• Условия media соответствуют контрольным ширинам макета.
• Последовательность элементов source позволяет браузеру выбрать подходящее условие.
• У каждого файла в разметке корректный путь.
• У элемента img есть осмысленный alt или пустой alt="", если изображение декоративное.
• В варианте для узкого экрана важное содержимое кадра не обрезано.

Проверьте выбор файла в браузере и DevTools

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

Частые ошибки при проверке:

• Дескриптор w не совпадает с фактической шириной файла.
• В srcset указан файл, которого нет на сервере, или путь отличается регистром символов.
• sizes описывает размер окна вместо ширины изображения в макете.
• Для изображения с дескрипторами w пропущен атрибут sizes.
• В одном наборе смешаны дескрипторы w и x.
• В мобильном условии picture указан другой файл, но его кадрирование не проверено.
• В тесте оценивают только визуальную чёткость, не проверяя, какой файл действительно запрошен.

Устраните ошибки в дескрипторах и медиазапросах

Выберите подход, соответствующий задаче:

• Набор по ширине (w). Используйте его, когда размер изображения меняется в макете. Укажите фактическую ширину каждого файла и согласуйте sizes с вёрсткой.
• Набор по плотности (x). Подходит, если изображение отображается в одном размере, а нужны варианты для экранов с разной плотностью пикселей. Для таких кандидатов sizes не требуется.
• picture с медиазапросами. Выбирайте этот способ, когда на разных экранах меняется композиция или кадрирование, а не только разрешение.
• Один файл. Оставьте один источник, если размер и кадрирование не меняются и набор вариантов не даёт практической пользы.

Включая адаптивные изображения HTML в проект, проверьте также разметку на странице целиком: атрибуты должны быть у нужного элемента, а изображения - сохранять доступную альтернативу и корректно отображаться при отключённой загрузке дополнительных вариантов. Это особенно удобно учитывать при создании сайта на HTML.

Нюансы адаптивной загрузки изображений

Нужно ли указывать sizes вместе с srcset?

Для набора с дескрипторами ширины w укажите sizes, чтобы браузер оценил ожидаемую ширину изображения. Для набора с дескрипторами плотности x этот атрибут не нужен.

Можно ли смешивать w и x в одном srcset?

Нет, используйте один тип дескрипторов в конкретном наборе. Для ширин макета выбирайте w, для вариантов одного фиксированного размера - x.

Что указать в sizes, если изображение занимает всю ширину окна?

Укажите 100vw. Если ширина ограничена контейнером или зависит от колонок, опишите фактический размер слота с помощью медиавыражений.

Обязательно ли добавлять src к img?

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

Когда нужен picture вместо обычного img с srcset?

Используйте picture, если для разных условий нужны разные кадрирования или форматы изображения. Когда меняется только разрешение одного и того же изображения, обычно достаточно img с srcset и sizes.

Почему браузер загрузил не самый маленький подходящий файл?

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

Автор: Виктор Егоров.