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


Содержание материала:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Как решить проблему производительности масштабирования изображений для адаптивных целей?

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

Это решение отлично работает, если изображение не является фоновым изображением рекламного щита или не является гибким блоком. Поэтому я хотел бы масштабировать изображение вместо использования плагина jQuery.

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

Чем ты занимаешься? Есть ли решение для преодоления проблем с производительностью при масштабировании изображений?

2 ответа

Проверьте эту статью от Smashing Magazine. Автор подробно описывает все, что вы можете рассмотреть, и возможные решения.

Я думаю, это зависит от того, какие «проблемы с производительностью» вы действительно пытаетесь решить. Если вас беспокоит время, затрачиваемое на изменение размера в браузере или проблемы с перетеканием, тогда используйте max-width: 100% для изображения и установите ширину контейнера изображения, предпочтительно используя адаптивную среду, такую как Foundations Framework или Bootstrap.

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

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

Frontender Magazine

Шерри Александр

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

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

Принципы

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

В большинстве случаев этого достаточно. Когда такое правило есть в таблице стилей, то, если контейнер изображения станет уже ширины изображения, то изображение уменьшится в масштабе, чтобы соответствовать ширине контейнера. Установка max-width на 100% также гарантирует, что изображение не будет увеличиваться больше своего реального размера и качество картинки не пострадает. Если вам все еще приходится поддерживать IE6/7, то для них придется добавить правило width: 100% , поскольку max-width они не поддерживают.

Это базовое решение усложняется, если вам нужно принимать в расчет retina-изображения с большим разрешением. Например, вы хотите, чтобы ваш логотип размером 150х150 пикселей показывался на удвоенном разрешении, и картинка достаточно маленькая, так что иметь две разные версии — не проблема. Итак, вы делаете версию логотипа размером 300х300 и подключаете ее: он стал огромным! Ваш первый позыв, вероятно, попробовать что-то такое в CSS:

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

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

Не так быстро! У нас есть еще две проблемы, которые нужно преодолеть.

Проблема с производительностью

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

Подумайте об этом. Действительно ли мы должны посылать на мобильный телефон 100-килобайтовую картинку размером 990х300 пикселей, предназначенную для десктопа. Конечно, посетитель может использовать wifi-соединение из местной кофейни — но может быть, что он где-то в дороге, индикация приема сети упала до одной полоски, а он пытается найти на вашем сайте ключевую информацию. Каждый мобильный пользователь, который уходит со страницы, потому что она грузится слишком долго — это потенциальный потерянный клиент.

На бескрайних просторах интернета можно найти большое количество мобильных сайтов, которые такие же по размеру или даже больше, чем их десктопные версии. Гай Подъярный провел несколько замеров с разницей в год, и не сказать, чтобы ситуация улучшалась: в 2011 86% мобильных сайтов были такого же размера или больше, а в 2012 эта цифра уменьшилась до 72%, но средний вес сайта увеличился. Дэйв Руперт очень тонко обозначил проблему в своей статье “Больше пикселей — больше проблем”.

Еще одна сложность: предварительная загрузка в браузерах

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

Проблема в том, что браузеры стали для нас слишком быстрыми! Для того, чтобы уменьшить время загрузки страниц, браузеры предзагружают все картинки, которые могут распознать в коде страницы еще перед тем, как обрабатывается CSS и JavaScript. Так что такой подход сделает жизнь мобильных пользователей еще хуже, поскольку им придется загружать все варианты изображений.

Из-за предзагрузки большинству нужно либо решение на бэк-энде (чтобы опередить предзагрузку) — или специальная разметка и JavaScript.

Определение пропускной способности

Последний кусочек головоломки с производительностью — это скорость сети. Мы знаем, что хотим отдавать большие картинки только тем устройствам, у которых быстрое соединение с сетью, но как это узнать? Есть несколько способов примерно оценить скорость сети, но они еще не стопроцентно надежны.

W3C работает над Network Information API, которая в будущем может очень пригодиться, но на данный момент поддерживается только очень ограниченным набором устройств (и никем из популярных). В нескольких решениях для отзывчивых картинок эта API уже используется, но я не думаю, что ее будут широко применять до того, как большее количество устройств начнет его поддерживать. Измерять скорость работы сети сложно, и, как отмечает Йоав Вайс в своей статье в Smashing Magazine, надежные «медиа-запросы для пропускной способности сети» вряд ли можно будет точно реализовать в ближайшем будущем.

Foresight.js Адама Брэдли использует JavaScript для того, чтобы протестировать, сколько браузер будет загружать картинку в 50 КБ, и потом сохраняет эту информацию для того, чтобы вы могли принимать решения относительно пропускной способности сети. Но у этого подхода есть несколько маленьких недостатков: к весу страницы прибавляется 50 кб, и библиотека блокирует загрузку остальных изображений, пока не скачается тестовое. Многие из решений для отзывчивых изображений, которые включают определение пропускной способности сети, используют Foresight.js или похожие приемы.

Проблема контекста

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

Теперь уменьшим ее до 300 пикселей по ширине для мобильных устройств. При таком размере наше семейство больше похоже на муравьев.

Когда большое изображение уменьшается, детали теряются. (Иллюстрация: Марк Макквитти)

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

Иногда для узких изображений нужен другой масштаб и обрезка. (Иллюстрация: Марк Макквитти)

Выбираем решение

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

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

Вот несколько факторов, которые нужно иметь в виду:

  • Нужно ли вам решать проблему с изменением изображения в зависимости от контекста (т.е. разные пропорции изображения, разные варианты масштабирования и обрезки для разных размеров экрана)?
  • Не работаете ли вы с огромным сайтом или CMS, с которыми у вас не получится взять и добавить специальную разметку к каждому имеющемуся изображению?
  • Все ли картинки уже есть на момент загрузки страницы, или некоторые загружаются динамически через JavaScript?
  • Хотите ли вы тестировать пропускную способность сети пользователя, чтобы определить, достаточно ли быстрое у них соединение для того, чтобы принимать изображения в высоком разрешении?
  • Требует ли решение платформы, которая вам недоступна (например, jQuery или PHP)?
  • Можете ли вы использовать решение на третьей стороне — или вам необходимо, чтобы все находилось на вашем хостинге?

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

