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

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

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

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

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

Адаптация изображения с помощью php скрипта

Adaptive Image – небольшой PHP скрипт, который определяет размер экрана пользователя и предоставляется изображение необходимого размера. Применение скрипта  не требует каких либо изменений в атрибутах <img>, но реализация будет непонятна для менее технически подкованных пользователей.

 Использование Cookies

Кейн Кларк имеет свой подход для адаптации изображения с помощью Cookies. Размер экрана определяется с помощью JavaScript, а размер необходимого изображения с использованием PHP прежде чем загрузиться необходимая страница.

Тем не менее, этот метод имеет множество проблем и требующий изучения, прежде чем использовать для ежедневного решения. Более подробно об этом можно прочитать в блоке Кларка — Responsive Image Using Cookies.

Sencha.Io Src

Sencha – фреймворк для разработки мобильных приложений, который позволяет нам строит приложения с HTML, CSS и JavaScript. Если вы разрабатываете приложение с Sencha, вы можете использовать APISencha.io Src для изменения своих изображений в зависимость от экранов устройств пользователей.

APIпредоставляет набор функций для настройки вывода результатов на странице. Подробно по ссылке.

HTML5 – элемент Picture

Это возможно будущий стандарт адаптивных изображений. Новый элемент <picture> позволяет устанавливать несколько источников изображений, а также breakpoint, с помощью которых определяется необходимая версия изображения:

Однако, этот элемент все еще находится в процессе разработки. Пока им нельзя воспользоваться. До этого времени мы может использовать Polyfillс названием Picture Fill.

Picture Fill

Picture Fill – небольшая библиотека JavaScript, которая разработана  Scott Jehl. Он имитирует элемент <picture> обычным элементом

Плагины

Если вы используете WordPress в качестве движка сайта, есть несколько плагинов, которые работают с изображениями подобно элементу <picture>.

 

PB Responsive Image

WP Responsive Image

Simple Responsive Image

Picture Fill WP

 

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

Focal Point

Focal Point – фрейворк, который позволяет «кадрировать» изображения и управлять точкой фокусировки для адаптивного дизайна. Он выполнен на «чистом» CSS; автор просто добавил классы в элемент содержащий изображение.

Стоит отметить, чтобы скрыть часть изображения в данном методе используется overflow:hidden. Это означает, что изображение «технически» не обрезается, и в конечном счете пользователи загружают изображение в полном размере. Также это может не работать, если изображение не будет находиться в дополнительном элементе.

 

 

Заключение

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

Если же вам не нравятся предложенные выше предложения, тогда можно дождаться официального релиза свойств элементов <picture>.

 

comments powered by HyperComments