Улучшаем адаптивные изображения при помощи элемента <picture>

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

Элемент picture

Зачем нам нужен новый элемент?

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

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

Одна из наиболее важных проблем это обработка контентных изображений для почти бесконечного числа устройств, попытка выбрать ту версию, которая наилучшим образом подходит для устройства, с которого просматривается наш сайт. Для тех, кто не знает что такое контентные изображения, это те изображения, которые являются частью контента. Следовательно, они должны быть представлены тегом <img>, а не CSS правилом вроде background-image.

Пока что, были вынесены, обсуждены, отклонены и даже воскрешены (элемент picture, например) три главных претендента. И эти претенденты: атрибут srcset, элемент picture, и атрибут src-n. Каждый из них пытается покрыть как можно более широкий диапазон вариантов использования, но, к сожалению для нас, никто из них не получил полную поддержку всех участвующих сторон.

На момент написания статьи, похоже что <picture> приживется, благодаря позитивным отзывам на обновления претендента внесенные представителям основных браузеров. Что я имею ввиду под словом «обновления», так это то, что оригинальный претендент был обновлен, в него были включены некоторые особенности претендующего атрибута src-n.

Учитывая, что на основании последних статистических исследований HTTPArchive.org, доля изображений составляет 62% от общей массы веб-страницы, легко можно понять, что решение проблемы контентных изображений первоочередная задача, и чем раньше мы придем к какому-то решению, тем лучше.

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

Важное замечание

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

Что такое <picture>

В спецификации сказано, «элемент picture предназначен для того, чтоб дать авторам способ контроля над тем, какой источник изображения пользовательский агент (браузер) показывает пользователю, основываясь на медиа-запросах и/или поддержке изображений определенного типа».

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

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

Первое, что вам следует знать — это просто контейнер для других элементов, в котором мы будем определять различные версии того изображения, которое мы желаем показать. Внутри элемента picture вы можете увидеть два тега: <source> и <img>. Последний используется для обеспечения обратной совместимости со старыми браузерами, или, в общем случае, для браузеров, которые его не поддерживают.

Для элемента source доступно три атрибута:

  • srcset: Здесь мы определяем URL изображения, которое хотим показать. Атрибут поддерживает указание нескольких URL’ов через запятую. Кроме того, следуя примеру претендующего атрибута srcset, мы можем добавить для каждого URL спецификацию расширения и ширины (предполагается правило min-width). Последнее отделено от URL пробелом.
  • media: Здесь мы записываем медиа-запрос который, при срабатывании, предложит браузеру показать изображение определенное в атрибуте srcset.
  • sizes: Атрибут в котором мы определяем набор внутренних размеров для источников описанных в атрибуте srcset. Он принимает множество размеров, разделенных запятой..

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

Элемент <picture> в действии

В качестве нашего первого примера, давайте предположим, что мы разрабатываем сайт используя подход «mobile-first». Мы хотим показать контентное изображение и отобразить изображение «mobile.png» по-умолчанию, изображение «tablet.png», если экран пользователя как минимум 480px, и «desktop.png» если экран пользователя по меньшей мере 1024px.

Поскольку мы сообразительные разработчики, мы также хотели бы отобразить изображение «tablet.png» для тех браузеров, которые не понимают элемент picture. Чтобы добиться этого, мы должны написать следующий код:

<picture>
   <source srcset="mobile.png">
   <source media="(min-width: 480px)" srcset="tablet.png">
   <source media="(min-width: 1024px)" srcset="desktop.png">
   <img src="tablet.png" alt="Фото ночного Лондона">
</picture>

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

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

<picture>
   <source srcset="mobile.png, mobile-hd.png 2x">
   <source media="(min-width: 480px)" srcset="tablet.png, tablet-hd.png 2x">
   <source media="(min-width: 1024px)" srcset="desktop.png, desktop-hd.png 2x">
   <img src="tablet.png" alt="Фото ночного Лондона">
</picture>

Как вы могли заметить, для каждого элемента <source> в коде, мы задали более одного URL в атрибуте srcset. Второй URL идет с параметром 2x, отделенным пробелом, он нацелен на пользователей с экранами высокого разрешения (плотность пикселей 2x, например, Retina дисплей).

В этом случае, браузер сначала будет искать на основании медиа-запросов (если таковые есть) элемент source, который лучше остальных соответствует экрану пользователя. Затем, он определит разрешение экрана и выберет наиболее подходящее изображение из заданных в атрибуте srcset.

В качестве нашего последнего примера, мы рассмотрим, как мы можем использовать атрибут sizes. Предположим мы хотим, чтобы наше изображение покрывало всю ширину экрана устройства (100% ширины), вне зависимости от его действительного размера и плотности пикселей.

Для достижения этой цели мы можем указать размер зоны покрытия и размер каждого изображения в атрибуте srcset, как показано ниже:

<picture>
   <source sizes="100%" srcset="mobile.png 480w, small-tablet.png 768w, tablet.png 968w, desktop.png 1024w">
   <img src="tablet.png" alt="Фото ночного Лондона">
</picture>

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

Совместимость с браузерами

Ее нет. «Эй, Аурелио, что значит — нет? Я уже начал обновлять свой сайт!»

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

Скот Джел создал «полифил» для этого претендента под названием picturefill. Он был создан несколько месяцев назад, но несколько раз обновлялся, чтобы соответствовать спецификации. На данный момент, он не обновлен до последней версии спецификации, так что его синтаксис отличается от описанного в этой статье. Однако, вы все еще можете взглянуть на него и возможно сделать «пул-реквест», чтобы помочь проекту.

Заключение

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

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

Оригинал статьи на английском языке на сайте nettuts+

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *