Не работает тег picture

Заметка: как использовать HTML «picture» для адаптивных изображений

Изображения заведомо являются одним из самых сложных аспектов адаптивного веб дизайна. Сегодня мы рассмотрим как элемент

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

Вначале о проблеме

Времена попиксельного (pixel perfect) и дизайна фиксированной ширины (fixed-width) ушли в прошлое. Теперь во времена широкоформатных мониторов, интернет телевидения, планшетов и смартфонов различных размеров наши дизайны должны удовлетворять любому устройству шириной от 320px до потенциальных 7680px.

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

Так что же нам делать?

Текущее общепринятое решение

Как правило, вы найдете этот код на любом сайте с адаптивные дизайном:

Здесь используется max-width: 100%; для гарантии того, что изображение никогда не выйдет за пределы ширины родительского контейнера. Если родительский контейнер сжимается до ширины, меньшей чем ширина изображения — последнее сжимается вместе с контейнером. Установка height: auto; нужна для сохранения пропорций.

Одно «жидкое» изображение под все случаи

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

Новое решение:

это новый элемент, который является частью HTML5.

Это позволит загружать разные изображения в зависимости от:

• Результатов media выражений, например высоты, ширины или ориентации видимой области
• Плотности пикселей

Это в свою очередь означает, что вы можете:

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

Использование разных изображений в зависимости от условий

Как работает

Основные шаги при работе с

Создайте открывающий и закрывающий теги

.

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

Добавьте атрибут media , содержащий выражения для таких вещей как высота и ширина области просмотра, ориентация и т.д.

Добавьте атрибут srcset с соответствующим именем файла изображения для загрузки.

Добавьте дополнительные имена файлов к атрибуту srcset , если нужно поддерживать разную плотность пикселей, например для Retina дисплеев.

Добавьте резервный (fallback) элемент .

Вот простой пример, где для случая, когда ширина видимой области меньше 768px — загружается уменьшенное (smaller) изображение:

Можно заметить, что синтаксис, используемый в атрибуте media является таким же, как и при использовании в CSS media queries. Вы можете использовать те же самые проверки, т.е. проверять max-width , min-width , max-height , min-height , orientation и т.д.

Эти проверки можно использовать для того, чтобы например загружать альбомную (landscape) или книжную (portrait) версию изображения в зависимости от ориентации устройства, к тому же можно одновременно проверять размеры в этих выражениях. Например:

Этот код загружает уменьшенную альбомную (landscape) версию изображения для устройств с малым экраном и соответствующей ориентацией. И увеличенную версию того же изображения для устройств с большим экраном.

Если устройство имеет книжную (portrait) ориентацию — загружается книжная версия изображения, уменьшенная для устройств с малым и увеличенная для устройств с большим экраном.

Если вы хотите предоставлять изображения в другом разрешении для дисплеев с повышенной плотностью пикселей, это можно сделать, указав дополнительные имена файлов в атрибуте srcset . Давайте к примеру посмотрим на наш первый кусок кода с добавлением обработки для Retina 2x дисплеев:

Т.к. сначала обрабатывается media query, вы можете управлять размерами изображения, с которыми оно будет показано на экране. Затем будет проверяться плотность пикселей: если дисплей поддерживает повышенную плотность и в пользовательских настройках есть на это разрешение — будут загружены соответствующие версии изображений.

Использование

Прямо сейчас встроенная поддержка

реализована в Chrome, Firefox и Opera. В будущем, вполне вероятно, мы увидим широкую поддержку и другими браузерами. Но до этого момента еще надо дожить.

Тем временем вам не нужно ждать, если хотите использовать

прямо сейчас. Просто воспользуйтесь Picturefill 2.0; polyfill от умных людей из Filament Group.

После скачивания файла picturefill.js в свой проект просто подключите его в шапке:

Есть также опция для асинхронной загрузки скрипта, о которой можно прочитать в документации Picturefill.

При использовании этого скрипта элемент

будет работать так, как я и объяснял, но с несколькими ограничениями.

Ограничения Picturefill

Picturefill отлично работает с разными версиями IE, однако IE9 не поддерживает элементы, которые используются внутри

. Чтобы обойти это, оберните source элементы в теги с помощью условных комментариев; это сделает их видимыми для IE9, например:

Android 2.3

Как и IE9, Android 2.3 не показывает элементы внутри

. Однако он понимает атрибут srcset при использовании в обычных тегах. Убедитесь в том, что всегда включаете резервный с именем файла по умолчанию в атрибут srcset для Android 2.3 и других браузеров, которые могут иметь такую же проблему.

Требуется JavaScript и встроенная поддержка Media Query

Соответственно требуется, чтобы JavaScript был включен в браузере. Picturefill 2.0 не предоставляет «no-js» решения, ведь если это будет сделано, то когда браузер выкатит нативную поддержку

— будет показываться уже несколько изображений. Однако, вы можете использовать Picturefill 1.2, если параметр «no-js» является для вас обязательным.

Другим требованием Picturefill является встроенная поддержка media query, чтобы позволить обрабатывать выражения в атрибуте media . Все современные браузеры поддерживают media-выражения, лишь IE8 и ниже не имеют их поддержки, что соответствует лишь малой части пользователей.

Возможны дополнительные HTTP-запросы

Возможно, что в браузерах, которые имеют встроенную поддержку srcset , но пока не имеют поддержки

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

Это лишь временная проблема, и она пропадет как только выкатят встроенную поддержку

Источник

Picture — новый элемент, которого нет

