Адаптивные изображения — как браузер выбирает файл

Что такое адаптивные изображения

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

Ширина изображения на странице и ширина загруженного оригинала — разные величины. Если браузер показывает картинку шириной 360 пикселей, он всё равно может скачать оригинал шириной 2000 пикселей. Адаптивные изображения дают ему возможность выбирать из нескольких подготовленных размеров.

Как работает адаптивное изображение

Браузеру нужны варианты изображения и сведения о том, сколько места оно займёт. Эти данные указывают в HTML, то есть в разметке страницы. Для одного фото разработчик может подготовить копии шириной 400, 800 и 1200 пикселей.

• srcset перечисляет варианты. Рядом с адресом каждой копии указывают её ширину. Браузер видит, какие версии доступны.
• sizes сообщает, сколько места займёт изображение. Например, в узком окне оно занимает всю доступную ширину, а в широком — половину.
• Браузер выбирает копию. На выбор влияет и плотность пикселей дисплея. Телефон с чётким дисплеем может использовать более широкую копию, чем ширина карточки в разметке.

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

Когда менять размер, а когда менять кадр

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

Адаптивный размер	Адаптивный кадр
Что меняется. Ширина и высота копии.	Что меняется. Часть снимка, которая попадает в кадр.
Пример. То же фото товара в трёх разрешениях.	Пример. На телефоне у баннера обрезаны края, а товар остаётся в центре.
Как задать. Перечислить размеры в srcset и указать место под картинку в sizes.	Как задать. В элементе picture указать отдельный кадр для нужной ширины.

Перед выбором посмотрите на изображение в его реальном размере.

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

Как проверить адаптивные изображения

Проверьте отдельно что видит человек и какая копия загрузилась. На странице может всё выглядеть аккуратно, хотя по сети скачивается тяжёлый исходник.

1. Откройте страницу на телефоне. Убедитесь, что товар или важная деталь видны целиком.
2. Посмотрите загрузку в браузере. На компьютере откройте инструменты разработчика и вкладку «Сеть», затем обновите страницу в режиме телефона. Найдите запрос изображения и проверьте имя и размер скачанной копии.
3. Сравните с широким окном. Снова обновите страницу и проверьте, что крупное изображение сохраняет детали. При проверке можно отключить кеш во вкладке «Сеть», чтобы браузер не использовал копию, скачанную раньше.

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

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