Проблема с адаптивными изображениями
Не думайте, что сейчас мы начнем грузить вас томными рассказами, начиная со времен появления интернета. Если вы заняты разработкой веб-сайтов, то вам наверняка известны все сложности и обстоятельства, связанные с разработкой полноценного адаптивного веб-сайта. Так что, фабула будет краткой и четкой. Использование адаптивных изображений создает несколько проблем (не только их, но эти самые важные):
* Вам вовсе не обязательно оптимизировать вашу идеально прорисованную графику (ориентированную на 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