Обратите внимание: список этих решений далеко не полон. В этот список входят либо те, которые я лично считаю самыми полезными, либо те, которые известны своей надежностью. У вас есть ваше любимое решение, которого нет в списке? Напишите о нем в комментариях!

Проверенные опытом решения для реализации отзывчивых изображений

PICTUREFILL

Веб — действительно всемирная паутина, и нужно принимать во внимание тот факт, что не у каждого пользователя есть доступ к оптоволоконному соединению и 4G-сетям. Скотт Джел столкнулся с этим цифровым разделением лицом к лицу, когда путешествовал и работал в Юго-Восточной Азии, и он очень серьезно отстаивает подход «сперва мобильная версия» и выступает за отзывчивые сайты, которые не кладут на мобильных пользователей неподъемную ношу. Его скрипт Picturefill — полифилл для предложенного в будущей спецификации HTML элемента

— это JavaScript-код, который повторяет API элемента picture , позволяя нам, таким образом, использовать этот элемент на сайтах уже сейчас. Будущее наступило, детка!

Для Picturefill не требуется jQuery, но, естественно, нужно, чтобы где-то на странице включался скрипт picturefill.js . Picturefill, кроме того, требует специальной разметки, в которой дивы представляют собой варианты изображений, отличающиеся атрибутом data-media , который работает так же, как медиа-запросы в CSS. Еще можно опционально поместить изображение в условный комментарий — для браузеров, которые не поддерживают медиа-запросы (IE8, обращаюсь к тебе), и запасной план — тэг для браузеров, в которых не включен JavaScript (BlackBerry, обращаюсь к тебе).

Вот пример типичной настройки Picturefill:

Топ-пост этого месяца:  Новые факты о работе поисковой системы Google

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

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

HISRC

HiSRC, написанный Марком Грабански и Кристофером Шмиттом — плагин для jQuery, который позволяет вам создавать версии изображения с низким, средним и высоким разрешением — а скрипт загрузит соответствующее изображение, исходя из готовности устройства отображать ретина-изображения и скорости сети.

Чтобы установить его, для начала убедитесь, что на странице подключены jQuery и собственно скрипт HiSRC.

В HTML сперва добавьте обычный тэг изображения, и в качестве его источника установите версию изображения с маленьким разрешением (или самую маленькую). Добавьте к картинке или ее контейнеру класс (например, .hisrc ), чтобы указать, какие изображения скрипту следует обработать. Потом добавьте к тэгу картинки специальную разметку: атрибуты data-1x и data-2x , которые указывают соответственно на версии изображения со средним и высоким разрешением. Например:

Затем, после того как загрузился DOM, просто вызовите функцию с тем классом, который вы использовали для изображений, вот так:

На практике дело выглядит так. Сперва браузер загрузит источник изображения — то есть мобильную версию картинки. Затем скрипт проверит, не использует ли посетитель мобильное соединение (например, 3G). Если да, то первая картинка остается на месте. Если соединение быстрое, а браузер поддерживает Retina-изображения, тогда выдается версия @2x . Если соединение быстрое, но ретина не поддерживается, тогда выдается версия @1x .

Вы, наверное, заметили, что изображение с низким разрешением грузится в любом случае, даже если скрипт решает, что устройство пользователя вполне подходит для отображения изображения с большим разрешением. Хотя технически это двойная загрузка, проблемы это создает только тем, кто находится на быстрых соединениях. По-моему, вполне приемлемый компромисс! HiSRC может обрабатывать картинки, которые добавляются на страницу динамически. Также он позволяет указывать несколько картинок, стало быть, вы можете определить разные варианты обрезки изображения и решить проблему «контроля впечатления».

У HiSRC есть и недостатки: для его работы требуется jQuery, так что его имеет смысл применять только в тех случаях, если вы уже используете эту библиотеку. Также он требует специальной разметки в HTML, так что, возможно, это не лучший выбор, если у вас есть огромный сайт с большим количеством архивированных картинок или CMS, в которой нельзя переключить вывод тэга изображения. Если это ваш случай, читайте дальше!

Adaptive Images

В отличие от двух предыдущих скриптов Adaptive Images за авторством Мэтта Уилкокса — в основном решение на стороне сервера. Ему требуется чуть-чуть JavaScript, но основную работу выполняет веб-сервер Apache 2, PHP 5.x и библиотека GD.

Чтобы установить это решение на ваш веб-сервер, вам понадобится добавить файл .htaccess , загрузить несколько PHP-файлов в корневой каталог вашего сайта, добавить немножко JavaScript на страницы (чтобы сохранить куки, в котором будет записано разрешение экрана пользователя) и настроить в PHP несколько переменных, чтобы они соответствовали медиа-запросам вашего сайта.

Инструкция по установке Adaptive Images довольно объемная и мы не будем на ней останавливаться. Если хотите узнать об этом больше, зайдите на официальный сайт и нажмите на ссылку «Детали» наверху.

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

У этого скрипта есть несколько ограничений:

  • Так как он требует связку Apache/PHP, это может конфликтовать с платформой вашего сайта или быть недоступным на сервере вашего хостинг-провайдера.
  • Он работает благодаря способности веб-сервера перехватывать запросы к изображениям (через файл .htaccess ). Так что если ваши изображения хранятся в каком-то другом месте (например, на CDN), ничего не будет работать.
  • Этот скрипт не определяет пропускную способность сети.
  • Он не предназначен для того, чтобы контролировать впечатления от изображений: все, что он делает — это масштабирует картинки. Он не может обрезать или делать версии изображений в других пропорциях.

Вы, вероятно, заметили, что все решения до сих требовали JavaScript, а некоторые еще и достаточно серьезной настройки. Если вы ищете такое решение, для которого не требуется JavaScript и которое одновременно достаточно простое во внедрении, обратите внимание на Sencha.io Src.

