—»     —»   5 методов реализации действительно адаптивных изображений
  Раздел: Обработка изображений   Комментариев: 3  

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



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

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

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

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

1. Adaptive Image

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

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

2. Responsive Image Using Cookies

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

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

3. Sencha.io Src

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

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

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

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'.

* PB Responsive Image
* WP Responsive Image
* Simple Responsive Image
* Picture Fill WP

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

5. Focal Point

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

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

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

В завершение

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

Если вам не вселяют уверенности предложенные выше варианты, тогда придется дождаться официального выхода свойства 'picture'.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 9594   |   Оставлено комментариев: 3
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 25 сентября 2013 @ 02:20
Написал: Sergey Kochegarov — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Проблема вставки картинок, по всей видимости, самая актуальная. Тут дело не только в ширине экрана. Имеется проблема в формировании картинок нужного размера на стороне сервера. Передача огромной картинки, чтобы ее отображать в 10-20 раз меньшего размера на клиентской части, создает проблему отказов: не дождаться ее отображении на мобильнике. Имеется проблема предварительной коррекции изображения, так как начальное изображение может передаваться с самого мобильника. Эту проблему я решил с помощью специального Bbcode фото (photo) подробнее тут http://www.cotonti.mobi/page.php?al=Bbcode_photo&go#page
Комментарий #2: 25 сентября 2013 @ 12:42
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Sergey Kochegarov, если хотите - можете опубликовать свою статью на нашем сайте на эту тему. Думаю, многим будет интересно...
Комментарий #3: 25 сентября 2013 @ 18:28
Написал: Sergey Kochegarov — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за приглашение. Постараюсь.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728