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

Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким 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 и в более ранних его версиях, но во всех современных браузерах поддержка уже есть, поэтому данный способ в современной разработке является предпочтительным.

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

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

На «широких» каналах размер изображений на сайте на скорость загрузки сайта влияет не очень сильно, но для пользователей, просматривающих сайт через мобильный интернет (EDGE или 3G), большие изображения могут быть проблемой. На посещаемых сайтах также могут быть сложности с загрузкой канала сервера — неоптимизированные изображения могут существенно сказываться на объёме трафика (это проблема, если он платный) или просто «забивать» канал.

Узнать больше →

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

Cтатьи по теме:

Адаптивный и отзывчивый дизайн
​Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн. Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.
Язык разметки HTML, таблицы стилей CSS и язык JavaScript
Содержание и внешний вид каждой страницы сайта определяется HTML-кодом и содержанием таблицы стилей CSS, а поведение интерфейса — скриптами JavaScript.
Ускоряем работу сайта за счёт оптимизации CSS
Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.
Чек-лист проверки фронтенда
По данному списку можно проверить фронтенд сайта или веб-приложения для выявления и последующего исправления ошибок или недочётов.
JPEG и PNG — в чём разница форматов?
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG.
Сжатие изображений с потерями и без потерь
Сжатие изображений — это один из способов ускорения загрузки сайта. Сделать изображения более «легкими» можно как уменьшив их физический размер в пикселях, так и путём оптимизации параметров сохранения.
БЭМ и независимые блоки
Вёрстка независимыми блоками — это методология, которая была сформулирована Виталием Харисовым из компании Яндекс. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.

Тематические технологии:

CSS — каскадные таблицы стилей
Система сборки WebPack
SASS
Язык разметки HTML
Язык программирования JavaScript
Библиотека React
Библиотека MobX
Библиотека MobX State Tree