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

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

Пример использования атрибутов 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 нового элемента.

Выбор картинок при помощи атрибутов

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

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

Добавить комментарий

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