—»     —»   Адаптивные изображения: решаем проблему с изображениями в адаптивном дизайне
  Раздел: Обработка изображений   Комментариев: 1  

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

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

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

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

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

Адаптивные изображения: решаем проблему с изображениями в адаптивном дизайне
Вебсайт The Boston Globe – это классический пример гибкого дизайна


Перед тем, как продолжить, нам нужно поговорить о поведении веб-страницы, о том, как она работает. Вкратце: HTML загружается постепенно, затем подгружаются ресурсы в том порядке, в котором они прописаны в коде, затем немедленно запускаются скрипты, а затем посылаются cookies посредством HTTP-запросов.

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

Заменяли атрибут src

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

Можно ли как-то обойти эту проблему? На самом деле, можно!

Существует метод, которым пользуются многие люди, когда в качестве исходного изображения помещается «затычка» в формате gif и размером в 1 пиксель. Таким образом, вместо загрузки двух изображений, загружается одно, но это также не является идеальным вариантом. В данном случае получается так, что вы делаете 2 HTTP-запроса.

Это также означает, что все изображения вы отдаете на «попечение» javascript. Это немного опасно, так как мобильные устройства могут плохо сочетаться с javascript, некоторые другие элементы могут быть несовместимыми с JS, а также стоит учитывать то удивительное число веб-пользователей, которые отключают поддержку javascript.

Noscript

Еще один метод, набравший популярность, заключается в использовании тэга noscript для мобильных изображений, а затем использовать js для того, чтобы заменить их изображениями нормального расширения. Этот метод очень быстро распространился по дизайн-сообществу ввиду возможности переключаться с изображений для мобильных версий на полноформатные большие изображения. А также этот подход довольно отражает то неправильное восприятие требований к адаптации под мобильные устройства, о котором мы говорили выше. К тому же, этот трюк не срабатывает в IE. Что касается Internet Explorer, то там вам придется дописать следующее:

<script><!--mce:0--></script>
<img src=""mobile.jpg"" alt="" /> <!----->

Но проблема заключается в том, что теперь этот трюк уже не будет работать и в таком популярном браузере как Firefox. И нам придется сделать следующее:

<script><!--mce:1--></script>
<noscript>
<img src=""mobile.jpg"" alt="" />
</noscript>

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

В целом, они просто использовали javascript для того, чтобы обойти стороной эту проблему, и допустили использование «зла во благо» в виде двойного HTTP-запроса.

Решение на стороне сервера?

Решение данной проблемы со стороны сервера заключается в использовании javascript для того, чтобы заменить src на HTML5 -data-highsrc, и сохранять размер окна браузера в cookie. Правда, затем он посылает всё те же HTTP-запросы.

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

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

И именно здесь к нам на помощь приходит метод с использованием адаптивных изображений.

Метод адаптивных изображений

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

Адаптивные изображения – это настоящее решение всей этой вереницы. Здесь всё настолько просто, будто вы просто «кидаете» решение на ваш сервер, и всё становится хорошо! Этот метод использует файл htaccess, один php-файл и одну строку кода javascript. Всё.

Вы просто кидаете файлы htaccess и php в корневой каталог вашего сайта, и добавляете javascript в головную секцию файла вашей главной страницы сайта. Готово! Больше не о чем беспокоиться. Этот метод предлагает вам огромное множество настроек, но мы не будем сегодня окунаться в это все с головой.

Сейчас давайте с самого начала познакомимся с методом адаптивных изображений.

Цели

Для начала давайте определим цели проекта. Создатель адаптивных изображений, Мэтью Уилкокс (Matthew Wilcox), определил следующее в качестве целей для достижения решения:

* Они должны быть простыми в настройке и использовании.
* Должны требовать как можно меньше усилий для поддержки.
* Должны отлично вписываться в существующий контент, не требовать дополнительной разметки или отдельной CMS.
* Должны допускать обновление версий.
* Должны работать с breakpoint’ами дизайна, а не устройства.
* Должны позволять без труда заменить их новым решением, когда оно будет открыто.

И все эти цели проекта были основаны при учете, что

<img src="#" alt="" />

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

Как это работает