Sencha.io Src

Ранее известный как TinySrc, Sencha.io Src — решение на стороннем сервере, которое работает как прокси-сервер для изображений, так что вам не нужно ничего настраивать на своем сервере. Просто перенаправьте свое изображение на сервера Sencha (с опциями или без них), Sencha обработает его и отправит обратно версию с другими размерами.

Предположим, у вас есть большое изображение:

Самый простой вариант: вы просто ставите перед значением атрибута src http://src.sencha.io/ , вот так:


alt=“My large image” />

По умолчанию Sencha.io изменит размер вашего изображения, чтобы оно соответствовало ширине экрана устройства, которое Sencha.io определит по строке user-agent . Телефонам отправится изображение на 320 пикселей в ширину, планшетам — 768 пикселей в ширину и т.п.

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

Решения для реализации отзывчивых изображений, на которые стоит обратить внимание

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

Capturing/Mobify.js 2.0

Capturing — это новая фича разрабатывающейся ветки Mobify.js 2.0, которая предлагает давать вам доступ к HTML-разметке до того, как браузер распарсит и отобразит ее. Возможность получить доступ к исходному коду на этой стадии дает вам возможность заменить атрибут src изображения до того, как браузер начнет скачивать его. Можно даже сделать запасной режим с одним из других решений (например, Picturefill) — на случай, если что-нибудь упадет.

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

Другой момент, которые удерживает меня от того, чтобы начать пользоваться этим решением — это уровень его кроссбраузерной поддержки. Capturing не будет работать в IE ниже 10 версии — так что пользователи IE8 и IE9 остаются в стороне. Я буду следить за этим решением, может быть, потом, когда IE8 и 9 плавно уйдут на свалку истории, это решение будет более применимым.

Если вам интересно узнать больше о Capturing, то команда Mozilla детально рассматривает этот проект в посте: “Capturing: Improving Performance of the Adaptive Web.”

ReSRC.it

ReSRC.it — еще одно стороннее решение (недавно вышло из беты), которое формирует в облаке отзывчивые изображения. По архитектуре оно выглядит очень похоже на Sencha.io Src, но в ReSRC добавляются фильтры изображений, определение пропускной способности канала — и для этого ему не нужно определять браузер по user-agent и хранить данные в куки.

Чтобы начать, сперва нужно зарегистрировать trial-аккаунт на ReSrc.it.

Затем нужно вставить на свою страницу JavaScript-файл (простой JS-код, кроме того, есть и асинхронный метод вставки этого кода на страницу, что увеличивает производительность):

Теперь предположим, что у вас есть такое изображение:

Вы ставите к адресу источника изображения в качестве префикса путь к серверам ReSRC.it и добавляете к изображению CSS-класс resrc (сейчас у них два сервера, один для платных аккаунтов, второй — для бесплатных, и его мы будем использовать в примере):

ReSRC.it позволяет вам добавлять параметры к строке запроса, чтобы осуществлять все необходимые операции над изображением: поворачивать, обрезать, отражать. Это позволяет иметь достаточно гибкие варианты и потенциально решает проблему контроля впечатления. Параметры обрабатываются слева направо и могут быть соединены:

Вот пример изображения, которое горизонтально отражается, масштабируется на 300 пикселей по ширине и картинка оптимизируется в JPEG на качестве в 80%:

ReSRC.it недавно вышел из беты, так что если у кого-то есть советы по использованию этого сервиса или мнение о нем (плюсы/минусы), мы с радостью прочитали бы их в комментариях.

Тестируйте, тестируйте, тестируйте!

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

YSlow

Разработанное Yahoo, YSlow — инструмент на клиенте, который анализирует ваш сайт по 23 признакам, которые, по мнению Yahoo, могут отрицательно сказываться на производительности веб-страницы. YSlow присваивает вашему сайту оценку по каждому правилу, объясняет каждое и предлагает вам, как улучшить производительность сайта. YSlow доступен для Firefox, Chrome, Safari и Opera (ну и еще несколькими способами, например, из командной строки).

WebPageTest

Онлайн-инструмент WebPageTest — опенсорс-проект, поддерживающийся Google. Вы вводите URL вашего сайта, проводите тест на скорость из выбранного место и определяете, какой браузер использовать. Дополнительные настройки позволяют вам выбрать набор действий из нескольких шагов, выбрать скорость сети (ADSL/оптоволокно и пр.), отключить JavaScript, блокировать рекламу и делать другие запросы, и так далее. Результате приходят в виде таблиц, графиков, скриншотов, обзора производительностью и большого количества данных, в которых можно покопаться.

В заключение

Если вы читаете Smashing Magazine, скорее всего, вы уже пытаетесь создать самые лучшие условия из всех возможных для восприятия вашего сайта его аудиторией. Так что в следующий раз, когда вы будете создавать что-то красивое и полезное для мобильных пользователей, попробуйте одно из этих решений для отзывчивых изображений и сделайте свой сайт еще лучше. Пользователи на мобильных устройствах скажут вам спасибо!

Оптимизация изображений блога – обязательное условие продвижения

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

Подготовка изображения не простой процесс. В первую очередь его надо создать. Давайте пройдемся по основным этапам этой работы.

Этап 1. Создание тематического изображения.

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

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

Для создания картинки используем любой редактор. Я обычно работаю с PowerPoint. У этой программы очень много функций и возможностей.

Этап 2. Проверка уникальности изображения.

Весь контент сайта должен быть уникальным, в том числе и изображение. Проверку делаем используя ресурс TinEye. Как с ним работать я писала раньше. Надо добиться 100% уникальности. Если не получается с первого раза — надо картинку корректировать, пока не получите нужного результата.

Этап 3. Уменьшаем вес изображения.

Уменьшаем вес или сжимаем изображение. Можно использовать программу Riot. А можно плагин, который устанавливается на блоге и делает все в автоматическом режиме. Я использую плагин wp-smush. Помните, что картинка должна быть сохранена в формате jpeg, jpg.

