Выбор изображений с помощью атрибутов

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

Содержание

Пример использования атрибутов srcset и sizes

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

Пример изображения, которое использует атрибуты srcset  и sizes:

<img src="imgs/bike.jpg"
srcset="imgs/bike.jpg 480w, imgs/bike-1200.jpg 1200w, imgs/bike-2000.jpg 2000w" 
     sizes="100vw" 
     alt="A red bicycle">

В примере задано три источника изображения в зависимости от размера области просмотра: шириной 480px, 1200px и 2000px.

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

Атрибут sizes также позволяет определять размеры выводимого изображения в зависимости от медиазапросов. Например, ширина изображения может быть указана в 100vw,а область просмотра — меньше 40em. Ширина изображения в 600px при размерах окна больше чем 40em:

<img src="imgs/bike.jpg"
srcset="imgs/bike.jpg 480w, imgs/bike-1200.jpg 1200w, imgs/bike-2000.jpg 2000w" 
     sizes="(min-width:40em) 600px, 100vw" 
     alt="A red bicycle">

Эти условия можно использовать для создания более сложных сценариев.

Больше свободы атрибуту sizes

Для браузера атрибут sizes имеет большее значение, чем фактический размер изображения. Другими словами, sizes позволяет «солгать» о размере рисунка.

Рассмотрим первый пример. Атрибут sizes имеет значение 100vw. Поэтому если ширина области просмотра составляет 400px, то браузер выберет наименьшее из доступных изображений (imgs/bike.jpg).

<img src="imgs/bike.jpg"
 srcset="imgs/bike.jpg 480w, imgs/bike-1200.jpg 1200w, imgs/bike-2000.jpg 2000w" 
     sizes="100vw" 
     alt="A red bicycle">

Но если изменить значение атрибута sizes на 200vw, браузер выберет источник, размеры которого соответствуют размеру изображения при ширине области просмотра в 200%.

Браузер выберет вариант с шириной 1200px.  Даже в том случае, если его размеры будут изменены с помощью CSS.

<img src="imgs/bike.jpg"
srcset="imgs/bike.jpg 480w, imgs/bike-1200.jpg 1200w, imgs/bike-2000.jpg 2000w" 
     sizes="200vw" 
     alt="A red bicycle">

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

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

Демонстрация сказанного

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

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

Например, если значение увеличения изображения равно 5х, а ширина изображения составляет 200px, то при увеличении скрипт переключит атрибут sizes на sizes=»1000px». После чего браузер найдет новый подходящий источник из списка источников srcset.

Кнопка Zoom

После возвращения изображения к нормальному размеру JavaScript присвоит атрибуту sizes  прежнее значение.

Во втором примере реализован инструмент «лупа», который срабатывает при наведении курсора мышки на изображение. В данном случае JavaScript дублирует элемент исходного изображения, чтобы поместить его в другой элемент и получить источник с более высоким разрешением. Для этого он умножает значение атрибута sizes нового элемента.

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

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

Данная публикация представляет собой перевод статьи «Swapping Images with the Sizes Attribute» , подготовленной дружной командой проекта Интернет-технологии.ру