Лучшие отзывчивые изображения с элементом изображения

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

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

Адаптивный веб-дизайн ( RWD ) взял штурмом веб-разработчиков и дизайнеров, изменив их подход к разработке веб-сайта. Говоря о RWD , я люблю проводить аналогии. Мы, как люди, занимающиеся разработкой программного обеспечения, всегда рады новым инструментам так же, как новая игрушка в восторге от ребенка (вы слышали о недавней диатрибе об инструментах автоматизации интерфейса , не так ли?). Мы настолько заинтригованы новыми игрушками, что иногда мы используем и даже разрабатываем инструменты, которые не решают реальную проблему. Ну, RWD не похож на новую игрушку, с которой все любят играть без веской причины. Это методология, которая помогает нам решать реальные проблемы: адаптировать сайт для самых разных экранов. Однако, как и многие (все?) Вещи в жизни, он не идеален и имеет некоторые ограничения.

Одна из наиболее важных нерешенных проблем — предоставление изображений контента для практически неограниченного круга устройств, пытаясь предоставить версию, которая лучше подходит для конкретного устройства, которое в настоящее время посещает наш веб-сайт. Для тех из вас, кто не знает, что такое изображения контента, они являются частью контента контента. Следовательно, они должны отображаться с использованием <img> а не правила CSS, такого как background-image . На данный момент три основных предложения были сделаны, обсуждены, отклонены и даже воскрешены (как элемент picture ). Предложения: атрибут srcset , элемент picture и атрибут src-n . Все они пытались охватить более широкий спектр возможных вариантов использования, но, к сожалению для нас, ни один из них не был полностью принят всеми участниками. На момент написания этой статьи, кажется, что <picture> будет подходить из-за положительных комментариев к обновленному предложению со стороны представителей основных браузеров. Под обновлением я подразумеваю, что первоначальное предложение было обновлено с учетом некоторых особенностей предложения атрибута src-n .

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

Важная заметка

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

Что такое <picture> элемент?

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

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

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

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

<picture> в действии

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

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

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

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

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

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

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

Никто. «Эй, Аурелио, что ты имеешь в виду под ником? Я уже начал обновлять свой сайт!» Если вы узнаете себя в этом предложении, извините, что разочаровал вас. Как я уже неоднократно говорил в этой статье, элемент picture все еще является предложением и находится на очень ранней стадии. Таким образом, вы должны подождать некоторое время, прежде чем иметь возможность использовать его. Однако не все потеряно. Скотт Джел создал для этого предложения полифилл под названием picturefill . Последний был разработан несколько месяцев назад, но несколько раз обновлялся для соответствия спецификациям. В настоящее время он не обновлен до последних спецификаций, поэтому его синтаксис отличается от описанного в этой статье. Тем не менее, вы все равно можете взглянуть на него и, возможно, сделать запрос на извлечение, чтобы помочь проекту.

Выводы

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