Загрузка и оптимизация изображения

Картинка подготовлена. Теперь готовим ее к загрузке в статью блога.

1. При сохранении картинки, обязательно дайте ей название в виде ключевого слова статьи. Это обязательное условие. Тогда при загрузке изображения и генерации ссылки на него будет участвовать фокусное слово. Что очень важно для продвижения Вашего поста.

» data-medium-file=»https://i1.wp.com/altacademic.ru/wp-content/uploads/2020/10/izobrazhenie-1.jpg?fit=197%2C300&ssl=1″ data-large-file=»https://i1.wp.com/altacademic.ru/wp-content/uploads/2020/10/izobrazhenie-1.jpg?fit=283%2C432&ssl=1″ />При чем WordPress переведет название транслитом. Но обратите внимание на то, что и заголовок изображения так же будет переведен. Измените его на русский. Так как при наведении курсора на изображение, появиться всплывающее окно с заголовком или title.

2. Заполняем поля атрибут alt и описание изображения. Я обычно повторяю заголовок. Этого достаточно. Так как заполнение атрибута alt необходимо для подсказки на компьютерах пользователей, где картинки не отображаются. Это может быть связано с плохим трафиком интернет. Поисковый робот оценит Вашу заботу об этих посетителях.

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

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

Всего доброго! Удачной работы! В следующем посте обсудим оптимизацию текста.

Адаптивная дискретизация растровых изображений в туннельном микроскопе Текст научной статьи по специальности « Общие и комплексные проблемы естественных и точных наук»

Аннотация научной статьи по общим и комплексным проблемам естественных и точных наук, автор научной работы — Липанов А. М., Гуляев П. В., Шелковников Е. Ю., Кизнерцев С. Р.

Показано, что растровые изображения в туннельном микроскопе обладают информационной избыточностью, снижающей его производительность. Рассмотрено использование адаптивной дискретизации на основе выделения квазилинейных участков в прогнозной профилограмме поверхности. Приведены результаты теоретических и экспериментальных исследований, доказывающие высокую эффективность предложенных решений.The researches carried out in work have shown, that to reduce an information redundancy of STM images the a priori information about the relief of a surface is needed. Using a forecast estimations based on polynomial model of a surface as a priori information has allowed to realize the algorithm of adaptive digitization based of allocation quasilinear sites in the prognostic profile of a surface.

Похожие темы научных работ по общим и комплексным проблемам естественных и точных наук , автор научной работы — Липанов А.М., Гуляев П.В., Шелковников Е.Ю., Кизнерцев С.Р.,

Текст научной работы на тему «Адаптивная дискретизация растровых изображений в туннельном микроскопе»

АДАПТИВНАЯ ДИСКРЕТИЗАЦИЯ РАСТРОВЫХ ИЗОБРАЖЕНИИ В ТУННЕЛЬНОМ МИКРОСКОПЕ

А.М.ЛИПАНОВ, П.В.ГУЛЯЕВ, Е.Ю.ШЕЛКОВНИКОВ, С.Р.КИЗНЕРЦЕВ

Институт прикладной механики УрО РАН, Ижевск, Россия E-mail: [email protected]

АННОТАЦИЯ Показано, что растровые изображения в туннельном микроскопе обладают информационной избыточностью, снижающей его производительность. Рассмотрено использование адаптивной дискретизации на основе выделения квазилинейных участков в прогнозной профилограмме поверхности. Приведены результаты теоретических и экспериментальных исследований, доказывающие высокую эффективность предложенных решений.

При измерениях параметров ультрадисперсных частиц (УДЧ) кластерных материалов с применением сканирующего туннельного микроскопа (СТМ) время сканирования исследуемой поверхности (десятки минут) для статистических испытаний образцов часто оказывается недопустимо большим. Это связано с тем, что для обнаружения УДЧ поле зрения СТМ должно существенно превосходить ее максимальные размеры и обычно составляет 1-2 мкм (при этом для изучения небольших кластерных соединений одновременно могут потребоваться и СТМ-измерения с атомарным разрешением). Следует отметить, что в СТМ с большим полем зрения пьезосканеры обладают невысокой резонансной частотой. В этом случае скорость сканирования поверхности будет также невысокой, а время получения и обработки СТМ-изображений существенным. Возникает задача повышения производительности туннельного микроскопа.

АЛГОРИТМЫ АДАПТИВНОЙ ДИСКРЕТИЗАЦИИ ИНФОРМАЦИИ

СТМ-изображения исследуемой поверхности обычно представляют собой растровую сетку (двумерный массив высот) с равномерным интервалом дискретизации вдоль линий строчной и кадровой разверток, устанавливаемым исходя из размеров исследуемых объектов. При изучении УДЧ, геометрические размеры которых априорно неизвестны, интервал дискретизации, как правило, оказывается избыточным. В ряде случаев избыточность интервала дискретизации наблюдается только на определенном участке растра (в частности, на окружающих УДЧ участках подложки, не представляющих гхрак-

тической значимости). Например, для растрового изображения (рис. 1а) установлен интервал дискретизации 3.4 нм, при этом для одной из его строк (рис.2а) амплитуды гармоник в спектре (рис. 26) (соответствующих данному интервалу) оказываются несущественными. В результате имеют место непроизводительные затраты времени, устранение которых посредством адаптивной (зависимой от рельефа поверхности) дискретизации СТМ-изображений позволяет уменьшить время сканирования и повысить производительность СТМ.

Задача адаптивной дискретизации может быть сформулирована следующим образом. Для функции (на отрезке [а,Ь], описывающей профилограмму строки растровой сетки) найти координаты таких измерительных точек, чтобы эффект от их сокращения по сравнению с равномерной дискретизацией был максимальным, а погрешность дискретизации при этом оставалась в допустимых пределах.

Общие принципы адаптивной дискретизации рассмотрены в работах Ф.Е. Тем-никова, В.Г. Долотова [1-4]. Отметим основные отличительные особенности дискретизации профилограммы растра с целью сокращения продолжительности формирования СТМ-изображения:

