Некоторое время назад я написал статью об атрибуте srcset . Это атрибут элемента img предназначенный для предоставления нужного изображения конкретному устройству. srcset позволяет разработчикам указывать список источников для изображения, из которых он будет выбран на основе плотности пикселей или размера экрана пользователя и отображаться для пользователя.
Браузер снабжен набором «предложений» о правильном поведении с определенными типами изображений, что позволяет сократить время загрузки страницы. Этот метод уменьшает вес веб-сайта для устройств с маленькими экранами (которые мы обычно называем устройствами с медленным подключением) и, таким образом, улучшает пользовательский опыт. На момент написания этой статьи этот атрибут был отдельным предложением, но с тех пор был включен в более широкое предложение, элемент picture .
В этом уроке я дам обзор элемента picture , описав его основные особенности и преимущества.
Что за элемент изображения?
Тема предоставления правильного изображения (с точки зрения размера и плотности пикселей) для данного устройства широко обсуждалась на протяжении многих лет. Примерами последних статей являются «Адаптивные изображения: если вы просто меняете разрешение, используйте srcset.» Криса Койера и «Не используйте <picture> (большую часть времени) </ picture>» Джейсона Григсби.
Первое, что нужно понять об элементе picture это то, что он ничего не отображает сам по себе. Он просто предоставляет контекст для изображений, которые вставляются в него, и это позволяет браузерам выбирать из нескольких исходных URL-адресов. Этот элемент отличается от других подобных элементов контейнера, таких как хорошо известные video и audio . Атрибут src не имеет смысла, когда source элемент вложен в picture и алгоритм выбора ресурса не совпадает.
Это можно резюмировать следующим образом. Для элементов video и audio , если указан атрибут src , он имеет абсолютный приоритет над элементами source , которые не учитываются. Но в случае элемента picture , поскольку мы видели, что это не что иное, как контейнер, source элемент является тем, который рассматривается в любой ситуации.
Если мы вернемся к определению, доступному в спецификациях W3C , мы обнаружим, что элемент picture является контейнером, который предоставляет несколько источников для содержащегося в нем элемента img . Это позволяет авторам декларативно контролировать или давать подсказки пользовательскому агенту о том, какой ресурс изображения использовать, на основе плотности пикселей экрана, размера области просмотра, формата изображения и других факторов. Он представляет своих детей. Внутри этого элемента мы можем поместить два разных <img /> , <img /> , используемые для обеспечения обратной совместимости для браузеров, которые его не поддерживают, и <source /> .
source элемент обладает четырьмя атрибутами:
-
srcset: используя этот атрибут, мы можем указать URL изображения, которое мы хотим показать. Это принимает несколько URL-адресов, разделенных запятой. Как и вsrcsetатрибутомsrcset, у нас есть возможность связать каждый URL с разрешением экрана или спецификацией ширины (отделенной от URL пробелом). -
media: здесь мы пишем медиа-запрос, который, если его оценить как true, даст подсказки о том, какое изображение указано вsrcsetдля показа. -
sizes: это атрибут, в котором мы указываем набор внутренних размеров для источников, описанных вsrcset. Он также принимает несколько размеров, разделенных запятой. -
type: Это дает тип изображений в исходном наборе, чтобы пользовательский агент мог перейти к следующему элементуsourceесли он не поддерживает данный тип.
Элемент picture можно использовать по-разному. Давайте рассмотрим краткий список «направлений», которые вы можете дать этому элементу:
Выбор на основе художественного направления : это наиболее распространенное использование элемента picture в адаптивном дизайне. Вместо увеличения или уменьшения одного изображения в зависимости от ширины области просмотра, существует несколько изображений, которые могут более подходящим образом заполнить область просмотра браузера. Это хорошо, потому что, как предполагают спецификации W3C. «Использование различных изображений, обрезанных для соответствия конкретным функциям экрана, может помочь в эффективном обмене сообщениями».
Выбор на основе отношения пикселей к устройству. Как дизайнеры, вы должны стремиться отображать изображения таким образом, чтобы уменьшить заметные кадрирования. Устройства с разной плотностью экрана требуют изображения с различным минимальным разрешением. Таким образом, чем выше плотность пикселей, тем больше пикселей должно выглядеть на изображении.
Выбор на основе области просмотра : авторам может потребоваться показать одинаковое содержимое изображения, но с разными размерами визуализации, в зависимости от ширины области просмотра. Обычно это называется «выбор на основе области просмотра». Размеры изображения в адаптивных макетах обычно варьируются в зависимости от размера области просмотра. Обычно изображения с большими размерами отправляются в браузеры с узкими областями просмотра, которые затем изменяются браузером в соответствии с дизайном. В идеале, вы должны обслуживать изображения, которые соответствуют размерам области просмотра пользователя, не отправляя пользователю больше данных, чем было бы необходимо в противном случае.
Выбор на основе формата изображения : авторам может потребоваться показать одно и то же содержимое изображения, но с использованием разных форматов изображения, в зависимости от того, какие форматы изображений поддерживает пользовательский агент. Обычно это называется «выбор на основе формата изображения». Дизайнеры всегда должны стараться предоставлять одно и то же изображение в нескольких разрешениях. Таким образом, устройства с высоким разрешением получат оптимальное изображение для данного разрешения, в то время как устройства с низким разрешением не будут тратить время и трафик на загрузку слишком больших (бесполезных) файлов.
Использование рисунка: практические примеры
Теперь, когда мы обнаружили варианты использования этого элемента, пришло время показать пример. Представьте, что мы работаем над сайтом с мобильным подходом. На этом гипотетическом веб-сайте мы будем использовать те же изображения под названием « Autumn in Moscow , которые я использовал в предыдущей статье . В следующем коде мы покажем изображение autumn-in-moscow-mobile.png по умолчанию, а затем изображения, которые мы хотели бы отобразить, если пользователи посещают веб-сайт с планшета или со своего рабочего стола. Следовательно, autumn-in-moscow-tablet.png будет использоваться для устройств с экраном не менее 680 пикселей, с autumn-in-moscow-desktop.png для устройств с шириной экрана не менее 1024 пикселей. Поскольку мы можем ожидать, что будут некоторые браузеры, которые не смогут распознавать элемент picture , мы также предоставим запасное изображение. Используется резервное изображение autumn-in-moscow.png .
Код, который реализует вышеуказанное:
<picture> <source media="(min-width: 1024px)" srcset="autumn-in-moscow-desktop.png"> <source media="(min-width: 680px)" srcset="autumn-in-moscow-tablet.png"> <source srcset="autumn-in-moscow-mobile.png"> <img src="autumn-in-moscow.png" alt="Autumn in Moscow"> </picture>
Все идет нормально. Но что, если мы хотим улучшить специфику нашего фрагмента, сосредоточив внимание на мощности атрибута srcset ? Подумайте о том, чтобы подчеркнуть разницу в изображениях с учетом разрешения экрана. Следующий код даст вам представление о том, что вам нужно добавить:
<picture> <source media="(min-width: 1024px)" srcset="autumn-in-moscow-desktop.png, autumn-in-moscow-desktop-hd.png 2x"> <source media="(min-width: 480px)" srcset="autumn-in-moscow-tablet.png, autumn-in-moscow-tablet-hd.png 2x"> <source srcset="autumn-in-moscow-mobile.png, autumn-in-moscow-mobile-hd.png 2x"> <img src="autumn-in-moscow.png" alt="Autumn in Moscow"> </picture>
Как мы уже говорили в предыдущем разделе, атрибут srcset принимает несколько URL-адресов, разделенных запятой. Кроме того, мы можем сопоставить каждый URL с разрешением экрана или спецификацией ширины. В этом случае второй URL соединяется со строкой 2x, разделенной пробелом, который предназначен для пользователей с дисплеем с высоким разрешением (плотность пикселей 2x, как у Retina).
Первым запросом, который выполняет браузер, является source элемент, который наилучшим образом соответствует экрану пользователя на основе указанного медиазапроса (если имеется). Вторым элементом, принимаемым во внимание, будет разрешение экрана с выбором наиболее подходящего изображения среди тех, которые были указаны в srcset .
Чтобы завершить наш обзор элементов, составляющих элемент picture , давайте посмотрим, как мы можем использовать атрибут sizes . Давайте представим, что мы хотим, чтобы наше изображение занимало 50% ширины, независимо от его фактического размера и плотности пикселей. Чтобы достичь этой цели, мы должны указать размер, который мы хотим покрыть, и размер каждого изображения в srcset следующим образом:
<picture> <source sizes="50vw" srcset="autumn-in-moscow-mobile.png 480w, autumn-in-moscow-small-tablet.png 768w, autumn-in-moscow-tablet.png 968w, autumn-in-moscow-desktop.png 1024w"> <img src="autumn-in-moscow.png" alt="Autumn in Moscow"> </picture>
Совместимость
Элемент picture в настоящее время поддерживается только по умолчанию (то есть без необходимости активировать какой-либо флаг в вашем браузере) в Chrome 38+ и Opera 25+. Начиная с версии 34, Firefox поддерживает этот элемент за флагом. Начиная с версии 38, Firefox также будет поддерживать picture по умолчанию. Элемент все еще находится на рассмотрении в Internet Explorer. К счастью, Скотт Джехл создал для этого предложения полифилл под названием picturefill , обновленный до последних спецификаций. Вы можете скачать его и найти всю необходимую информацию здесь .
Вывод
В этой статье мы углубились в спецификации элемента picture в качестве решения для решения проблемы адаптивных изображений. Это позволяет разработчикам решить проблему настройки правильного разрешения изображения для нескольких устройств. Как мы уже видели, это последнее решение, которое после многих лет обсуждений было сделано из лучших предложений всех прошлых лет. Я рекомендую вам ознакомиться со спецификациями, чтобы еще лучше понять огромный потенциал и варианты использования этого элемента.