Изображения в Html: когда использовать srcset и sizes для адаптивной загрузки

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

Как быстро выбрать схему адаптивных изображений

• Для одного кадра и нескольких размеров файла задайте srcset с дескрипторами ширины и опишите слот изображения через sizes.
• Для одного исходника в двух вариантах плотности подойдут дескрипторы 1x и 2x; sizes в такой схеме не нужен.
• Если на узком экране нужен другой кадр, используйте <picture> и <source media>.
• Сначала определите фактическую ширину изображения в макете, затем подготовьте файлы соответствующих размеров.
• Не добавляйте сложную разметку, если изображение всегда отображается в одном размере и подходит всем экранам.

Что дают srcset и sizes по отдельности

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

Эта схема подходит для карточек, галерей и других изображений, которые сохраняют кадрирование, но отображаются в разных размерах. Не усложняйте разметку, если файл всегда показывается в фиксированном размере или отдельные варианты почти не отличаются. Для смены композиции кадра используйте <picture>.

Когда браузеру нужен список вариантов srcset

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

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

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Горный пейзаж">

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

Как описать реальную ширину изображения через sizes

1. Найдите ширину слота в макете.

   Определите, сколько места занимает изображение на мобильном экране, планшете и широком окне. Учитывайте ширину контейнера, колонки и внутренние отступы.

2. Запишите условие для узкого экрана.

   Например, если изображение занимает всю ширину окна до выбранного макетом порога, укажите 100vw:

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

3. Опишите ширину слота после порога.

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

4. Соотнесите описание с файлами.

   Укажите кандидатов в srcset с корректными дескрипторами w. Браузер использует список вариантов, описание слота и доступную плотность экрана при выборе файла.
5. Проверьте результат на разных ширинах.

   Сравните заданный в sizes слот с фактической шириной элемента. Если значения расходятся, скорректируйте медиавыражения или ширину слота.

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

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

Как связать медиавыражения с файлами разного кадрирования

Когда для узкого экрана нужна вертикальная композиция, а для широкого - горизонтальная, используйте элемент <picture>. Варианты <source> размещайте перед <img>; последний остаётся резервным изображением и содержит альтернативный текст.

<picture>
  <source
    media="(max-width: 600px)"
    srcset="portrait-480.jpg 480w, portrait-800.jpg 800w"
    sizes="100vw">
  <source
    srcset="landscape-800.jpg 800w, landscape-1200.jpg 1200w"
    sizes="50vw">
  <img
    src="landscape-800.jpg"
    alt="Человек на берегу моря">
</picture>

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

Сравнение схем srcset и sizes для типовых макетов

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

Сценарий	Подход	Пример
Один кадр, несколько размеров файла	srcset с w и описание слота через sizes	Карточка занимает всю ширину на телефоне и часть контейнера на широком экране
Один размер отображения, разные плотности	srcset с дескрипторами 1x и 2x	Небольшая иконка или логотип в фиксированном CSS-размере
Разное кадрирование по ширине экрана	<picture> с медиавыражением и отдельными источниками	Вертикальный кадр на телефоне и широкий кадр на большом экране
Изображение всегда одного размера и без смены кадра	Обычный <img>	Небольшой декоративный элемент с фиксированным отображением

При настройке и оптимизации изображений для сайта проверьте распространённые ошибки:

• Дескриптор w не соответствует фактической ширине файла.
• Для списка кандидатов с w не задан атрибут sizes.
• В sizes указана ширина самого файла вместо ширины слота в макете.
• Условие в sizes не соответствует брейкпоинтам в CSS.
• Значение слота слишком велико или мало для реальной колонки.
• Один файл указан несколько раз под разными дескрипторами.
• Для изменения кадрирования применён только srcset, хотя нужны разные композиции.
• В списке файлов нет резервного источника src.

Проверка выбора изображения в DevTools и на мобильных экранах

Проверяйте не только то, что изображение отображается, но и то, какой файл браузер загрузил. В инструментах разработчика найдите элемент <img>, проверьте его текущий источник и сравните фактическую ширину с описанием в sizes. Затем измените ширину окна и повторите проверку.

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

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

Разбор частых затруднений с srcset и sizes

Можно ли использовать srcset без sizes?

Да, если указаны варианты плотности с дескрипторами вроде 1x и 2x. Для кандидатов с дескрипторами ширины w указывайте sizes.

Нужно ли ставить sizes равным ширине исходного файла?

Нет. В sizes описывают ожидаемую ширину слота в макете, а не ширину файла-кандидата.

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

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

Как выбрать разные кадры для телефона и широкого экрана?

Используйте <picture> с элементами <source media> для разных кадрирований и резервным <img>.

Почему браузер загрузил не тот файл, который ожидался?

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

Нужно ли удалять src, если задан srcset?

Нет, указывайте src как резервный источник. Также задайте содержательный alt в элементе <img>.