— дискретизация должна осуществляться в реальном масштабе времени в процессе сканирования поверхности;

— априорно неизвестен вид поверхности и необходимо устанавливать интервал дискретизации для еще неотсканированных участков.

Известны алгоритмы адаптивной дискретизации, основанные на использовании в качестве приближающей функции полиномов 1-й степени [1]. Они подразделяются на экстраполяционные и интерполяционные. В экстраполяционных алгоритмах генериру-

Рис.1. СТМ-изображение ультрадисперсной частицы меди: а — при линейной дис кретизации; б — при адаптивной дискретизации (количество измерительны точек сокращено в 2,5 раза)

О 20 40 60 80 ь 106Гц

Рис.2. Строка (представленного на рис.1) СТМ-изображения УДЧ меди: а — профилограмма строки; б — ее пространственный спектр Фурье

ется приближающая функция Р(х), которая применительно к сканированию в СТМ может иметь вид:

P(x) = z(xj) + z/(xi)-x , (1)

где z(xj), z!(x\) — соответственно, высота рельефа и первая производная в начальной точке интервала дискретизации профилограммы поверхности.

Конечная точка интервала дискретизации определяется исходя из условия:

|P(x)-z(x)| i Не можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

где го — допустимая величина отклонения.

Недостатки экстраполяционных алгоритмов:

— применяется операция дифференцирования, которая при наличии помех снижает эффективность адаптивной дискретизации;

— для определения измерительных точек согласно (2) необходима информация

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

В интерполяционных алгоритмах величина интервала дискретизации устанавливается таким образом, чтобы для уравнения прямой Р(х), связывающей начальную и конечную измерительную точку интервала, выполнялось соотношение (2). Обычно сначала устанавливается минимальный интервал дискретизации, а затем его величина увеличивается до момента выполнения условия (2). Недостаток алгоритма — требуется полная информация об исходной профилограмме для проверки условия (2).

Рассмотренные алгоритмы хорошо подходят для задач сжатия информации при переводе аналоговых сигналов в цифровую форму и при наличии определенной априорной информации о рельефе поверхности могут с успехом применяться в СТМ.

Для повышения эффективности работы устройства развертки СТМ за счет устранения избыточности получаемой информации возможно также применение адаптации вида [4]:

где Az, Дх — соответственно, интервалы квантования и дискретизации функции; z’x -первая производная.

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

Очевидно, что существующие методы адаптивной дискретизации не приспособлены для применения в системе развертки микроскопа. Задача адаптивной дискретизации в СТМ (с использованием, в частности, рассмотренных алгоритмов) при сканировании в режиме реального времени может быть решена при наличии определенной априорной информации о рельефе, в качестве которой можно использовать: предварительные исследования данного участка поверхности; информацию из уже отсканированных строк растра СТМ-изображения; прогнозную оценку. Первый источник характерен тем, что может предоставить достоверную информацию о рельефе поверхности, но не всегда имеется в наличии. Относительно второго источника следует отметить, что в большинстве случаев по строке растрового изображения можно сделать выводы только качественного характера о рельефе поверхности для последующей строки. Од-

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

МАТЕМАТИЧЕСКАЯ МОДЕЛЬ ПОВЕРХНОСТИ В ИССЛЕДОВАНИЯХ С ПРИМЕНЕНИЕМ СТМ

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

— простота и незначительное время вычислений при прогнозировании;

— быстрая реакция параметров модели на изменение наблюдаемых значений высоты рельефа;

— модель должна основываться на растровом описании СТМ-изображения;

— в связи с растровым характером сканирования прогнозирование при адаптивной развертке необходимо лишь на определенном участке поверхности (этим участком может быть очередная строка растра или ее часть);

Топ-пост этого месяца:  Список зарегистрированных пользователей WordPress

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

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

Анализ моделей, применяемых при прогнозировании количественных характеристик процессов [5], и моделей, используемых для приближения дискретных сигналов, показал, что полиномиальная модель процесса используется в обоих случаях. При этом можно записать в общем виде модель профилограммы поверхности, соответствующую ]-й строке растровой сетки СТМ-изображения:

и модель профилограммы поверхности, соответствующую i-му столбцу растра:

РЕЗУЛЬТАТЫ И ИХ ОБСУЖДЕНИЕ

В соответствии с растровым характером процесса сканирования в СТМ процесс прогнозирования можно определить, как экстраполяцию полученной модели столбца СТМ-изображения исследуемой поверхности до прогнозной точки (рис.3):

где Ау — прогнозный интервал.

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

Имея в наличии прогнозную оценку профилограммы поверхности для очередной строки сканирования, можно применять экстраполяционные и интерполяционные методы адаптивной дискретизации. Однако наилучшие результаты дает использование в качестве интервала дискретизации квазилинейных (ЮГУ) участков в прогнозной про-филограмме, которые определяются согласно выражения:

1 — toi i Не можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

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

-40 -24 -8 8 24 40

Рис.5. Функции плотности вероятности ошибок: а) — прогноза (при использовании полинома 1 степени в качестве детерминированной основы прогноза); б) -адаптивной дискретизации

Таким образом, использование аппарата прогнозирования и выделение КЛУ для сокращения информационной избыточности СТМ-изображений позволяет повысить производительность микроскопа при сохранении необходимой точности измерительной информации.


1. Темников Ф.Е. Теоретические основы информационной техники- М.: Энергия, 1979.-512с.

2. Долотов В.Г. Дискретное отображение сигналов — М.: МЭИ, 1976.

3. Темников Ф.Е. Теория развертывающих систем — М.: Энергоатом из дат, 1963.

4. Темников Ф.Е. Методы и модели развертывающих систем — М.: Энергоатомиздат, 1987.—134с.

5. Чуев Ю.В. и др. Прогнозирование численных характеристик процессов.- М.: Советское радио, 1975-400с.

