Содержание
Ethan Marcott – тот, кто в буквальном смысле слова “выковал” термин адаптивный веб-дизайн, в своей статье заявил, что гибкие изображения – есть неотъемлемый компонент адаптивного веб-дизайна. Однако проблема гибких изображений заключается в том, что даже если вы способны предложить пользователям разные размеры изображения для разных размеров экрана, на самом деле устройство должно скачивать одинаковое изображение во всех случаях.
Здесь начинаются плохие новости для тех, у кого тарифицируется трафик, и они не могут понять, почему сайты «съедают» так много трафика и так медленно открываются.
Это одна из главных проблем, которую обсуждают веб-разработчики. И новичкам придется многое изучить перед тем, как они придут к решению, которое им подойдет для разработки веб-сайта, оптимизированного под мобильные устройства. На данный момент выделяют несколько техник и инструментов, которые вроде бы помогают справляться с данной задачей, и именно о них мы сегодня хотим вам рассказать.
1. Adaptive Image
Adaptive Image – это небольшой PHP-скрипт, который определяет размер экрана пользователя, и предлагает подходящее изображение для данного размера. Он не требует изменений в разметке ‘img’, но если вы не подкованы в разработке, то реализовать данное решение будет довольно сложно.
2. Responsive Image Using Cookies
Keith Clark предлагает такое решение по предоставлению адаптивных изображений при помощи cookies. Этот метод подразумевает техническое определение размера экрана при помощи javascript, и предлагает подходящий размер изображения при помощи PHP до того, как оно загружается на странице.
Тем не менее, данная техника вызвала много проблем, и перед тем, как она станет повсеместной панацеей, автору стоит немного поэкспериментировать и улучшить его. Вы можете узнать об этом методе более подробно, а также скачать код с блога Кларка.
3. Sencha.io Src
Sencha представляет собой фреймворк для мобильной разработки, который позволяет нам создавать практически нативные приложения при помощи HTML, CSS и javascript. Если вы создаете приложение с использованием Sencha, то можете использовать API Sencha.io Src для масштабирования ваших изображений в зависимости от размера экрана устройства, которое использует посетитель.
API предлагает набор функций, которые позволяют вам настраивать результат вывода на странице. Если вам нужно больше технических подробностей, ознакомьтесь с данной ссылкой.
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 для того, чтобы скрыть часть изображения. Таким образом, изображение, с технической точки зрения, не обрезается, что означает, что пользователи все равно вынуждены выкачивать полную версию изображения. Вдобавок, этот трюк также не будет работать, если изображение не будет обернуто в дополнительный элемент.
В завершение
Как уже было сказано, пока еще не нашли единственно верного решения, которое помогло бы исключить данную проблему. Эти техники и инструменты представляют собой лишь временное решение, поэтому в них есть свои преимущества и недостатки.
Если вам не вселяют уверенности предложенные выше варианты, тогда придется дождаться официального выхода свойства ‘picture’.