В девелоперских сборках браузеров Chrome, Firefox и Opera появилась поддержка нового элемета picture , призванного решить ряд проблем возникающих при разработке адаптивных дизайнов. Давайте рассмотрим его подробнее.

Новый элемент picture , решает следующие задачи, встающие перед разработчиком адаптивных веб-приложений (я воспользуюсь классификацией, предложенной pepelsbey на одной из недавних конференций по фронтенду):

1. Ретина, т.е. экраны с плотностью точек на дюйм 150 и выше, на которых обычное изображение выглядит размыто
2. Адаптивность, задача изменения размеров изображения согласно вашим правилам, прописанным в дизайне в зависимости от размера вьюпорта.
3. Формат, возможность использовать современные форматы, такие как WebP, если они поддерживаются браузером
4. Кадрирование или Художественные цели. Обрезка маловажных частей изображения, при показе на устройствах с меньшим экраном.

Сложив первые буквы, получаем мнемонику РАФК

Синтаксис

Условно, расширенный синтаксис нового элемента выглядит так

Элемент picture не рендерит никакой контент, а лишь является справочным контейнером для вложенного в него тега img .

Поэтому для большинства задач хватит сокращенной записи, совсем без использования picture

Давайте рассмотрим как решаются вышеозначенные проблемы с помощью нового элемента. Все файлы примеров можно найти в этом репозитории github.com/fetis/picture

Для тестирования примеров из данной статьи на десктопе вам понадобятся либо Firefox Nighlty (поддержка picture включается настройкой dom.image.picture.enable в about:config), либо Chrome Canary, либо Opera Developer. На мобильном устройстве новый элемент можно протестировать в Chrome Beta

Ретина

У нас есть изображение 400х300 пкс, которое мы хотим также красиво показывать при двукратной и трехкратной плотности пикселей. Для этого готовим еще 2 картинки, размерами 800×600 и 1200х900 и пишем следующий код

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

Атрибут src в данном случае служит источником картинки для плотности 400w, 800w, 1200w — это дескрипторы ширины, они подсказывают браузеру картинка какой ширины находится по данному URL и на основе этой информации браузер принимает решение какое изображение лучше всего подойдет в текущей ситуации. Как и в случае с ретиной информация носит рекомендательный характер и окончательное решение какое изображение грузить остается за браузером.

Одновременное использование дескрипторов плотности и ширины недопустимо.

В атрибуте sizes перечисляются размеры изображения для всех контрольных точек в нашем дизайне. Контрольные точки задаются в виде обычного медиавыражения, браузер берет первое, которое возвращает Истину и дальше цепочку не рассматривает. Для значения ширины используется новая единица длины vw, которая возвращает значение в процентах от ширины вьюпорта.

Если для картинки нет необходимости использовать контрольные точки, то запись можно сократить до такой sizes=»100vw» . А для более сложных дизайнов можно использовать CSS-функцию calc() , например
sizes=»(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw — 100px)»

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

Как видите, мы уже покрыли 80% потребностей адаптивной верстки, а еще ни разу не использовали picture , настало время ему тоже вступить в игру.

Формат

Использование различных форматов для изображений мало отличается от способов используемых для тегов video или audio

Мы указываем список источников и mime/type для каждого, а браузер уже выбирает первый, который знает. В качестве фолбека используется изображения из атрибута src .

Кадрирование

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

В каждом атрибуте media мы задаем медиавыражение, при котором у нас будет меняться исходное изображение и, в отличие от предыдущих примеров, браузер будет обязан ему следовать. Обратите также внимание как кадрирование здесь сочетается с адаптивностью, чтобы растянуть изображение на всю ширину.

А теперь все 4 метода в одном флаконе 🙂 Возможно так будет выглядеть вставка картинок через пару лет (пример из блога Оперы)

Здесь используются 2 формата JPEG и WebP. При ширине экрана более 1280 пкс показывается полноразмерная картинка в половину вьюпорта. При ширине от 640 до 1279 показывается обрезанное фото на 60% ширины вьюпорта. При ширине экрана меньше 640пкс показывается обрезанная фотография на 100% ширины. Выбор под текущее DPI экрана производится на основе ширины исходных файлов.

Источник

Элемент

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

Чтобы выбрать оптимальное изображение, user agent анализирует атрибуты srcset , media , и type элемента и выбирает совместимое изображение, которое наилучшим образом соответствует текущему макету страницы, характеристикам устройства отображения и т. д.

часто используют для того, чтобы обеспечить HiDPI (Retina)-версию изображений для дисплеев с высоким разрешением, а также для добавления других форматов изображений, не поддерживаемых всеми браузерами.

Категории контента	Потоковый контент, фразовый контент, встроенный контент
Разрешённый контент	Ноль или более элементов , затем один элемент , при необходимости смешанный с элементами поддержки сценариев.
Пропуск тегов	Нет. Открывающий и закрывающий тег являются обязательными.
Разрешённые родители	Любой элемент, который разрешает встроенный контент
Разрешённые ARIA roles	Нет
DOM interface	HTMLPictureElement (en-US)

Атрибуты

Этот элемент содержит только универсальные атрибуты.

Примеры

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

Атрибут media

Атрибут media позволяет определить медиавыражение, которое веб-браузер будет анализировать для выбора элемента . Если медиавыражение определяется как ложное (false) , то элемент пропускается.

Атрибут type

Атрибут type позволяет вам обозначить MIME-тип данных, указанных в атрибуте srcset элемента . Если браузер не поддерживает данный тип, то элемент опускается.

Источник