SUMMARY. The researches carried out in work have shown, that to reduce an information redundancy of STM images the a priori information about the relief of a surface is needed. Using a forecast estimations based on polynomial model of a surface as a priori information has allowed to realize the algorithm of adaptive digitization based of allocation quasilinear sites in the prognostic profile of a surface.

Главные проблемы адаптивного дизайна. Как их избежать.

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

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

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

Самые распространённые проблемы адаптивного дизайна.

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

Так что давайте рассмотрим наиболее «популярные» проблемы, которые были отмечены опрошенными дизайнерами.

  • Необходимость объяснять клиентам, что такое АВД
  • Нехватка статической стадии разработки
  • Навигация
  • Изображения
  • Таблицы
  • Сложности преобразования старых «неподвижных» сайтов (с фиксированной шириной)
  • Обслуживание пользователей старых версий IE
  • Тестирование времени и стоимости

Проблема 1: Необходимость объяснять клиентам, что такое АВД

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

Есть одна вещь, с которой борются многие дизайнеры: как объяснить клиентам, что «визуального этапа» больше нет? Адаптивный дизайн является более гибким процессом и вайрфрейминг, рисование эскизов, моделирование, как правило, более мощные инструменты.

Решение: демонстрировать «мощь» адаптивного дизайна.

Лучший способ объяснить, что такое АВД — это показать его «в деле». Не заводите умных разговоров о контрольных точках, медиа-запросах и многофункциональности. Такая информация быстро забывается, даже если и звучит очень убедительно.

Лучший пример — демонстративный. Если у вас есть доступный лэптоп, планшет и телефон, на встрече с клиентом вы можете продемонстрировать ему, как сайт (возможно, тот, который вы только что создали для другого клиента) ведёт себя с различными экранами. Это просто и эффективно, а если вы ещё приведете сравнение с тем, как ведут себя с разными девайсами неадаптивные сайты, будет ещё лучше.

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

Проблема 2: Недостаток статической фазы создания дизайна

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

Решение: создавайте больше элементов и меньше макетов.

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

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

Также я рекомендую, как можно раньше, проектировать в браузере и работать с HTML, а затем использовать Fireworks или Photoshop для создания активов, а не полных макетов.

Эскиз, вайрфрейм и прототип. Адаптивный веб-дизайн не значит то, что больше не надо использовать бумагу: просто используйте её по-другому.

В более крупных проектах, ты можешь мучиться с каждым вайрфреймом. Хорошие идеи по этому поводу можно взять из исследования редизайна Crayola.com Дэна Мэльса и сделать бумажные или вайрфреймовые виджеты, которые легко передвигаются.

Полезную информацию о личном технологическом процессе других дизайнеров можно найти на слайдах о технологическом процессе создания АВД Стэфана Хэя или в детализированном обзоре от Yellow Pencil на их веб-сайте responsiveprocess.com.

Проблема 3: Навигация

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

Решение: использовать хороший последовательный дизайн.

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

Следующие статьи могут быть полезными:

Адаптивная навигация в действии. Сайт Starbucks

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

Проблема 4: Изображения

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

Также дизайнеры должны всегда думать о следующем поколении дисплеев с высокой плотностью пикселей, например: о новом iPad и Macbook Pro и другой технике не из круга Apple. Такие вещи, как код, изображения, иконки должны быть гибкими, чтобы графика на экранах с высокой плотностью пикселей не выглядела размытой, из-за того, что они были плохо расширены.

Решение: скрипты, SVG и символьные шрифты.

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

Семантические шрифты набора символов Oak Studios отлично адаптируются к различным экранам.

Здесь вы сможете ознакомиться с различными методами и средствами для адаптивных изображений и дисплеев с разной пиксельной плотностью:

Проблема 5: Таблицы

Часть опрошенных респондентов заметили, что таблицы данных создают большие проблемы, особенно, если они содержат комплексную информацию или просто большое количество строк и столбцов. «Втискивание» всей этой информации в маленький экран — отнюдь не решение проблемы. Тем не менее, некоторые обнадёживающие шаги уже сделаны.

Решение: выбирайте различные варианты.

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

Здесь можно найти пару сильных опций для адаптивных таблиц:

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

Проблема 6: Сложности преобразования старых сайтов с фиксированной шириной

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

Решение: стройте с нуля.

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

Проблема 7: Как обслуживать пользователей старых версий IE

Я просто уверен, что вы все ждали того момента, когда буду говорить гадости об Internet Explorer. Конечно, я подтверждаю, что работая со старыми версиями браузера (IE8 и более ранние), главная проблема возникает в нехватке поддержки медиа-запросов CSS. Это значит, что если вы работаете с первыми мобильной техникой, такой как 320 and Up, ваши медиа-запросы не будут взламываться, и ваш макет не будет должным образом отражаться на настольных браузерах, так что в конечном итоге вы получите маленький макет на большом экране.

Решение: Polyfill’ы или не парьтесь.

Печально то, что несмотря на желаемое видение мира дизайна (и фактический прогресс Microsoft ), мы всё ещё должны рассматривать более старые версии Internet Explorer (особенно 8), когда планируем создавать сайт. Но с другой стороны, у нас есть мощные опции для поддержки адаптивными сайтами старых версий IE.

Если вы стремитесь к тому, чтобы ваш макет поддерживался максимально большим количеством версий IE, рассмотрите respond.js polyfill на ваших страницах. Для более полного объяснения вариантов, я рекомендую прочитать Методы Изящной деградации медиа-запросов Льюиса Наймэна.

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

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

И всё-таки, как ни крути, вопросы обслуживания юзеров старых версий Internet Explorer, сводятся к требованиям ваших клиентов. Как говорится, желание клиента – закон.

Проблема 8: Тестирование времени и цены

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

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

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

Решение: применяйте устройства и изменяйте размеры.

Радует тот факт, что появляется всё больше агентств, таких как Clearleft, которые готовы поделиться своей огромной коллекцией испытательных устройств со всеми, кто хочет посетить их офис. Пока что это не так распространено, но я уверен, что эта инициатива не останется без сторонников.

