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

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

Итак, около года назад я считал, что для того, чтобы сделать картинку адаптивной (то есть сделать так, чтобы она растягивалась или сжималась по ширине контейнера), достаточно воспользоваться следующим кодом:

Wrapper img{ width: 100%; }

И действительно, в некоторых случая этим можно ограничиться. Этот трюк отлично работает, когда окно браузера становится меньше. Но что, если ширина контейнера, в котором лежит картинка, становится больше разрешения картинки? Правильно. Картинка растягивается по ширине контейнера, но качество оставляет желать лучшего. А что делать, если нужна поддержка разрешения 2048x1536px ?

Если вы не используете svg и это растровое изображение, то первое, что приходит на ум, — это взять картинку, которая подходила бы к максимальному разрешению landing page, а уже с изменением размера окна браузера, она будет сжиматься с нормальным качеством.

И тогда возникает проблема производительности. Глупо для смартфона подгружать такие большие картинки, которые хорошо смотрятся на retina разрешении. Ведь скорость мобильных сетей не такая высокая, как у ПК, и некоторые пользователи могут не дождаться загрузки лендинга на своем смартфоне. А в результате — это потерянный клиент.

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

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

В этом можно убедиться, открыв инструменты разработчика и заглянув во вкладку «Сеть».

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

В html 5 появился тег picture, который позволяет решить большинство проблем и создан именно для создания адаптивного (отзывчивого) дизайна. Его конструкция напоминает теги video и audio. Суть работы заключается в том, что внутри тега picture задаются несколько изображений под конкретные разрешения экрана. Выглядит это примерно так:

Особенность в том, что вместо src — используется srcset и применяется что-то похожее на медиазапросы. Маленькая картинка грузится при разрешении меньше 319px. Среднее изображение при разрешении от 320px до 480px и т.д.

Ознакомиться с поддержкой браузерами тега picture на текущий момент можно на этой странице .

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

Как видите ситуация на данный момент оставляет желать лучшего. Нет поддержки на IOS устройствах, на Macbook(ах) и на IE (Хотя, пользователей IE — не жалко, они должны страдать:)). Думаю, что все мы не готовы терять такое количество пользователей. Нет, неправильно выразился. Не терять, ведь наша основная картинка загрузится и корректно отобразится. Но все равно, хотелось бы не терять клиентов с техникой apple из-за долгой загрузки страницы, так как это, скорее всего, платежеспособная аудитория:)

Для того, чтобы использовать преимущества этого тега уже сейчас, нужно воспользоваться небольшим скриптом (между тегами head) picturefill.js .

Теперь все устройства должны поддерживать такую структуру верстки адаптивных картинок. Правда на Маке я не тестировал (не обзавелся пока).

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

Вот такой не хитрый способ. А как вы делаете адаптивными изображения? Поделитесь пожалуйста своими методами в комментариях. Спасибо.

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

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

Базовые значения адаптивного изображения

Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными. Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px; , в этом блоке нам необходимо вывести адаптивное изображение. Для этого элементу внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.

HTML: CSS: div.container { width: 96%; max-width: 960px; margin: 0 auto; /* центрируем основной контейнер */ } img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ }

Обратите внимание, что элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.

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

На самом деле это очень простая тема, и она не займет у нас много времени.

Чтобы ваши изображения стали гибкими, нужно просто добавить им свойство max-width=100% .

Img {
max-width: 100%;
}

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

Помимо изображений вы можете использовать этот прием для видео и других медиафайлов.

Img, embed, object, video {
max-width: 100%;
}

Все бы хорошо, но это работает только в IE7+ Если же вам нужно поддерживать IE6 , то там это свойство работает в такой записи:

Img {
width: 100%;
}

Т.е. вместо max-width пропишите width .

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

Решить эту проблему для IE просто.

Logo {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}

Т.е. эту проблему нам помогает исправить свойство filter .

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

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

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

img { width : 100% ; height : auto ; }

img { width: 100%; height: auto; }

Базовые значения адаптивного изображения

Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.
Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px; , в этом блоке нам необходимо вывести адаптивное изображение.
Для этого элементу внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.

