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

Ethan Marcott – тот, кто в буквальном смысле слова “выковал” термин адаптивный веб-дизайн, в своей статье заявил, что гибкие изображения – есть неотъемлемый компонент адаптивного веб-дизайна. Однако проблема гибких изображений заключается в том, что даже если вы способны предложить пользователям разные размеры изображения для разных размеров экрана, на самом деле устройство должно скачивать одинаковое изображение во всех случаях.

1379932818_responsive-img-01
Здесь начинаются плохие новости для тех, у кого тарифицируется трафик, и они не могут понять, почему сайты «съедают» так много трафика и так медленно открываются.

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

1. Adaptive Image

Adaptive Image – это небольшой PHP-скрипт, который определяет размер экрана пользователя, и предлагает подходящее изображение для данного размера. Он не требует изменений в разметке ‘img’, но если вы не подкованы в разработке, то реализовать данное решение будет довольно сложно.
1379932879_responsive-img-02

2. Responsive Image Using Cookies

Keith Clark предлагает такое решение по предоставлению адаптивных изображений при помощи cookies. Этот метод подразумевает техническое определение размера экрана при помощи javascript, и предлагает подходящий размер изображения при помощи PHP до того, как оно загружается на странице.

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

3. Sencha.io Src

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

API предлагает набор функций, которые позволяют вам настраивать результат вывода на странице. Если вам нужно больше технических подробностей, ознакомьтесь с данной ссылкой.
1379932811_responsive-img-03

4. HTML5 Picture Element

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

<picture id="images">
   <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">    
</picture>

Данный элемент, тем не менее, пока что находится в черновой стадии. Пока что им нельзя воспользоваться. До тех пор нам придется довольствоваться polyfill под названием Picture Fill.

Picture Fill

Picture Fill представляет собой миниатюрную javascript-библиотеку, разработанную Scott Jehl. Она имитирует принцип действия элемента ‘picture’ при помощи обычного элемента ‘span’.

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        <span data-src="small.jpg"></span>
        <span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
</span>

 

Плагины

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

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

5. Focal Point

Focal Point – это фреймворк, который позволяет разработчикам “кадрировать” изображения и указывать точку фокусировки окна просмотра в адаптивном дизайне. Вся техника реализуется посредством CSS. Автор просто добавляет классы в элемент, который содержит изображение.

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

1379932854_responsive-img-04

В завершение

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

Если вам не вселяют уверенности предложенные выше варианты, тогда придется дождаться официального выхода свойства ‘picture’.