Если вы занимаетесь кодированием веб-сайтов, то существует вероятность, что, по крайней мере, один из ваших клиентов спросит о мобильном веб-сайте. Если вы решите использовать адаптивный дизайн (как следствие ваш веб-сайт должен быть достаточно гибким, чтобы приспосабливаться к визуальным изменениям ширины при отображении на всех типах устройств: от мобильных до персональных компьютеров), то необходимо будет разработать стратегию создания гибких изображений, также известную как адаптивное решение для изображений.
Изучить основные моменты довольно просто, но как только вы справитесь с поставленной задачей, поймете, что масштабирование изображений – это только начало. У вас также могут возникнуть проблемы с быстродействием и художественным оформлением. Вы столкнетесь с необходимостью выбора из множества доступных вариантов подходящего адаптивного решения для изображений. Каждый из доступных вариантов обладает собственными достоинствами и недостатками — и ни один из них нельзя считать полностью оптимальным! Эта статья познакомит вас с основами, а затем вы получите всю необходимую информацию для выбора оптимального адаптивного решения для изображений, исходя из своей конкретной ситуации.
Основные моменты.
Стилизировать изображения переднего плана для того, чтобы приспособиться к ширине их контейнера очень легко. В своей таблице стилей, возможно в нормализованной или таблице сброса, добавьте следующий код:
img {max-width: 100%;}
В большинстве случаев этот крошечный стилевой алгоритм позволяет добиться цели! Как только этот код займет свое место, будет происходить следующее: если контейнер вокруг изображения станет уже, чем ширина изображения, то изображение также сузится, чтобы соответствовать ширине своего контейнера. Установка max-width в значение 100% будет гарантировать, что размеры изображения не станут больше его натуральной величины. В противном случае значительно уменьшается качество изображения. Если у вас возникли проблемы с поддержкой данного действия в IE 6 или 7 обратите внимание на следующую информацию: правило стиля width: 100% не предназначается для этих браузеров, поскольку они не понимают команды max-width.
Использование “сеточных” изображений с высокой разрешающей способностью позволяет немного хитрее реализовать данную возможность. Предположим, вы хотите, чтобы ваш логотип размером 150 × 150 пикселей отображался в двух вариантах с обычной пиксельной плотностью, а изображение было достаточно маленькое, чтобы наличие двух отдельных версий не вызывало проблем. Вы создаете версию логотипа с размером 300 × 300 пикселей и активируете ее — теперь она огромна! Вероятно, ваше первое решение будет заключаться в попытке использовать CSS код наподобие следующего:
img.sitelogo {max-width: 150px;}К сожалению, этот вариант не сработает, так как ожидалось — изображение логотипа теперь не будет изменять масштаб в соответствии с другими изображениями на странице.
Чтобы ограничить максимальную ширину адаптивного изображения, вы должны ограничить максимальную ширину контейнера, а не самого изображения! Предположим, что вы поместили свое изображение логотипа в модуль с классом объявления. Вот стиль, который позволит достигнуть требуемого результата:
.branding {max-width: 150px;}
Итак, теперь в составе шаблона веб-сайта есть масштабируемые адаптивные изображения. Цель достигнута. Настало время узнать, какие возможности предлагаются измученному разработчику, правильно?
Не так быстро! Нам все еще необходимо преодолеть две главные проблемы.
Проблема быстродействия.
С использованием адаптивного решения для изображений, описанного в общих чертах выше, все устройства без проблем смогут отображать изображения. Отображение маленьких иконок и логотипов не вызывает трудностей, но проблема появляется когда изображения становятся больше и массивнее. Использование сеточных изображений усугубляет проблему — вы не хотите посылать массивные сеточные изображения на устройство, которое не в состоянии корректно отобразить все детали!
Задумайтесь над этой проблемой. Действительно ли мы должны посылать изображения размером 990 × 300 пикселей и весом в100 КБ, предназначенных для пользователей персональных компьютеров, на мобильный телефон? Можно предположить, что мобильный пользователь может использовать Wi-Fi сеть местного кафе — однако, он также может находиться в дороге, пытаясь получить важную информацию с вашего веб-сайта пользуясь только беспроводным подключением. Каждый мобильный пользователь, который отказывается от услуг вашего сайта при слишком долгой загрузке страницы – это потенциально потерянный клиент!
На сегодняшний день многие мобильные веб-сайты являются такими же по размеру или даже больше, чем их аналоги для персональных компьютеров. Гай Поджарни в разные годы проводил тестирование, и не заметил значительных улучшений: в 2011году 86% веб-сайтов были соизмеримы по размерам или больше традиционных, а в 2012 году их число снизилось до 72%, но доля полноразмерных веб-сайтов увеличились. Дэйв Руперт подробно описал имеющуюся проблему в своей статье «Больше пикселей, больше проблем».
Дальнейшие трудности: предварительная загрузка браузера.
Когда я впервые задумался о решении проблем с быстродействием на адаптивных веб-сайтах, моей первой мыслью было размещение всех вариантов изображений на странице и их настройка с помощью специальных классов CSS с информационными запросами. Предполагалось, что эти запросы должны скрывать большие изображения при отображении на мобильных устройствах и, наоборот, при отображении на персональных компьютерах. Это решение казалось логичным: но должен ли браузер загружать скрытые изображения?
Проблема состоит в том, что браузеры слишком быстры для нас! Чтобы обеспечить самое быстрое возможное время загрузки, браузеры предварительно загружают все изображения, которые они могут идентифицировать в исходном коде перед любой CSS или JavaScript обработкой. Этот подход стал бы слишком накладным для моих мобильных посетителей, вынуждая их загружать все варианты изображения!
Из-за подобной предварительной загрузки большинство действий требует подходящих решений внутреннего интерфейса (чтобы установить приоритет предварительной загрузки) или специальной разметки и JavaScript.
Определение полосы пропускания.
Последняя часть загадки быстродействия – сетевая скорость. Мы знаем, что большие изображения нужно использовать только для устройств, которые находятся в быстрой сети, но как мы это сможем определить? Существует несколько методов, которые должны помочь оценить сетевую скорость, но вопрос об их надежности остается открытым.
W3C работает над информационной сетью API, которая может быть очень полезной в будущем, но в настоящее время она поддерживается лишь некоторыми устройствами (но, к сожалению, не большинством). В настоящее время она реализована в нескольких адаптивных решениях для изображений, но я не думаю, что она получит широкое распространение, пока не будет поддерживаться большинством устройств. Измерить характеристики сети довольно сложно и как утверждает Йоав Вайс в своей статье на Smashing Magazine, надежные «информационные запросы для пропускной способности» — это точно не то, что может быть реализовано в ближайшем будущем.
На Foresight.js разработчик Адам Бредлииспользует JavaScript для определения времени необходимого, чтобы загрузить изображения размером 50 килобайт. Затем эта информация сохраняется и используется для регулирования пропускной способности. У этого способа есть несколько небольших недостатков: сначала на вашу страницу загружается 50 килобайтная картинка, и в это время может быть блокирована загрузка других изображений, до тех пор, пока загрузка тестового изображения не будет завершена. Многие адаптивные решения для изображений, которые в настоящее время осуществляют определение пропускной способности, используют изменение или адаптацию Foresight.js.
Проблема «художественного направления».
Допустим, что на своей домашней странице вы разместили красивое широкое изображение. На картинке показаны широкие просторы полей и лесов, синее небо и пушистые облака, а также счастливая семья, которая вышла на пикник.
Сейчас давайте уменьшим изображение до 300 пикселей в ширину, чтобы соответствовать мобильному стилю. В таком масштабе отдыхающая семья больше похожа на муравьев.
Детали теряются, когда большое изображение масштабируется в меньшую сторону. (Изображение: Марк МакКвотти).
В этом и заключается то, что мы называем проблемой «художественного направления». Некоторые изображения попросту не очень хорошо масштабируется; мелкие детали теряются, и уменьшается влияние важных элементов. В случае нашего изображения, визуальный просмотр был бы гораздо приятнее, если бы фото для мобильной версии было увеличено, обрезано и сосредоточено на счастливой семье. Чтобы решить эту проблему, мы должны использовать адаптивное решение, которое позволяет использовать различные версии изображения в зависимости от конкретной ситуации или для мгновенной настройки изображения.
Иногда различное обрезание или увеличение изображения желательно узкой ширины. (Изображение: Марк МакКвотти).
Выбор подходящего решения.
К счастью, сообщество по веб-разработкам и дизайну не испытывает недостатка в творческих, умных людях, которые работают над решением этих проблем. Оборотная сторона медали в том, что можно легко получить перегрузку огромным количеством адаптивных решений для изображений. Как же решить, что будет для вас лучше?
Выбор может быть чрезвычайно сложным, поскольку в игру вступают очень многие факторы. Текущее решение не может идеально подходить для любой ситуации; каждый подход предназначается для решения определенного набора проблем. Чтобы найти подходящий вариант, нужно взвесить каждое решение по отношению к конкретным потребностям вашего проекта. Крис Койер проделал большую работу по систематизации ключевых факторов (Включая таблицу для отслеживания всех этих факторов, хотя некоторые новые решения не упоминается).
Вот некоторые факторы для рассмотрения:
- Нужно ли вам решать проблему художественного направления (т.е. представление изображения в различных соотношениях, с различными размерами для разной ширины экрана).
- Есть ли у вас огромный сайт или CMS (технические решения в области управления контентом) на который нельзя добавить специальную разметку для каждого изображения?
- Все ли изображения загружаются вместе со страницей, или некоторые изображения загружаются динамически через JavaScript?
- Хотите ли вы проверить пропускную способность пользователя, чтобы определить скорость связи при обработке изображения с высоким разрешением?
- Требует ли выбранное решение наличия недоступной для вас платформы (например, JQuery или PHP)?
- Приемлемо ли для вас использование стороннего решения, или вы склоняетесь к использованию собственного решения?
Имея это в виду, давайте посмотрим на некоторые адаптивные решения для изображений, которые давно придуманы, и широко используются в сообществе разработчиков.
Обратите внимание: список решений, представленных ниже, отнюдь не является исчерпывающим. Это те решения, которые, по моему мнению, являются наиболее полезными или надежными. Может быть, у вас есть собственное любимое решение, которое здесь не упомянуто? Дайте нам знать об этом в комментариях!
Проверенные и надежные решения для адаптивных изображений.
Picturefill.
Интернет – это действительно всемирная сеть, и мы должны признать тот факт, что не у всех есть доступ к волоконно-оптической связи и 4G сетям. Скотт Джел лично столкнулся с проблемой цифрового разрыва во время путешествий и работы по пути через Юго-Восточную Азию, и он является активным сторонником мобильных и адаптивных сайтов, которые не обременяют мобильных пользователей. Его Picturefill скрипт – это polyfill для предлагаемого <picture> элемента – JavaScript-код, который имитирует изображение API, что уже сегодня позволяет нам использовать его на нашем сайте! Будущее уже наступило!
Picturefill не требует наличия JQuery, но, очевидно, он требует picturefill.js сценария, который будет размещен где-то на странице. Picturefill также требует наличия специальной разметки с div элементами для представления различных вариантов изображения, дифференцированные по data-media атрибуту, который действуют так же, как в информационных запросах CSS. При желании вы также можете поместить изображение в условные комментарии для браузеров, которые не поддерживают информационные запросы (IE8) и обратную связь в <noscript> теге для браузеров, которые не имеют поддержки JavaScript (BlackBerry).
Вот пример типичной установки Picturefill:
<span data-picture data-alt="Descriptive alt tag"> <span data-src="images/myimage_sm.jpg"></span> <span data-src="images/myimage_lg.jpg" data-media="(min-width: 600px)"></span> <!--[if (lt IE 10) & (!IEMobile)]> <span data-src=»images/myimage_sm.jpg»></span> <![endif]—> <!— Fallback content for non-JS browsers. —> <noscript> <img src=»images/myimage_sm.jpg» alt=»Descriptive alt tag» /> </noscript></span>Это все, что вам нужно для отображения адаптивных изображений во время загрузки страницы, используя Picturefill. Вставьте скрипт, настройте разметку и все будет работать. Вы также можете вызвать Picturefill программно, если вам нужно добавить изображения на страницу.
Picturefill предполагает множественные изменения пользовательской разметки, поэтому он не может быть оптимальным выбором для тех, кто по как …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров