Как сделать изображения адаптивными: srcset, sizes и picture

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

Что должно получиться

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

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

Из чего это складывается

Разделите две задачи ещё до экспорта. Первая — показать тот же кадр в подходящем разрешении. Вторая — изменить композицию: например, убрать пустой фон и оставить человека крупнее. Для набора разрешений сохраняют один кадр; для разных композиций используют условия выбора источника.

Как это сделать по шагам

1. Измерьте место изображения. Посмотрите, какую ширину оно занимает в реальном макете на разных экранах. Учтите поля страницы, боковую колонку и число карточек в ряду.
2. Определите смысл кадра. Проверьте, остаётся ли важный объект читаемым при уменьшении. Если нет, подготовьте отдельную композицию для узкого экрана, сохранив смысл иллюстрации.
3. Подготовьте варианты файлов. Для одного кадра сделайте нужные размеры без искусственного увеличения маленького исходника. Запишите реальную ширину каждого файла и его адрес после загрузки на сайт.
4. Опишите набор и место в макете. Укажите варианты в srcset и согласуйте sizes с фактической шириной блока. Не копируйте значение на всю страницу, если изображения расположены в разных колонках.
5. Добавьте условия смены кадра, если они нужны. Используйте picture с подходящими source и вложенным img. Убедитесь, что базовый вариант остаётся рабочим и описание изображения соответствует всем композициям.
6. Проверьте выбранный ресурс. На опубликованной тестовой странице сравните вид, адрес загруженного файла и его размер. Повторите проверку при разных ширинах окна и плотности пикселей.
7. Проверьте повторное открытие. Учтите кеш и снова проверьте страницу после сохранения в CMS. Убедитесь, что редактор сохранил нужные атрибуты, а соседние карточки не получили неверные подключения.

Как связаны srcset и sizes

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

В sizes описывают предполагаемую ширину места, которое займёт изображение. Это подсказка для выбора файла, а не команда изменить вёрстку. За реальный размер по-прежнему отвечает CSS. Когда подсказка и макет расходятся, браузер может выбрать избыточный или недостаточный вариант.

Ниже учебный пример для изображения, которое занимает ширину окна. Числа и пути иллюстрируют устройство записи; перед использованием их заменяют размерами и адресами своих файлов. Для карточки внутри колонки значение 100vw обычно не описывает реальное место.

В примере контейнер занимает всю ширину окна без боковых полей. Для изображения в CSS заданы width: 100% и height: auto. Без этих условий sizes='100vw' не описывает произвольный блок, а атрибуты width и height сами по себе не делают картинку адаптивной.

<img src='/media/photo-960.jpg' srcset='/media/photo-480.jpg 480w, /media/photo-960.jpg 960w' sizes='100vw' width='960' height='640' alt='Мастер собирает деревянную раму'>

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

Другой способ описания вариантов — плотность пикселей через x. Его используют для изображения с предсказуемым размером отображения. Не смешивайте описатели w и x в одном наборе. Выберите схему под задачу и проверьте, что размеры файлов соответствуют её смыслу.

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

Когда нужен picture

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

В picture задают элементы source с условиями, а затем размещают img. Браузер рассматривает подходящие источники; img остаётся частью конструкции и предоставляет базовый вариант. Не оставляйте внутри только source и не рассчитывайте, что описание картинки получится из имени файла.

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

CSS-обрезка через object-fit меняет отображение уже выбранного изображения. Она может помочь вписать фотографию в рамку, но сама по себе не подготавливает облегчённый файл и не заменяет выбор источника. Для каждого способа проверьте, где остаётся важный объект и сколько данных получает браузер.

Как проверить выбор без догадок

Откройте инструменты разработчика и найдите загрузку нужного изображения. Сравните полный адрес ресурса с вариантами в разметке. У элемента img свойство currentSrc показывает адрес источника, выбранного браузером. Оно помогает понять выбор, но само наличие адреса ещё не подтверждает успешную загрузку.

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

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

Отдельно откройте страницу на телефоне. Посмотрите на мелкие детали, лицо, предмет или схему, ради которых вставлена картинка. Удачный вес файла не компенсирует потерю смысла. Если изображение содержит важную инструкцию, проверьте, можно ли прочитать её в доступном представлении.

Частые ошибки

• В набор добавлен один файл под разными адресами. Сверьте реальные размеры и содержимое экспортов. Несколько строк в srcset ещё не создают разные варианты.
• Ширина окна подставлена вместо ширины карточки. Учтите сетку и поля, затем исправьте подсказку о месте изображения.
• Варианты разрешения имеют разный кадр. При смене источника может неожиданно исчезнуть предмет. Для намеренной смены композиции задайте понятные условия.
• Все картинки получили максимальный исходник. Проверьте, существуют ли меньшие варианты и правильно ли они описаны.
• Редактор CMS удалил атрибуты. После сохранения сравните опубликованную разметку с подготовленной, не ограничиваясь видом в форме редактирования.
• Имена файлов обещают размеры, которых нет. Ориентируйтесь на реальные свойства экспортированного изображения.

Как проверить

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

Механизм описан в руководстве MDN по адаптивным изображениям и объяснении srcset и sizes на web.dev. Отдельно можно сверить устройство picture и свойство currentSrc.

Для подготовки файлов пригодится сравнение форматов изображений, для проверки макета — инструкция сайт на телефоне, для повторных загрузок — материал кеширование файлов. Изменение шаблона можно поручить исполнителю через раздел Разработка.

Когда изображений несколько, инструкция по галерее изображений поможет связать миниатюры с крупными снимками и проверить управление просмотром.

Вопросы и ответы

Достаточно ли задать картинке ширину через CSS?

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

Нужен ли picture каждой картинке?

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

Почему на узком экране всё равно загружается большой файл?

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

Нужно ли создавать варианты из маленького исходника?

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

Может ли sizes заменить правило ширины в CSS?

Нет. Этот атрибут сообщает браузеру предполагаемую ширину места при выборе источника. Сам макет задаётся стилями. Если они расходятся с подсказкой, исправьте согласование и повторите проверку.

Что проверять после загрузки изображений через CMS?

Сверьте адреса созданных вариантов, их реальные размеры и опубликованные атрибуты. Затем проверьте выбранный источник на разных экранах. Наличие миниатюр в файловом хранилище ещё не означает, что шаблон использует их.

Показывает ли currentSrc, что картинка успешно открылась?

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