Использование адаптивных изображений в веб‑разработке

Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI (например, под Retina‑дисплеи) для более детализированного отображения.

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

Самый простой способ реализации адаптивных изображений

В самом простом случае для реализации адаптивности изображений достаточно использовать изображения, которые либо такого же размера, как и максимальный размер области, которую они будут занимать, если нам адаптация под Retina‑дисплеи не нужна; либо в два‑три раза больше этой области, если нужна адаптация под экраны с высоким DPI.

Сами изображения в этом случае пропорционально масштабируются средствами CSS в сторону уменьшения.

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

Реализация адаптивных изображений с JS‑обработкой на фронтенде

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

Реализуется метод обычно при помощи события JavaScript, которое инициируется при загрузке страницы и которое «подставляет» в src‑атрибут изображений ссылку, полученную из исходной ссылки (обычно хранимой в data‑атрибуте тега img) путём добавления в параметры для загрузки нужных данных об экране.

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

Также в некоторых случаях кроме разрешения экрана стоит учитывать ещё и скорость подключения к сети интернет (например, не стоит передавать изображения в высоком разрешении на iPhone с Retina‑дисплеем, если этот смартфон использует EDGE для соединения с интернетом).

Реализация адаптивных изображений с обработкой на бэкенде

При первом запросе клиента можно «запомнить» параметры его экрана и при генерации страниц сразу подставлять «правильные» ссылки на изображения. Для инициализации тут тоже часто требуется JS, хотя для определения устройства можно использовать и заголовки запроса (сведения о User Agent часто позволяют идентифицировать устройство). Реализация, построенная на заголовках запросов, уже совсем не зависит от JS и корректно работает в любых браузерах, хотя в настройке она несколько сложнее.

Современный и наиболее правильный способ работы с адаптивными изображениями

Описанные выше способы применялись (и до сих пор применяются) во многом из‑за того, что нормальной поддерживаемой альтернативы браузеры не предоставляли. Теперь всё стало значительно лучше. В HTML5 у изображений появились атрибуты srcset и sizes, позволяющие задавать несколько ссылок на изображения, а также появился тег picture, который дал еще больше возможностей.

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