Адаптивная верстка изображений: проблемы и возможные способы их решения

Адаптивная верстка изображений под современные девайсы, которые имеют так называемые «ретина»-мониторы с повышенной плотностью пикселей.

Адаптивная верстка изображений: проблемы и возможные способы их решения

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

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

Традиционный метод с использованием только свойств CSS

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

Простой пример: предположим, вы хотите, чтобы ваш логотип размером 250 x 250 px правильно отображался на экране с двойной плотностью пикселей. В таком случае вам нужно создать другое изображение с логотипом, большее желаемого размера на экране в два раза, т.е. 500 x 500 px.

Теперь необходимо решить основную задачу — как сделать так, чтобы отображение картинки всегда оставалось одинаковым, т. е. ее размер всегда был 250 x 250 px?

Возможно, кому-то в голову сразу же пришла идея написать простой CSS код, что-нибудь наподобие этого:

img {
max-width: 250px;
}

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

div img {
max-width: 250px;
}

Каковы недостатки этого метода?

Если использовать данный способ верстки для небольших изображений, вроде логотипов или иконок, скорее всего, вы не столкнетесь с проблемами. Однако для больших иллюстраций этот метод не подходит. Разве вам нравится загружать огромные изображения специально для «ретина» устройств, которые даже не смогут отобразить все детали вашей иллюстрации?!

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

К слову, если вы хотите немного менять дизайн сайта в зависимости от скорости соединения на стороне клиента, вы можете использовать специальную утилиту Foresight.js от Adam Bradley, которая измеряет скорость загрузки 50К изображения.

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

Есть ли альтернатива?

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

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

Современный разработчики создали достаточно большое количество скриптов, выполняющих подобные функции. В качестве примера можно привести специальный Jquery скрипт HiSRC, разработанный Marc Grabanski и Christopher Schmitt, который позволяет загружать один вариант из трех для каждого изображения в зависимости от типа устройства пользователя и скорости Интернета-соединения.

В общем виде HTML-разметка для этого скрипта выглядит так:

<img class="hisrc" src="your_path" alt="" data-1x="your_path_1x" data-2x="your_path_2x" />

В атрибуте src необходимо указать путь до файла с изображением, которое грузится в первую очередь, как правило, самого низкого качества. После загрузки страницы скрипт проверит скорость Интернет-соединения и тип экрана устройства, с которого посетитель зашел на сайт. Если позволяет скорость Интернета, и устройство поддерживает "ретина"-изображения, будет загружена картинка, расположенная по адресу, указанному в атрибуте data-2x, если девайс поддерживает обычные изображения, будет загружена картинка по адресу в атрибуте data-1x, и если не позволяет скорость Интернета, то никаких изменений не будет производиться. Специальный класс, добавленный для изображения, будет указывать скрипту, что с этим элементом DOM необходимо произвести определенные преобразования.

Сам скрипт подключается путем добавления кода:

$(document).ready(function(){
$(".hisrc").hisrc();
});

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

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

Интересный способ создания адаптивных изображений предлагает сервис Sencha.io Src (на момент написания статьи еще функционирует), который вообще не требует никаких настроек на сервере. Сервис работает по принципу прокси.

<img src="http://src.sencha.io/http://igorek.info/path/to/image.jpg" alt="My image" />

Просто вставьте префикс http://src.sencha.io/ перед адресом вашего изображения в атрибуте src, и всю остальную нагрузку на себя возьмет Sencha.io Src. Это бесплатный сервис, позволяющий решить большинство проблем современного веб дизайнера.

К недостаткам сервиса можно отнести то, что, используя его, вы ставите себя в зависимость от функционирования постороннего ресурса, любые сбои в его работе отразятся на вашем сайте, так что я НЕ РЕКОМЕНДУЮ его использовать, да и не только его, а вообще любые сторонние сервисы.

Заключение

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