Отзывчивый веб-дизайн и генерация отзывчивых изображений

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

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

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

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

Контрольные точки (breakpoints, брейкпоинты) в отзывчивом веб-дизайне — это определенные фиксированные значения разрешения экрана устройства, при которых требуется изменить поведение шаблона сайта. Например, когда экран устройства настолько мал, что не вмешает все элементы страницы в одну строку, с помощью контрольной точки, равной его ширине, можно сделать так, чтобы элементы разместились друг под другом.

Благодаря тому, что в отзывчивом веб-дизайне используется «резиновая» верстка с относительными (в процентах) размерами элементов, количество необходимых контрольных точек может быть сравнительно небольшим: новая точка создается лишь тогда, когда при определенном разрешении экрана содержимое страницы перестает удобно восприниматься. Контрольные точки применяются как для управления поведением текстовых элементов страниц сайта, так и для управления загрузкой отзывчивых изображений.

Генерация отзывчивых изображений по контрольным точкам позволяет снизить количество используемых для «реагирования» на разные варианты разрешения экрана файлов с изображениями. Но сколько же именно следует создавать изображений и какими будут оптимальные контрольные точки в каждом конкретном случае? Ответ на эти вопросы взялись предложить разработчики веб-сервиса Responsive Image Breakpoints Generator (www.responsivebreakpoints.com).

Responsive Image Breakpoints Generator – open source проект для автоматической генерации отзывчивых изображений по брейкпоинтам. Инструментарий этого сервиса позволяет задать желаемый диапазон изменения разрешения генерируемых изображений, указать максимальное количество генерируемых изображений, а также изменить исходное соотношение сторон при необходимости. Чтобы воспользоваться сервисом, достаточно выполнить настройки параметров при помощи «ползунков», загрузить оптимизируемое изображение и нажать кнопку Generate.

Результатом работы сервиса (все вычисления, кстати, происходят в облаке Cloudinary) становится генерация необходимого количества изображений в соответствии с оптимальными контрольными точками, при этом готовые изображения доступны для загрузки в виде архива. Дополнительно Responsive Image Breakpoints Generator создает образец HTML 5 кода для вставки созданных изображений на сайт.

Код генерируется для тэга img со специальными атрибутами sizes и srcset. Данные атрибуты позволяют указать сразу несколько вариантов изображений для разных контрольных точек в одном элементе img. Приведем пример кода, генерируемого в Responsive Image Breakpoints Generator:

&lt,img sizes='(max-width: 1000px) 100vw, 1000px’ srcset=’image_c_scale,w_200.jpg 200w, image_c_scale,w_488.jpg 488w, image_c_scale,w_1000.jpg 1000w’ src=’/image_c_scale,w_1000.jpg’ alt=»&gt,

В данном примере сервисом сгенерировано 3 изображения для трех контрольных точек — 200 пикселей, 488 пикселей и 1000 пикселей. Максимальное разрешение в данном случае равно 1000 пикселей, ширина изображения равна 100% ширины экрана устройства. При этом для браузеров, не поддерживающих HTML 5, будет использовано изображение, указанное в атрибуте src — то, что максимальной шириной.

Использование сервиса Responsive Image Breakpoints Generator позволяет значительно упростить задачу веб-разработчиков по подготовке изображений для отзывчивого веб-дизайна. При этом стоит дополнительно отметить, что данный сервис дает возможность не только статической вставки сгенерированных изображений, но также и динамической генерации через Cloudinary’s API, например, для тех случаев, когда требуется обработка загружаемых пользователям изображений.

Теги:
отзывчивый веб-дизайн, отзывчивые изображения, генерация отзывчивых изображений, responsive image breakpoints generator

Источник