—»     —»   Все еще ждете стандартизации адаптивных изображений? Может лучше попробовать Rwd.Images.Js?
  Раздел: Java-Скрипты   Нет комментариев  

Все еще ждете стандартизации адаптивных изображений? Может лучше попробовать Rwd.Images.Js?



Пока что веб-сообщество так и не пришло к консенсусу в вопросе адаптивных изображений. Будет ли это элемент picture, как было предложено в W3C или это будет атрибут srcset, который предложили WHATWG? Вне зависимости от того, что мы получим в итоге, сегодня существует проблема адаптивных изображений, и дальше тянуть уже просто нельзя. Не удивительно, что до сих пор эта проблема решается при помощи javascript. Существует всего несколько скриптов, которые позволяют отображать адаптивные изображения, однако качество этих методов отличается, и в целом оставляет желать лучшего. Новый скрипт от Matt Stow из Австралии показывает отличный потенциал, и вполне может стать одним из самых распространенных решений данной проблемой на стороне клиента.

Все еще ждете стандартизации адаптивных изображений? Может лучше попробовать Rwd.Images.Js?

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

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

* Вам вовсе не обязательно оптимизировать вашу идеально прорисованную графику (ориентированную на WQHD-дисплеи) под все самые маленькие дисплеи в мире. Нам следует лишь предоставлять картинки нужных размеров при использовании соответствующих по размеру экранов.

* Не существует какого-то жесткого требования относительно работы над компрессией изображений, что помогает сэкономить трафик, главное – подогнать изображение под правильный размер.

* Элемент img существует уже очень давно. Следовательно, браузеры всех времен отлично справляются с этим элементом. Более того, сегодня они комплектуются специальными функциями, которые позволяют предварительно извлекать все изображения, и другими техниками, которые немного усложняют для нас задачу изменять img посредством атрибута src. Использование атрибута src ведет к многочисленным запросам, а это отрицательно сказывается на опыте взаимодействия для пользователей. В целом, будет гораздо лучше, если вы не будете использовать атрибут SRC для отображения изображений. Даже несмотря на то, что это выходит за рамки спецификации.

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

С помощью javascript возможно практически что угодно. Даже не удивляет такое количество доступных javascript-методов для работы с адаптивными изображениями. Тем не менее, большинство этих методов не решают некоторые проблемы и, как нам всем известно, само использование javascript также сулит определенными сложностями. Одна из главных проблем: что насчет пользователей, у которых отключена поддержка javascript, и что насчет ситуаций, когда в целом нарушена работа javascript (возможно из-за конфликтный плагинов или скриптов)? * На всякий случай, не забудьте встроить в код страницы noscript.

rwd.images.js: лучшее решение до официального выхода элемента picture?

rwd.images.js от австралийского программиста Matt Stow пока еще находится в стадии младенчества. Однако в данном случае успешность в столь раннем возрасте – это преимущество, так как оно позволяет разработчику отреагировать на все обсуждения и рекомендации тех, кто испробовал данный скрипт. И именно это и делает Matt. Он уже определил следующие главные проблемы:

* Его скрипту не нужен атрибут SRC в элементе IMG, и вместо этого он скрывает его в атрибуте data. Таким образом предотвращается автоматическое выполнение всех магических функций браузера. И вместе с этим сокращается число запросов.

* Также можно выставить Noscript, чтобы избежать проблем с отключенной или неработающей поддержкой javascript.

* Поддерживается направление до изображения.

Более того, rwd.images.js способен преобразовывать пиксели в em, поддерживает HiDPI, и при этом придерживается принципу наименований и поставляется со множеством других удобных функций. Вот как этот небольшой (менее 1.7 кб в сжатом виде) скрипт будет выглядеть в вашем коде. Учтите, что это один из самых простых примеров. rwd.images.js позволяет добиться гораздо большего:

<img class="rwdimage" data-rwdimage="
{ src: url(/images/4-by-3.jpg); padding-bottom: ratio(3/4); },
(min-width: 501px) { src: url(/images/16-by-9.jpg); padding-bottom: ratio(9/16); }
" />

<script src="/js/rwd.images.min.js"></script>

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

Несмотря на то, что это более-менее простой проход, он все равно несовершенен. У нас есть еще пара лет на то, чтобы обдумать необходимые функции, прежде чем нам удастся полностью перейти на новоявленный стандарт. Изменять css-код сложно всегда, будь то строчный код или централизованный отдельный файл таблицы стилей, который отвечает за внешний вид вашего проекта. С другой стороны, будь то picture или scrset, как только вам захочется изменить источник, вам все равно придется повозиться…

Учитывая все это, rwd.images.js можно называть одним из наиболее завершенных решений, которое позволяет работать с адаптивными изображениями. Если у этого решения нет никаких зависимостей, то почему бы не попробовать?

Ссылки

* rwd.images.js на Github
* Matt Stow на Github
* Responsive Images Community Group | W3C
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн, javascript
Опубликовал Design FactoRy   Прочитано (раз): 2630   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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


















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