Srcset html что это

Руководство по WebKit-атрибуту srcset в тэге img

Свободный движок WebKit теперь поддерживает srcset атрибут изображений, IMG элементов (официальная спецификация от W3C). Это позволяет вам, как разработчику, использовать картинки с высоким разрешением для пользователей использующих ретина-дисплей без ущерба для остальных пользователей. Также важно отметить о наличие изящного решения для браузеров, которые еще не поддерживают данный функционал.

Обратите внимание, в необходимости использовать последние ночные сборки WebKit.

Это позволит браузеру выбрать наилучший вариант для конкретного устройства пользователя. Прежде, для поддержки больших картинок у вас было несколько путей развития, каждый с определенными недостатками. Вы могли дублировать CSS код. Вы могли использовать JavaScript для запроса (window.devicePixelRatio) количества точек на px. (device pixel ratio) и обновлять картинки после загрузки страницы. Или вы могли всегда отдавать большие картинки, тем самым заставляя некоторых пользователей грузить лишнее. И если вам необходимы были картинки с разными разрешениями приходилось уточнять связанные CSS свойства, такие как background-size как часть border-image. Это раздражало.

Обратили внимание на “2x” после “better-image.jpg”? Это говорит браузеру, что для экранов устройств с devicePixelRatio = 2 и более, необходимо использовать better-image.jpg взамен normal-image.jpg. И если экран устройства не «ретина», браузер обратится к атрибуту src. Вы также можете задавать значение 1х атрибута srcset, как в примере ниже.

Ниже приведено изображение — img элемент с обоими атрибутами: src и srcset. Существует стиль устанавливающий размер картинки в 400x400px. В браузерах без поддержки srcset, будет использоваться значение src, а следовательно загрузится стандартная картинка:

На обычных экранах будет загружаться вариант 1х srcset атрибута:

На ретина дисплеях будет загружаться вариант 2х srcset атрибута:

Больше об srcset можно прочитать в официальной спецификации. Обратите внимание, что на данный момент только WebKit поддерживает «коэффициенты разрешений» — 1x, 2x, 3x. Как и любой новый функционал, WebKit может содержать ошибки, поэтому будьте бдительны. В частности, вы должны убедиться, что WebKit загружает минимальные ресурсы для страницы, потому что это одна из целей этой функции.

Особая благодарность членам сообщества WebKit Romain Perier и Yoav Weiss которые внесли важный вклад (r153624, r153733) в развитие данного функционала.

Источник

Адаптивные изображения на сайте: создание с помощью атрибута srcset

Дата публикации: 2015-11-24

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

Если вы слышали про адаптивный веб-дизайн (RWD), то, скорее всего, вы знаете про тонкости, с которыми приходится сталкиваться (и то как Bootstrapрешает их!). Важной составляющей адаптивного сайта являются адаптивные изображения. В этой статье мы узнаем, что такое адаптивные изображения на сайте. Рассмотрим создание адаптивных изображений с помощью атрибута srcset.

Что такое адаптивные изображения?

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

Когда вы хотите, чтобы изображение отлично отображалось на экранах разных физических размеров. К примеру, вам надо показать одно и то же изображение на 13.5 дюймовом экране ноутбука и на 5 дюймовом экрана смартфона (окно браузера на весь экран).

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Адаптивные блоки поддерживаются в большинстве современных браузеров, в том числе в Microsoft Edge (начиная с Windows Insider Build 10547). Поддержку свойства srcset в различных браузерах можно посмотреть здесь.

Как сделать изображения адаптивными

Существует масса способов сделать изображения адаптивными. Один из старых способов – с помощью скрипта (не рекомендуется). Но с ним связаны некоторые проблемы. Первая проблема – если изображение загружается через скрипт, но сам скрипт расположен ниже загружаемого изображения, то можно получить два изображения. Вторая проблема – если в разметке не прописано изображение, и оно загружается только через JS, то есть шанс, что изображение вообще не загрузится, если в браузере отключен JS.

Отсюда вытекает то, что нам нужен лучший способ для создания адаптивных изображений. И к счастью, он существует! В этом методе используются атрибуты: srcset, sizes, picture

Атрибут srcset

Перед тем, как я объясню принцип работы атрибута srcset, важно понять несколько терминов:

Соотношение логических и физических пикселей на устройстве

Соотношение логических и физических пикселей это количество пикселей экрана устройства на один пиксель CSS. Тут есть еще два ключевых термина:

Плотность пикселей устройства (число физических пикселей на дюйм): У устройств с большим разрешением будет большая плотность пикселей, а следовательно, на одном уровне масштабирования у такого устройства будет большее соотношение логических пикселей к физическим. К примеру, у смартфона Lumia 950 большее разрешение, чем у бюджетной Lumia 630. Значит, у первой люмии соотношение логических пикселей к физическим выше.

Уровень масштабирования браузера: На одном и том же устройства больший уровень масштабирования означает большее количество физических пикселей на один пиксель CSS, а следовательно, и большее соотношение логических и физических пикселей. К примеру, рассмотрим такую фигуру:

Если приблизить картинку в браузере (Ctrl + Plus), число CSS пикселей для блока DIV не изменится, а вот количество физических пикселей увеличится. Т.е. увеличится число физических пикселей на один CSS пиксель. Если вы хотите отобразить изображение или его часть с помощью метода соотношения логических и физических пикселей, вам понадобится атрибут srcset:

Источник

HTMLImageElement.srcset

Синтаксис

Значение

A USVString containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the element represented by the HTMLImageElement .

If the condition descriptor is not provided (in other words, the image candidate provides only a URL), the candidate is used as the fallback if none of the other candidates match. Otherwise, the condition descriptor may take one of two forms:

You may mix and match the two types of descriptor. You must not, however, provide multiple image candidate strings that specify the same descriptor. All of the following are valid image candidate strings:

This string provides versions of an image to be used at the standard pixel density ( 1x ) as well as double that pixel density ( 2x ). Also available is a version of the image for use at a width of 2048 pixels ( 2048w ).

This string provides versions of a header image to use when the user agent’s renderer needs an image of width 640px, 960px, or 1024px. An additional, fallback image candidate is provided without any condition at all, to be used for any other width.

Here, options are provided for an icon at widths of 32px and 64px, as well as at pixel densities of 2x and 3x. A fallback image is provided as an SVG file that should be used in all other cases. Notice that the candidates may use different image types.

For more information on what image formats are available for use in the element, see Image file type and format guide.

Пример

The HTML below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our documentation. Also specified by the srcset attribute is that the 200-pixel version should be used for 1x displays while the 400-pixel version should be used for 2x displays.

The CSS simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it. Also provided is the word-break attribute, using the break-all value to tell the browser to wrap the string within the width available regardless of where in the string the wrap must occur.

JavaScript

Результат

In the displayed output below, the selected URL will correspond with whether your display results in selecting the 1x or the 2x version of the image. If you happen to have both standard and high density displays, try moving this window between them and reloading the page to see the results change.

For additional examples, see our guide to responsive images.

Источник

Все об атрибуте srcset: как правильно настроить адаптивные изображения

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

Что такое srcset

Атрибут s rcset предназначен для объявления адаптивных изображений. Браузер самостоятельно анализирует размер экрана пользователя и решает, какую из объявленных картинок (т.е. какой размер картинки) выбрать для демонстрации. Далее вы видите один из стандартных примеров объявления srcset в коде, который позволит разобраться с синтаксисом данного атрибута:

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

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

Зачем нужны адаптивные изображения

У некоторых пользователей при прочтении данной статьи может возникнуть вопрос по поводу того, зачем вообще использовать отзывчивые изображения. Разве не проще загрузить одну картинку и сжимать ее, если это потребуется? Дело в том, что при изначально большом размере картинки (например, 4516px/3Мб) средство оптимизации сайта не сработает так быстро, как этого хотелось бы. Соответственно, скорость загрузки контента несколько замедлится.

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

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

Принцип обработки адаптивных изображений

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

Настройка и тестирование отзывчивых изображений

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

Использование атрибута sizes

Разберем эту строчку, чтобы понимать, как она работает. Браузер считывает код и опускается к этому атрибуту. Если он определяет, что максимальная ширина экрана не превышает 720px, то выводит изображение в полном размере. Если же она больше – выводит в 720px.

Источник

Адаптивные изображения

Почему адаптивные изображения?

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

Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть посмотреть демо-пример и найти исходный код на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:

Всё хорошо, однако проблемы начинаются, когда вы просматриваете сайт на устройстве с небольшим экраном – шапка внизу выглядит нормально, но теперь она занимает значительную высоту экрана; первое изображение в контенте напротив, выглядит ужасно – при таком размере едва можно рассмотреть людей!

Было бы намного лучше показывать обрезанную версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком экране, и, возможно, что-то среднее между обрезанным и оригинальным изображениями для экранов средней ширины, таких как планшеты – это известно как art direction problem.

Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется resolution switching problem — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали векторную графику, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.

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

Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше.

Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. Технологии отзывчивых изображений были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (resolution switching), или разные изображения с отдельными областями основного изображения (art direction).

Примечание: Новые возможности обсуждаются в статье — srcset / sizes /

— все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).

Как сделать изображения отзывчивыми?

Разные разрешения: Разные размеры

Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент обычно позволяет указать только один путь к файлу:

Однако есть два новых атрибута — srcset and sizes — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: responsive.html (также смотри источник кода).

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

srcset включает названия изображений, среди которых браузер выберет нужное и их размеры. Перед каждой запятой части значения в таком порядке:

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

Итак, с такими атрибутами, браузер сделает следующее:

Note: В описании элемента вы найдёте строку : это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)

Полезные инструменты разработчика

Есть несколько полезных браузерных инструментов разработчика, чтобы помочь с определением необходимой ширины слотов и т. д., которые вам нужно использовать. Когда я работал над ними, я сначала загружал фиксированную версию моего примера ( not-responsive.html ), затем открывал Responsive Design View (Tools > Web Developer > Responsive Design View), который позволяем взглянуть на layout вашей веб-страницы как если бы они были просмотрены через устройства с различными размерами экрана.

Я устанавливал viewport width на 320px, затем на 480px; для каждой я обращался к DOM Inspector, кликал по элементу в котором мы заинтересованы, далее смотрел размер во вкладке Box Model с правой стороны дисплея. Это должно дать вам необходимую ширину изображения

А дальше вы можете проверить работает ли srcset если установить значение viewport width таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (Tools > Web Developer > Network) и затем перезагрузить страницу. Это должно дать вам перечень ресурсов которые были загружены чтобы составить (собрать) web-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.

Переключения разрешений: Одинаковый размер, разные разрешения

Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя srcset с x-дескриптором и без sizes — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):

В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):

Художественное оформление

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

позволяет нам применять именно такое решение.

Возвращаясь к нашему оригинальному примеру not-responsive.html, мы имеем изображение которое очень нуждается в художественном оформлении:

Давайте исправим это при помощи элемента

, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент ) или браузер не поддерживает элемент

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

Почему это нельзя сделать посредством CSS и JavaScript?

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

Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.

Активное обучение: реализация собственных адаптивных изображений

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

Примечание: Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.

Заключение

Источник