Picture — новый элемент, которого нет
В девелоперских сборках браузеров Chrome, Firefox и Opera появилась поддержка нового элемета picture, призванного решить ряд проблем возникающих при разработке адаптивных дизайнов. Давайте рассмотрим его подробнее.Новый элемент picture, решает следующие задачи, встающие перед разработчиком адаптивных веб-приложений (я воспользуюсь классификацией, предложенной pepelsbey на одной из недавних конференций по фронтенду):
Ретина, т.е. экраны с плотностью точек на дюйм 150 и выше, на которых обычное изображение выглядит размыто
Адаптивность, задача изменения размеров изображения согласно вашим правилам, прописанным в дизайне в зависимости от размера вьюпорта.
Формат, возможность использовать современные форматы, такие как WebP, если они поддерживаются браузером
Кадрирование или Художественные цели. Обрезка маловажных частей изображения, при показе на устройствах с меньшим экраном.
Сложив первые буквы, получаем мнемонику РАФКСинтаксис
Условно, расширенный синтаксис нового элемента выглядит так
Атрибут src в данном случае служит источником картинки для плотности < 2 и фолбеком на случай, если браузер не поддерживает новый элемент.
Адаптивность
Представим раскладку, в которой есть единственная контрольная точка (breakpoint) 700пкс. При размере вьюпорта более 700 пкс мы показываем справа сайдбар и размер нашего изображения должен быть 75% от ширины экрана. В противном случае сайдбар располагается в конце страницы и изображение должно быть растянуто на всю ширину. Это реализуется следующим кодом
400w, 800w, 1200w — это дескрипторы ширины, они подсказывают браузеру картинка какой ширины находится по данному URL и на основе этой информации браузер принимает решение какое изображение лучше всего подойдет в текущей ситуации. Как и в случае с ретиной информация носит рекомендательный характер и окончательное решение какое изображение грузить остается за браузером.Одновременное использование дескрипторов плотности и ширины недопустимо.
В атрибуте sizes перечисляются размеры изображения для всех контрольных точек в нашем дизайне. Контрольные точки задаются в виде обычного медиавыражения, браузер берет первое, которое возвращает Истину и дальше цепочку не рассматривает. Для значения ширины используется новая единица длины vw, которая возвращает значение в процентах от ширины вьюпорта.
Если для картинки нет необходимости использовать контрольные точки, то запись можно сократить до такой sizes=»100vw». А для более сложных дизайнов можно использовать CSS-функцию calc (), напримерsizes=»(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc (33vw — 100 px)»
Самый сложный в поведении атрибут на мой взгляд. Если не указывать sizes, то браузер всегда выбирал самую большую картинку. В сочетании с width не работает, хотя казалось бы логичное сочетание и ряд других глюков. Возможно это особенности ранней реализации.
Как видите, мы уже покрыли 80% потребностей адаптивной верстки, а еще ни разу не использовали picture, настало время ему тоже вступить в игру.
Формат
Использование различных форматов для изображений мало отличается от способов используемых для тегов video или audio
Дополнительная информация Поддержка браузерами caniuse.com/#search=pictureСпецификация www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-picture-elementРабочая группа и типовые задачи, которые они решали с помощью нового элемента responsiveimages.org/Множество примеров использования dev.opera.com/articles/responsive-images/
