Обработка изображений в Html: как использовать атрибуты srcset и sizes

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

Перед внедрением: что проверить в адаптивных изображениях

• Определите, меняется ли размер изображения в макете или нужны только версии для экранов разной плотности.
• Подготовьте файлы с одинаковым содержимым и известными размерами в пикселях.
• Убедитесь, что сервер отдаёт каждый файл по указанному адресу.
• Сверьте предполагаемую ширину изображения с CSS-правилами и брейкпоинтами макета.
• Оставьте атрибут src как резервный источник для браузеров, которые не используют srcset.

Определите, какие версии изображения нужны проекту

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

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

Подготовьте файлы и выберите шаги между размерами

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

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

Укажите ширины файлов или плотность пикселей в `srcset`

Выберите один тип дескрипторов для конкретного набора источников: ширину файла с суффиксом w либо плотность пикселей с суффиксом x. Не смешивайте эти типы в одном значении srcset.

1. Составьте список вариантов.
   Для каждого файла зафиксируйте его ширину в пикселях или плотность, которой он соответствует. Проверьте, что указанные значения совпадают с реальными характеристиками файлов.
2. Выберите дескрипторы ширины для гибкого макета.
   При таком варианте укажите ширину каждого файла в пикселях с дескриптором w.
   • Пример: srcset="photo-480.jpg 480w, photo-960.jpg 960w".
   • Для такого набора обычно задают и sizes, чтобы браузер оценил предполагаемую ширину отображения.
3. Используйте дескрипторы плотности для фиксированного отображаемого размера.
   Если элемент имеет предсказуемую ширину, перечислите версии для стандартной и повышенной плотности экрана с дескрипторами 1x, 2x.
   • Пример: srcset="avatar-1x.jpg 1x, avatar-2x.jpg 2x".
   • В этом варианте sizes не требуется: браузер выбирает источник по плотности пикселей.
4. Оставьте резервный источник.
   Укажите обычный URL в src, чтобы сохранить базовый вариант изображения и обеспечить совместимость разметки.

Опишите реальную ширину изображения через `sizes`

Атрибут sizes в HTML сообщает браузеру, какую ширину изображения ожидает макет при разных условиях. Это подсказка для выбора ресурса из набора с дескрипторами w, а не CSS-свойство, которое само меняет размер элемента.

Например, если изображение занимает всю ширину на узком экране, а на широком - половину окна, значение может выглядеть так: sizes="(max-width: 700px) 100vw, 50vw". Условия следует согласовать с реальными стилями страницы.

• Сверьте значения в sizes с шириной элемента в макете и CSS.
• Укажите условия в порядке проверки: браузер использует первое совпавшее условие.
• После списка условий задайте значение по умолчанию для остальных размеров экрана.
• Используйте единицы вроде vw или CSS-единицы длины, соответствующие ожидаемой ширине.
• Не рассчитывайте, что sizes ограничит ширину отображения: за неё отвечают стили.
• Проверьте разные ширины окна, включая значения около брейкпоинтов.

Соберите разметку и проверьте выбор браузера

Для набора с дескрипторами ширины пример разметки выглядит так:

<img
  src="photo-960.jpg"
  srcset="photo-480.jpg 480w, photo-960.jpg 960w, photo-1440.jpg 1440w"
  sizes="(max-width: 700px) 100vw, 50vw"
  alt="Описание изображения">

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

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

Разберите типичные ошибки в адаптивной загрузке

• Не соответствует дескриптор. Значение вроде 960w должно описывать ширину файла в пикселях, а не предполагаемую ширину элемента.
• Пропущен или неверно составлен sizes. Для списка с дескрипторами w браузеру нужна подсказка о ширине отображения; неточная подсказка может привести к выбору слишком крупного или малого ресурса.
• Смешаны типы дескрипторов. Не объединяйте значения w и x в одном наборе srcset.
• Сломаны пути или имена файлов. Проверьте каждый адрес отдельно и учитывайте регистр символов на сервере.
• Ожидается, что srcset задаёт размеры отображения. Фактический размер элемента задают стили, а атрибуты помогают выбрать файл.
• Проверяется только один сценарий. Сопоставьте поведение на разных ширинах окна и проверьте отсутствие устаревшего кэшированного файла.

Если стандартной пары srcset и sizes недостаточно, рассмотрите альтернативы:

• <picture> - когда нужны разные кадрирования или разные изображения для условий макета.
• CSS-фон - для декоративной графики, которая не несёт самостоятельного смыслового содержания.
• Один файл в src - для небольшого изображения с фиксированным отображением, если дополнительные варианты не дают практической пользы.

Практические нюансы настройки `srcset` и `sizes`

Нужно ли всегда добавлять `sizes`?

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

Как браузер выбирает файл из `srcset`?

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

Можно ли указать только `srcset`?

Да, но для набора с дескрипторами ширины без sizes браузеру не хватает точного описания предполагаемого размера элемента. Сохраните и обычный src как резервный источник.

Что писать в `sizes`, если ширина задаётся в CSS?

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

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

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

Можно ли сочетать `srcset` с `picture`?

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

Как проверить, что адаптивная загрузка работает?

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

Автор: Дмитрий Кузнецов.