div.container { width : 96% ; max-width : 960px ; margin : 0 auto ; /* центрируем основной контейнер */ } img { width : 100% ; /* ширина картинки */ height : auto ; /* высота картинки */ }

div.container { width: 96%; max-width: 960px; margin: 0 auto; /* центрируем основной контейнер */ } img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ }

Обратите внимание, что элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.

Адаптивные изображения в колонках

Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу значение inline-block для свойства display , т.е. сделать его встроенным.
Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.

1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.

img { width : 32% ; display : inline-block ; }

img { width: 32%; display: inline-block; }

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

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

/* Для небольших устройств (смартфоны) */ img { max-width: 100%; display: inline-block; } /* Для средних устройств (планшеты) */ @media (min-width: 420px) { img { max-width: 48%; } } /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) { img { max-width: 24%; } }

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

Адаптивное изображение на всю ширину экрана

Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.

.container { width : 100% ; } img { width : 100% ; }

Container { width: 100%; } img { width: 100%; }

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

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

Дата публикации: 2013-12-16

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

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

Основы

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

img { max-width: 100%; }

img { max - width : 100 % ;

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

Изображения в высоком разрешении “Retina” могут осложнить эту простую реализацию. Скажем, вам нужно, чтобы логотип размером 150 × 150px отображался в двойной пиксельной концентрации по отношению к его обычной, а изображение достаточно маленькое, так что получение двух отдельных вариантов не станет проблемой. Итак, вы создаете версию логотипа 300 × 300 px, включаете ее - и теперь она огромная! Вашим первым побуждением, возможно, станет попробовать в CSS нечто вроде этого:

img.sitelogo { max-width: 150px; }

img . sitelogo { max - width : 150px ;

К сожалению, ничего не работает так, как нужно - изображение-логотип теперь откажется нормально масштабироваться с прочими изображениями на странице.

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

Branding { max-width: 150px; }

Branding { max - width : 150px ;

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

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

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

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

Подумайте об этом. Нужно ли на самом деле посылать изображение в 990 × 300 px и 100 KB, предназначенное для пользователей десктопов, на мобильный телефон? Конечно, посетитель с мобильного устройства может сидеть на Wi-Fi-соединении своего местного кафетерия - однако может оказаться в дороге при неустойчивом беспроводном соединении и пытаться отыскать на вашем вебсайте важную информацию. Каждый мобильный пользователь, сдающийся при слишком долгой загрузке страницы – это потенциально потерянный клиент!

В природе сегодня можно отыскать множество мобильных вебсайтов, которые такие же большие, или даже больше своих десктоповых собратьев. Гай Поджарный (Guy Podjarny) с год назад провел несколько тестов, и не заметил значительного улучшения: в 2011г. 86% вебсайтов были того же размера или даже больше, а в 2012г. это количество уменьшилось до 72%, но увеличился общий размер сайтов. Дэйв Руперт (Dave Rupert) тоже отметил эту проблему в своей статье Больше пикселей – больше проблем (Mo’ Pixels Mo’ Problems).

СЛЕДУЮЩЕЕ ОСЛОЖНЕНИЕ: БРАУЗЕРНАЯ ПРЕДЗАГРУЗКА

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

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

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

ОПРЕДЕЛЕНИЕ ПРОПУСКНОЙ СПОСОБНОСТИ

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

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

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

Проблема «художественного руководства»

Скажем, на домашней странице вашего сайта есть отличное широкое изображение. На нем изображена пасторальная сцена с полями и лесом, голубым небом и пушистыми облаками, и счастливым семейством на травке.
Теперь отмасштабируйте ее для мобильного устройства до ширины в 300 px. При таком размере семья на отдыхе смотрится, как муравьи на пикнике!

При масштабировании большого изображения теряются подробности .

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

Иногда при маленькой ширине экрана желательна обрезка или приближение изображения .

Выбор своего решения

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

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

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

У вас большой вебсайт или CMS, где нереально вернуться и добавить специальную разметку к каждому изображению?

Все ли изображения имеются налицо при загрузке страницы, или некоторые динамически загружаются через JavaScript?

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

Требуется ли для выбранного решения недоступная вам платформа (такая как jQuery или PHP)?

Применимо ли для вас стороннее решение, или оно вам нужно на внутреннем хостинге?

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

Заметьте, пожалуйста: список нижеприведенных решений ни в коем случае не окончателен. Либо я лично нашел их наиболее полезными, либо они уже находятся в послужном списке из-за своей надежности. У вас есть любимое решение, отсутствующее здесь? Расскажите нам о нем в комментариях!

Опробованные и надежные адаптивные решения

PICTUREFILL

Сеть на самом деле всемирная, и нам приходится противостоять тому факту, что не у всех есть доступ к соединениям по оптоволоконному кабелю и 4G-сетям. Скотт Джел (Scott Jehl) лично столкнулся с этим цифровым неравенством во время путешествия и работы в Юго-Восточной Азии, и он – ярый сторонник mobile-first и адаптивных вебсайтов, которые не отягчают мобильных пользователей. Его скрипт Picturefill – это полифил для предложенного элемента - кода JavaScript, имитирующего API изображения – дающий нам возможность уже сегодня применять его в своих вебсайтах. Будущее наступило, детка!

Picturefill’у не требуется jQuery, но, естественно, ему нужно, чтобы куда-либо на страницу был включен скрипт picturefill.js. Picturefill’у также нужна специальная разметка, с div’ами для представления вариантов изображения, различаемых атрибутами data-media, которые действуют как медиазапросы в CSS. Также можно по выбору внести изображение в условные комментарии для тех браузеров, которые на поддерживают медиазапросов (это об IE 8), и альтернативный вариант в тэг noscript для тех браузеров, где отключен JavaScript (это о BlackBerry). Вот пример типичных настроек Picturefill:

< span data - picture data - alt = "Descriptive alt tag" > < span data - src = "images/myimage_sm.jpg" > < / span > < span data - src = "images/myimage_lg.jpg" data - media = "(min-width: 600px)" > < / span > < ! -- [ if (lt IE 10 ) & (! IEMobile ) ] > < span data - src = "images/myimage_sm.jpg" > < / span > < ! [ endif ] -- > < ! -АльтернативныйконтентдлябраузеровбезJS . -- > < noscript > < img src = "images/myimage_sm.jpg" alt = "Descriptive alt tag" / > < / noscript > < / span >

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

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

HiSRC от Марка Грабански (Marc Grabanski) и Кристофера Шмитта (Christopher Schmitt) – это плагин jQuery, который позволяет создавать версии изображения в низком, среднем и высоком разрешении, а скрипт показывает самое подходящее из них на базе готовности к Retina и скорости сетевого подключения.

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

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

< img src = "//placekitten.com/200/100" data - 1x = "http://placekitten.com/400/200" data - 2x = "http://placekitten.com/800/400" class = "hisrc" / >

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

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

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

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

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

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

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

АДАПТИВНЫЕ ИЗОБРАЖЕНИЯ

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

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

Инструкции по инсталляции весьма многословны - немного длинноваты для этой статьи. Для получения информации посетите официальный вебсайт и щелкните вверху ссылку “Details”.

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

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

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

Из-за того, что ему требуется сочетание Apache и PHP, Adaptive Images может не подойти для платформы вашего вебсайта или оказаться недоступным с сервера вашего веб-хоста.

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

Он не определяет пропускную способность.

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

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

SENCHA.IO SRC

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

Скажем, у вас есть большое изображение:

< img src = "//www.your-domain.com/path/to/image.jpg" alt = "My large image" / >

В самом упрощенном варианте можно дописать префикс атрибуту src с http://src.sencha.io/, как здесь:

< img src = "//src.sencha.io/http://www.your-domain.com/path/to/image.jpg" alt = "My large image" / >

Sencha.io по умолчанию изменит размер вашего изображения так, чтобы то соответствовало ширине экрана устройства, применив для детекции строку агента пользователя. На телефоны будет отправлено изображение шириной 320 px, на «таблетки» — шириной 768 px и так далее.

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

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

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

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

CAPTURING/MOBIFY.JS 2.0

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

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