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

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

Лучший способ понять адаптивные изображения — это быстрый пример. Для простоты загрузим изображение шириной 2200 пикселей на разные устройства. Все остальное остается прежним, кроме размера области просмотра.

HTML код будет такой:

<!-- The width of original image is 2200px -->
<img src="image.jpg" />

Для настольных компьютеров (iMac) изображение является оптимальным, поскольку ширина области просмотра и изображения совпадают.

Однако на мобильных устройствах ширина области просмотра составляет всего 375 CSS-пикселей. То же самое и с планшетом. Ширина области просмотра составляет всего 1024 пикселя CSS. Мы тратим время и трафик на загрузку этого слишком большого файла. Что в свою очередь тормозит работу сайта и дополнительно нагружает устройство.

Для чего нужны адаптивные изображения?

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

Вот три основные причины, по которым нам нужно реализовать адаптивные изображения:

• Рендеринг качественного изображения на разных устройствах
• Загрузка правильного изображения
• Более быстрая загрузка веб-страниц

Рендеринг качественного изображения на разных устройствах.

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

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

Если ваш макет изменяется в зависимости от области просмотра устройства, размер загруженного изображения должен соответствовать ширине контейнера CSS / HTML. Если браузер растягивает меньшее изображение для соответствия дизайну, визуализированное изображение будет выглядеть размытым, а если вы загрузите большее изображение на устройство с небольшой шириной области просмотра, это приведет к потере времени.

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

Это означает, что если мы хотим визуализировать изображение шириной 100 пикселей, нам нужно будет загрузить изображение шириной в 200 или 300 пикселей (в зависимости от устроства), чтобы оно выглядело резким.

Однако обратите внимание, что это не всегда означает, что мы должны загружать файл большого размера. На устройстве с DPR (соотношение пикселей устройства) 2 изображение шириной 2x с низким качеством (50) будет выглядеть лучше, чем изображение шириной 1x с высоким качеством (90). Несмотря на то, что размер файла схож по размеру, изображение 2x будет более резким. 

Загрузка правильного изображения

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

С помощью «художественного направления» вы можете явно решить, какое изображение следует показывать, в зависимости от размера изображения на странице. 

Более быстрая загрузка веб-страниц.

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

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

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

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

Вы всегда можете использовать следующую конструкцию:

<img src="image.jpg"
     srcset="image_small.jpg 360w,
             image_medium.jpg 720w,
             image.jpg 1400w"
/>

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

Каждый элемент, разделенный запятыми в srcset содержит:

• URL изображения
• Пробел
• Фактическую ширину изображения или плотность отображения: либо с использованием дескриптора плотности отображения, например, 1.5x и 2x т.д., или, используя дескрипторы ширины, например 450w. Это ширина изображения в пикселях.

Использование дескриптора плотности отображения

Синтаксис дескрипторов плотности отображения прост. Srcset предоставляет разделенный запятыми список ресурсов изображения вместе с плотностью отображения, которую следует использовать, например 1x, 2xи т. д.

<img src="image.jpg"
     srcset="image.jpg,
             image_2x.jpg 2x"
/>

Если дескриптор плотности отображения не указан, предполагается, что он 1x.

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

Использование дескриптора ширины

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

<img src="image.jpg"
     srcset="small.jpg 300w,
             medium.jpg 600w,
             image.jpg 900w"
/>

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

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

Например, если изображение занимает всю ширину области просмотра — на экране шириной 300 пикселей с DPR 2 браузер выберет, medium.jpg потому что ему требуется изображение шириной 300×2 = 600 пикселей. На экране шириной 300 пикселей со значением DPR 3 браузер выберет, large.jpg потому что ему требуется изображение шириной 300×3 = 900 пикселей.

Помните – вы не можете использовать дескрипторы ширины и плотности одновременно. В соответствии со спецификациями srcset — если в строке изображения для элемента указан дескриптор ширины, для всех других строк для этого элемента также должен быть указан дескриптор ширины. Кроме того, если у элемента присутствует атрибут размера, все строки изображения для этого элемента должны иметь указанный дескриптор ширины.

Подводя итоги

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

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

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне