В этой пятой части нашей серии « Понимание адаптивного веб-дизайна » я покажу вам одну из типичных проблем, с которыми сталкивается веб-дизайнер при создании адаптивного веб-сайта: управление изображениями. Как вы уже видели, проблем, с которыми сталкивается мобильный дизайнер, множество, и не так уж странно и необычно думать, что одним из самых больших является предоставление нескольких форматов изображений для разных размеров экрана. В настоящее время существует три стратегии, которые разработчик может выбрать, когда речь заходит об адаптивных изображениях: он может выбирать между: «борьбой» с браузером, «уходом в отставку» или опорой на сервер. Давайте попробуем понять преимущества и недостатки каждого варианта.
Борьба с браузером
Большинство разработчиков переднего плана предпочитают применять первую стратегию и бороться с браузером. Что означает «борьба с браузером»? Это означает делать все возможное, чтобы передать «правильное» изображение (то есть изображение, которое имеет правильный размер для устройства, используемого для просмотра веб-сайта) в браузер, чтобы его можно было загрузить до того, как браузер загрузит «неправильное» один (то есть, «по умолчанию» или настольная версия изображения). Это становится все более сложной задачей, поскольку современные браузеры и постоянно растущая пропускная способность означают, что пользователи пытаются загружать изображения как можно быстрее.
Переоформление
Иногда самой простой и удобной стратегией является единственный жизнеспособный вариант: признать поражение. Как правило, этот подход включает загрузку изображения по умолчанию на маленькие экраны и, во-вторых, при необходимости, загрузку большего изображения для экранов с большими размерами. Хотя этот метод прост и понятен, он не рекомендуется, поскольку во втором случае в браузер отправляются два запроса, когда необходим только один.
Опираясь на сервер
Третья стратегия включает в себя использование сервера, языка программирования на стороне сервера и некоторых основных форм обнаружения, чтобы определить, какое изображение загрузить. Вся логика выполняется до того, как браузер сможет увидеть и интерпретировать HTML-код. К сожалению, у этой стратегии есть свои недостатки: поддержание постоянно растущего списка мобильных устройств и размеров экрана станет очень сложным и потребует постоянного обслуживания.
Чтобы помочь вам лучше понять, что делает этот метод и как его можно использовать, давайте рассмотрим пример. В следующем примере я покажу вам несколько строк PHP, но не волнуйтесь, вам не нужен эксперт по PHP для создания адаптивных изображений, и вы поймете пример, даже если у вас нет раньше работал с PHP. Давайте предположим, что вы создаете страницу динамически и вводите тег <img>
echo '<img src="heavy-image.png" />';
Как вы, возможно, уже знаете, мобильные соединения не так быстры, как их настольные аналоги. Итак, чтобы ускорить рендеринг вашей страницы для мобильных устройств, вы хотели бы добавить облегченную версию изображения, если пользователь использует … возможно, iPhone. Что вы можете сделать на стороне сервера, так это проверить пользовательский агент, который сделал запрос, и — если устройство было iPhone — внедрить изображение меньшего размера. Следующий фрагмент демонстрирует эту технику:
if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') === false) {
// Not an iPhone
echo '<img src="heavy-image.png" />;
}
else {
// An iPhone
echo '<img src="light-image.png" />;
}
Как видите, метод очень прост в реализации, однако этот подход не очень надежен, потому что сама информация пользовательского агента не на 100% надежна. Если метод потерпит неудачу, у вас могут возникнуть серьезные проблемы с изображениями.
Один метод лучше, чем другие?
Очевидно, что каждый подход имеет свои уникальные преимущества и ограничения, и вряд ли один метод будет идеальным выбором для всех ваших мобильных проектов. Однако есть некоторые дополнительные методы и ресурсы, которые разработчик может использовать для создания адаптивных изображений.
Sencha.io Src
Первый вариант очень быстрый и простой. Это сервис, разработанный Джеймсом Пирсом, который возвращает изображение, которое вы выбираете для загрузки, с измененными размерами в соответствии с вашими потребностями. Его зовут Sencha.io Src, и все, что вам нужно сделать, это указать URL-адрес Sencha.io Src вашего изображения в качестве источника изображения.
<img src="http://src.sencha.io/http://mysite.com/images/my-image.jpg" />
Сервис использует строку пользовательского агента запрашивающего устройства, чтобы определить желаемый размер изображения и соответственно изменить его размер. По умолчанию изображение масштабируется до 100% ширины экрана. Sencha.io Src имеет высокий уровень настройки; Можно установить определенную ширину или любой другой параметр. Например, если вы хотите установить ширину изображения в 250 пикселей, вам просто нужно добавить размер в URL следующим образом:
<img src="http://src.sencha.io/250/http://mysite.com/images/my-image.jpg" />
Сервис также кэширует запрос, поэтому изображение не будет перезагружаться при каждой загрузке страницы.
Адаптивные изображения
Аналогичное решение предложено Мэттом Уилкоксом. Это включает в себя определение размера экрана, а затем создание (и кэширование) масштабированной версии правильных размеров изображения. Это идеальная техника, чтобы сделать изображения существующего сайта адаптивными. После загрузки кода (который вы можете найти на adaptive-images.com ), чтобы это решение работало и работало правильно, вам необходимо выполнить три простых шага:
- Добавьте два файла, .htaccess и adaptive-images.php , в корневую папку;
- Создать кеш-папку и разрешить запись;
- Добавьте следующую строку кода Javascript в начале вашего документа:
[sourcecode language = ”JavaScript”] <script> document.cookie = ‘resolution =’ + Math.max (screen.width, screen.height) + ‘; путь = / ‘; </ скрипт> [/ Исходный код]
Благодаря этой одной строке кода разрешение экрана фиксируется и сохраняется в файле cookie браузера. Можно настроить несколько параметров в файле adaptive-images.php, но основная цель этого файла — установка переменных для разрешений ( $resolutions
$resolutions = array (800, 480, 320);
Эти разрешения являются «точками останова» изображений на основе разрешения экрана (ширина, измеряемая в пикселях). В этом случае этот инструмент будет выдавать небольшое мобильное изображение для устройств с шириной пикселя 320 или меньше. Если дисплей превышает 320 пикселей, новое опорное значение равно 480, который является следующим численным значением в массиве выше.
После создания изображения будут храниться в папке кэша (где вы можете изменить имя файла), так что вам больше не нужно будет их генерировать.
В дополнение к тому, что я показал, я хочу подчеркнуть, что ключевой момент обсуждения адаптивных изображений касается их размера. Это, безусловно, важный фактор, но мы часто забываем, что он не единственный. Например, изменение размера изображения для небольших дисплеев часто уменьшает влияние и распознавание изображения. В этих случаях может потребоваться изменить изображение. Даже простая обрезка краев или лишних элементов может помочь изображению сохранить свое влияние и значимость при меньшем размере.
Вывод
В этой статье я описал три способа работы с изображениями с точки зрения адаптивного дизайна. Во-первых, это борьба с браузером, то есть все возможное, чтобы дать браузеру «правильное» изображение для загрузки. Второй — это выбор сервисов, таких как Sencha.io, которые используют строку пользовательского агента устройства, с которого отправляется запрос, чтобы понять размер экрана и соответственно изменить размер изображения. Последнее относится к адаптивным изображениям — в этом случае разработчику нужно только определить размер экрана, и изображение будет масштабировано для размещения.
В заключение, между тремя подходами, рассмотренными выше, один из адаптивных изображений, вероятно, является лучшим решением, поскольку он не требует зависимости от другого сайта или ссылки. В следующих статьях серии мы рассмотрим другие методы, которые разработчик может использовать для управления всеми изображениями адаптивного веб-сайта.
Хотите узнать больше о адаптивном веб-дизайне? Ознакомьтесь с новой книгой SitePoint « Адаптивный веб-дизайн Jump Start» !