Clearleft делится своими разнообразными испытательными девайсами со всеми, кто посещает их студию. Агентства, следуйте их примеру!

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

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

Адаптивная версия сайта интернет-магазина: основные принципы, правила и ошибки разработки

Из общего количества посетителей коммерческих сайтов примерно 30-40% – пользователи мобильных устройств. Учитывая ежегодное увеличение этих цифр, работа над данным сегментом стала перспективным направлением развития в сфере e-commerce. Степень вовлечения мобильного трафика зависит от качества юзабилити, которое должно быть одинаково удобным для юзеров ПК и владельцев всевозможных гаджетов. Решить такой вопрос поможет адаптивная верстка.

Что такое адаптивная версия сайта

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

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

Верстальщики создают адаптивную версию ресурса с помощью языка разметки HTML5, каскадных таблиц CCS3. Данные технологии позволяют настраивать нужные параметры, месторасположение объектов.

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

Почему интернет-магазин должен быть адаптивным

На данный момент адаптивный дизайн – не просто модный тренд, а и серьезная необходимость в области электронной коммерции.

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

Помимо улучшения пользовательского опыта, наличие адаптивной версии дает интернет-магазину массу преимуществ:

  1. Повышает конкурентоспособность. Согласно исследованиям, к верстке ресурса под разные устройства пока прибегает меньшая часть онлайн-предпринимателей. Оперативный переход на адаптив делает сайт удобнее, повышает превосходство проекта перед конкурентами ниши.
  2. Расширяет аудиторию. Онлайн-магазин, совместимый с планшетами и смартфонами, хорошо привлекает мобильный трафик. Оценив удобство использования такого сайта, многие посетители становятся постоянными клиентами компании.
  3. Способствует получению стабильной прибыли. Веб-ресурсы с адаптивной версией характеризуются высокой посещаемостью, что помогает существенно увеличить конверсионные показатели.
  4. Практичный и простой в обслуживании. Несмотря на разницу отображения, все страницы адаптивного ресурса доступны по одному URL-адресу. Один целостный веб-сайт с аналогичной структурой, узнаваемым дизайном не требует внесения изменений в движках, не вызывает особых сложностей в технических работах.
  5. Поднимает рейтинг в результатах поиска. Фактор адаптации ресурса учитывается при ранжировании по целевым запросам в поисковиках. Удобство отображения собственного ресурса на гаджетах можно проверить через сервис-анализатор Google mobile-friendly или Screenfly.
  6. Является универсальным. Адаптив предполагает комфортное взаимодействие со всеми посетителями. Для пользователей смартфонов остаются доступны те же элементы дизайна, функции, контент, что и для десктопных юзеров. Информация передается без потери смысла, вместо уменьшенной версии отображаются страницы с отзывчивым дизайном.

Чтобы понять, нужен ли адаптив конкретному интернет-магазину, следует проанализировать конкурентов, исследовать данные веб-аналитики. Если доля посетителей площадки со смартфонов и планшетов выше 10%, самое время приступить к разработке адаптивной версии. В некоторых специфических нишах процент мобильного трафика бывает низким. Однако в большинстве направлений объем этого сегмента аудитории достигает трети от общего количества посетителей и продолжает расти.

Существуют случаи, в которых адаптив противопоказан:

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

Что лучше: адаптивный дизайн или мобильное приложение

У адаптирующегося дизайна есть две альтернативы – мобильная версия и приложение. Первый вариант не совсем практичный, поскольку предполагает разработку фактически еще одного сайта, который нуждается в отдельном обслуживании. Второй – не особо выгодный в финансовом плане. Создание мобильного приложения обходится в кругленькую сумму порядка 2-5 тысяч долларов и выше.

У альтернативных вариантов есть еще несколько минусов:

  • для использования приложения необходима загрузка и установка программы, что требует дополнительных усилий, доверия юзера к площадке;
  • приложение распределяет трафик, не сохраняя его полный объем (показатели посещаемости через программу не суммируются с трафиком сайта);
  • мобильные версии/приложения должны соответствовать каждому типу операционной системы, что предусматривает дополнительные затраты на разработку;
  • новые материалы, добавляемые на веб-сайт, нужно постоянно дублировать в приложении, выделяя дополнительные временные и технические ресурсы.

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

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

Адаптивная верстка не позволяет выбирать между настольной и мобильной версиями. При неудачно спроектированном интерфейсе и отсутствии выбора пользователь скорее всего закроет страницу интернет-магазина в первые минуты.

Правила разработки и основные принципы адаптива

Продумывая адаптивную версию онлайн-магазина, нужно четко понимать различия между качественным юзабилити мониторов гаджетов и ПК. Также следует обращать внимание на веб-аналитику, проверять, с каких устройств пользователи зачастую посещают сайт. Это поможет определить распространенные разрешения экрана, на которые нужно ориентироваться в процессе разработки (440, 768, 980, 1220 px), выявить приоритетные потребности аудитории.

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

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

  1. Планирование и проектирование. Собирается вводная информация, исследуются конкуренты, определяется ЦА, ставятся цели.
  2. Создание прототипа. Обсуждается внешний вид, возможные варианты поведения элементов интерфейса в различных экранных разрешениях. Прорабатывается каркас.
  3. Верстка и предварительное тестирование. Обкатывается черновик, анализируется реакция блоков на изменение форматов окна, тестируются варианты, выбираются лучшие решения. Разрабатывается структура html-кода.
  4. Эстетическое оформление утвержденного прототипа. Создаются, расставляются по модульной сетке и соответственно оформляются — типографика, графические и прочие элементы.
  5. Комплексное тестирование. Проверяется корректность отображения деталей, гибкость интерфейса и юзабилити на десктопе и мобильных устройствах. Вносятся нужные уточнения, исправления.


В ходе разработки используются разные типы адаптирующихся макетов. Так называемая резиновая верстка позволяет сжимать/расширять ключевые блоки и изображения под размер экрана. При невозможности сжатия блоки выстраиваются в виде ленты. На страницах с множеством колонок применяется перемещение блоков: при уменьшении экрана они переносятся вниз (оптимально для интернет-магазинов).

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