Мы уже почти дошли до кода, но сначала давайте поговорим о том, как это работает, более подробно. Вкратце, javascript определяет самое большое доступное разрешение экрана устройства, и записывает это в cookie. Файл .htaccess далее делает конкретный запрос к adaptive-images.php, а затем, основываясь на тех правилах, PHP-файл выполняет обработку. В процессе этой обработки, как раз, и происходит вся магия, и поэтому мы настоятельно рекомендуем всем, кто читает эту статью, ознакомиться с PHP-файлом. Это самый красивый PHP-код, который мы встречали за последние несколько лет. Его обязательно стоит увидеть.

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

javascript-код

Код javascript, который вам нужно будет скопировать, выглядит следующим образом:

<script>document.cookie='resolution=
'+Math.max(screen.width,screen.height)+'; path=/';</script>

И этот код должен быть размещен выше любого другого, присутствующего в головном разделе кода вашей страницы. Также стоит отметить, что если вы хотите извлечь преимущество экрана retina, которым оснащены все современные устройства Apple, то можете воспользоваться следующей строкой кода javascript:

<script>document.cookie='resolution=
'+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>

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

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

Файл .htaccess

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

<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On

# Adaptive-Images ----------------------------------------

# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory

RewriteCond %{REQUEST_URI} !assets

# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php

# END Adaptive-Images ----------------------------------------
</IfModule>

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

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

PHP-файл

Всё, что вам нужно будет сделать с этим файлом, это кинуть его в корневой каталог вашего сайта, и он сделает всю работу за вас. Как видно, в нем есть небольшой раздел настроек:

/* CONFIG ------------------------------ */

$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)
$cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!
$jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100
$sharpen = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
$watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)
$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)

/* END CONFIG ------ Don't edit anything after this line unless you know what you're doing -------------- */

Относительно всего остального кода скрипта можно сказать разве что «если вы не знаете, что это такое, то почему бы не оставить это всё в покое, пока работает»?

$resolutions отвечает за размеры экранов, с которыми мы будем работать. По умолчанию он будет удерживать измененные в размере изображения для больших экранов, нормальных экранов, планшетов, телефонов и маленьких мобильных устройств.

$cache_path – если вам не хочется сохранять кэшированные изображения в эту папку, вы можете указать другую. Просто укажите путь до папки, и не забудьте создать её на сервере.

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

$watch_cache – если ваш сервер загружен, данная функция может улучшить производительность, если поставить значение False. Правда, это означает, что вам придется очистить директорию с кэшем вручную.

Теперь вы хоть немного знаете о настройках, и давайте поговорим о том, что конкретно делает PHP-файл. Итак, пойдем поэтапно:

* Считывает cookie и «подгоняет» результат под breakpoint’ы, которые совпадают с breakpoint’ами в CSS.
* Проверяет собственную директорию кэша на предмет наличия версии запрошенных файлов для данного размера breakpoint’а.
* Если да, то производится сравнение дат с оригиналом, чтобы убедиться в том, что версия в кэше не устарела.
* Если кэшированного изображения не существует, то будет создано измененное в размере изображение (только в том случае, если исходное изображение больше размера breakpoint’а). Затем версия кэшируется для дальнейшего использования.

Файл ai-cookie.php

В архиве также можно встретить файл ai-cookie.php, но его можно удалить, так как он необходим для альтернативного метода определения размера экранов у пользователей. Создатель адаптивных изображений рекомендует вам удалить этот файл и воспользоваться стандартным методом.

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

Подытожим

Бесспорно, это очень хорошая система, и нам кажется, что именно её будут использовать еще несколько ближайших лет. Для начала, давайте выделим то, что конкретно можно настроить при помощи данной системы?

Что может данная система:

* Устанавливать breakpoint’ы, совпадающие с CSS.
* Указывать папку для кэширования файлов.
* Устанавливать качество генерируемых JPG.
* Устанавливать значение периода хранения кэшированных изображений браузеров.
* Повышать резкость изображений.
* Изменять javascript на определение высокоточных экранов.

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

Для того чтобы скачать файлы, на которые мы ссылались в данной статье, посетите веб-сайт adaptive-images.com.
Внимание! У вас нет прав для просмотра скрытого текста.


Что вы думаете по поводу адаптивного дизайна и конкретно об адаптивных изображениях? Какие методы вы использовали в прошлом, и какие методы вам больше нравятся? Давайте пообщаемся на эту тему в комментариях.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 15721   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 22 мая 2013 @ 19:08
Написал: Мила — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
К сожалению, метод не работает.

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

Увы...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031