Кроме настраиваемых макетов, верстальщики внедряют скрипты или медиазапросы. С их помощью элементам дописывают определенные css-свойства, которые применяются при условии изменения формата экрана. Например, преобразуется размер и шрифт текста, вид и расположение блоков, скрываются/добавляются отдельные детали.

Готовый сайт должен соответствовать нескольким ключевым принципам:

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

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

Типичные ошибки адаптивной верстки

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

  1. Мелкий шрифт и малозаметные активные элементы. На меньшем экране текст сжимается и тот материал, который легко прочесть на компьютере, сложно разглядеть со смартфона. Для мобильных версий рекомендуется использовать шрифт не менее 12px. Не должны быть маленькими и другие интерактивные элементы, призывы к действию, целевые кнопки.
  2. Прокручивающиеся блоки. С целью экономии места на многих веб-ресурсах вводят блоки с функцией прокрутки. Прокручивать страницы на девайсах с тачскрином с узким монитором неудобно. Поэтому стоит предусмотреть возможность разворачивать блоки с помощью клика или показывать их в полную высоту.
  3. Элементы, запускающие события при касании. На десктопных версиях веб-сайтов часто устанавливаются события, которые срабатывают при наведении курсора (всплывание фото, подсказок, меню). Нужно предвидеть этот момент: на мобильных устройствах нет курсора, все работает иначе. Событие, равное клику мыши, происходит при касании экрана.
  4. Меню без функции сворачивания. Основная задача адаптива – сделать функциональные детали компактными, но доступными пользователю. Громоздкое меню может закрыть весь экран. Это усложняет свободную прокрутку, провоцирует случайное попадание в ненужные разделы. Решить проблему можно, реализовав специальную иконку, которая при нажатии сворачивает/открывает меню.
  5. Недостаточно глубокое тестирование. Перед запуском магазина стоит выполнять тщательное тестирование, проверять ключевые маршруты посетителей в популярных браузерах. Это предотвратит вероятные ошибки в процессе функционирования будущего ресурса.
  6. Медленная загрузка веб-страниц. Также, как и десктопная, мобильная аудитория любит скорость. Данный параметр зависит от объема страниц. Нужно оценить все составляющие, сделать их минимальными, распределить контент по разным вкладкам, уменьшив вес основной части страницы. На скорость загрузки влияют и Java-скрипты, изображения, CSS-файлы. Во время проектирования следует оставлять только нужную информацию. Для уменьшения размера ресурсных файлов можно пользоваться специализированными инструментами.
  7. Игнорирование предварительного анализа аудитории. Анализ поведения пользователей – наиболее важный подготовительный этап. Он помогает определить типы устройств, используемые для входа на сайт, выявить востребованные действия в веб-серфинге, удовлетворить ожидания аудитории.

Заключение

Эксперты утверждают: к 2021-2022 годам с мобильных гаджетов будет осуществляться до 70% сделок в e-commerce. Предлагаем не отставать от технологий и не игнорировать потребности целевой аудитории. Онлайн-магазин с адаптивным дизайном – отличная возможность приобрести товар максимально быстро и с минимальными усилиями, независимо от используемого гаджета и платформы. Эффективная обработка мобильного трафика с учетом разных сценариев и нюансов пользовательского опыта выведет на верный путь к повышению конверсии и наращиванию прибыли.

AutoCAD

Знания

Изучите основы и оттачивайте навыки для повышения эффективности работы в AutoCAD

Диалоговое окно «Адаптивная деградация и оптимизация производительности»

Управляет производительностью 3D отображения.

Сводная информация

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

Список параметров

Отображаются следующие параметры.

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

Ухудшать, если показатель кадры/с меньше»

Задание количества кадров в секунду (кадр/с), которое должно сохраняться перед использованием адаптивной деградации.

Указание эффектов, для которых применяется деградация, а также порядка, в котором деградация применяется для заданных эффектов.

Перемещение выбранного элемента вверх в порядке деградации.

Перемещение выбранного элемента вниз в порядке деградации.

Задает параметры оборудования и настройки производительности.

Просмотр протокола оптимизации

Отображается диалоговое окно «Протокол мастера оптимизации производительности».

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

Отображается диалоговое окно «Ручная оптимизация параметров».

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

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

Указывает на то, что доступен новый рекомендуемый драйвер. (Отображается только после проверки обновлений и при наличии нового драйвера.)

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

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

Отображение всплывающего уведомления при наличии нового драйвера.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Оптимизация адаптивных картинок под Google PageSpeed?

Здравствуйте коллеги. Столкнулся с такой проблемой, в последнее время в моей конторе начали тестировать страницы с помощью Google PageSpeed, инструмент хороший не спорю. Но у меня есть некоторые вопросы к оптимизации изображений. Сейчас приведу пример:
Обычно, к изображениям добавляют отзывчивость (по примеру бутстрапа):

тем самым картинка будет подстраиваться под размеры родительского блока. Ну так вот, есть к примеру некий див, в котором загружена фотка размером 640 на 480, при уменьшении окна браузера с помощью медиа запросов, происходит так, что она, к примеру отображается 320 на 240, а еще меньше окно браузера — 160 на 120:

Соответственно, меняется размер родительского блока, а картинка подстраивается. Ну так вот, у гугла устроено так, что если картинка по физическим размерам больше дива, например картинка 640на480 и сжалась под действием дива до 320 на 240, то он будет ругаться, мол оптимизируйте картинки, сожмите размер и т.д.

Кто как в этом случае поступает? Является ли данный пункт неким фактором ранжирования в гугле?

Вот другая ситуация:

Есть некая галерея, где есть маленькие превьюшки, есть большая превьюшка и есть еще огромная картинка, которая открывается при клике на превьюшку. У нас появились разногласия и мы не можем принять верное решение, контора разбилась на два лагеря:

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

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

Добавить комментарий