| HTML | WebReference

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

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

Синтаксис

<picture>
  <source>
  <img>
</picture>

Внутри <picture> содержится ноль или несколько элементов <source>, которые идут перед одним элементом <img>.

Закрывающий тег

Пример

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>picture</title> 
 </head> 
 <body> 
  <picture>
   <source srcset="image/html5-logo.svg">
   <img src="image/html5-logo.png" alt="HTML5">
  </picture> 
 </body> 
</html>

В данном примере используется два изображения: одно в формате SVG, а второе в привычном PNG. Браузеры, которые поддерживают элемент <picture>, отобразят картинку в векторном виде (рис. 1). Браузер IE покажет изображение в формате PNG (рис. 2). Для наглядности логотип дан размером 128х128 пикселей и увеличен до 256х256.

Рис. 1. Картинка в формате SVG

Рис. 2. Картинка в формате PNG

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

webref.ru

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

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


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

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

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

Синтаксис

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

<picture>
  <source 
    srcset="<список URL c дескрипторами>" 
    [sizes="<ваши размеры в зависимости от раскладки>"] 
    [media="<медиавыражение>"] 
    [type="<mime/type>"]
  >
 <source ...>
  ...
  <img src="image.jpg" alt="My image" 
    [srcset="<список URL с дескрипторами>"] 
    [sizes="<ваши размеры в зависимости от раскладки>"]>
</picture>

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

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

  <img src="image.jpg" alt="My image" 
    [srcset="<список URL с дескрипторами>"] 
    [sizes="<ваши размеры в зависимости от раскладки>"]>

Давайте рассмотрим как решаются вышеозначенные проблемы с помощью нового элемента. Все файлы примеров можно найти в этом репозитории 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 и пишем следующий код

      <img
        src="images/400.jpg"  
        srcset="images/800.jpg 2x, images/1200.jpg 3x"
       
        >

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

Атрибут src в данном случае служит источником картинки для плотности < 2 и фолбеком на случай, если браузер не поддерживает новый элемент.

Адаптивность

Представим раскладку, в которой есть единственная контрольная точка (breakpoint) 700пкс. При размере вьюпорта более 700 пкс мы показываем справа сайдбар и размер нашего изображения должен быть 75% от ширины экрана. В противном случае сайдбар располагается в конце страницы и изображение должно быть растянуто на всю ширину. Это реализуется следующим кодом

      <img
        src="images/400.jpg"  
        srcset=" 400w, images/800.jpg 800w, images/1200.jpg 1200w"
       
        >

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

      <picture>
        <source srcset="images/400.webp" type="image/webp">
        <img src="images/400.jpg"
          
        >
      </picture>

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

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

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

      <picture>
        <source media="(min-width: 900px)" srcset="images/original.jpg 1200w">
        <source media="(min-width: 700px)" srcset="images/800crop.jpg 800w">
        <img 
          srcset="images/400crop.jpg 400w"
           
          >
      </picture>

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

РАФК

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

<picture>
	<source
		media="(min-width: 1280px)"
		sizes="50vw"
		srcset="opera-fullshot-200.webp 200w,
				opera-fullshot-400.webp 400w,
				opera-fullshot-800.webp 800w,
				opera-fullshot-1200.webp 1200w,
				opera-fullshot-1600.webp 1600w,
				opera-fullshot-2000.webp 2000w"
		type="image/webp">
	<source
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-closeup-200.webp 200w,
				opera-closeup-400.webp 400w,
				opera-closeup-800.webp 800w,
				opera-closeup-1200.webp 1200w,
				opera-closeup-1600.webp 1600w,
				opera-closeup-2000.webp 2000w"
		type="image/webp">
	<source
		media="(min-width: 1280px)"
		sizes="50vw"
		srcset="opera-fullshot-200.jpg 200w,
				opera-fullshot-400.jpg 400w,
				opera-fullshot-800.jpg 800w,
				opera-fullshot-1200.jpg 1200w,
				opera-fullshot-1600.jpg 1800w,
				opera-fullshot-2000.jpg 2000w">
	<img
		src="opera-closeup-400.jpg" alt="The Oslo Opera House"
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-closeup-200.jpg 200w,
				 400w,
				opera-closeup-800.jpg 800w,
				opera-closeup-1200.jpg 1200w,
				opera-closeup-1600.jpg 1600w,
				opera-closeup-2000.jpg 2000w">
</picture>

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

Дополнительная информация

Поддержка браузерами caniuse.com/#search=picture
Спецификация www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-picture-element
Рабочая группа и типовые задачи, которые они решали с помощью нового элемента responsiveimages.org
Множество примеров использования dev.opera.com/articles/responsive-images

habr.com

| Справочник HTML



Элемент <picture> (от англ. «picture» ‒ «картина, изображение») представляет собой контейнер для хранения нескольких элементов <source>, каждый из которых содержит имена файлов альтернативных версий одного и того же изображения вместе с условиями, при которых те должны быть загружены. Это позволяет указывать разные изображения с учётом размера экрана, плотности пикселей, формата изображения и других параметров. Выбранный браузером вариант изображения выводится с помощью вложенного элемента <img>. Элемент <picture> может ускорить загрузку ваших сайтов, особенно на мобильных девайсах.

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

Вот несколько областей применения элемента <picture>:

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

Синтаксис

<picture>
  <source srcset="URL">
  ... 
  <img src="..." alt="...">
</picture>

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны глобальные атрибуты.

Различия между HTML 4.01 и HTML5

Элемент <picture> был введен в HTML 5.

Пример использования:

В следующем примере загружаемое изображение зависит от размера экрана:

Пример HTML:

Попробуй сам


<picture>
  <source media="(max-width: 25em)"
          srcset="iphone.png">

  <source media="(max-width: 48em)"
          srcset="[email protected]">

  <img src="iphone.png"
      alt="iPhone">

</picture>

Спецификации

Поддержка браузерами


Элемент


<picture> 38+ 25+ Да 9.1+ 38+


Элемент


<picture> 38+ 35+ 9.3+

Учебник HTML

HTML уроки: HTML Элементы

HTML Изображения



wm-school.ru

Использование тэга HTML5 picture для адаптивных изображений

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

 

Перевод выполнила: Валерия Заруцкая

Меня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails.

Во-первых, сама проблема

Времена дизайна сайтов с фиксированной шириной и полным соответствием макету давно позади. В нынешнее время широкоформатных мониторов, интернет-телевидения, планшетов и смартфонов различных размеров наш дизайн должен принимать в расчет любые разрешения – от 320 пикселей и до 7680.

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

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

Нынешнее, самое распространенное решение

Как правило, вы найдете следующее в CSS коде практически любого адаптивного сайта:

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

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

Узнать подробнее

img { max-width: 100%; height: auto;}

img {    max-width: 100%;    height: auto;}

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

Одно «резиновое» изображение для всех устройств

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

Новое решение: тэг picture

picture — это новый элемент, который должен стать частью HTML5. Он значительно ускорит процесс размещения адаптивных изображений аналогично принципам работы элементов audio и video. Он позволит задавать несколько элементов source, каждый из которых будет указывать на различные файлы изображений вместе с условиями, при которых они должны загружаться.

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

Результатов медиа-запроса, например, высота окна просмотра, ширина, ориентация

Плотность пикселей

Что означает, что вы можете:

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

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

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

Разные изображения загружаются в зависимости от обстоятельств

Как работает элемент picture?

Основные шаги для работы с элементом picture это:

Создание открывающих и закрывающих тэгов picture.

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

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

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

Добавьте дополнительные имена файлов вашему srcset атрибуту, если вы хотите поддерживать экраны с высокой плотностью пикселей, например Ретина.

Добавьте элемент img в качестве запасного варианта.

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

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

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

Узнать подробнее

<picture> <source srcset=»smaller.jpg» media=»(max-width: 768px)»> <source srcset=»default.jpg»> <img srcset=»default.jpg» alt=»My default image»></picture>

<picture>    <source srcset=»smaller.jpg» media=»(max-width: 768px)»>    <source srcset=»default.jpg»>    <img srcset=»default.jpg» alt=»My default image»></picture>

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

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

<picture> <source srcset=»smaller_landscape.jpg» media=»(max-width: 40em) and (orientation: landscape)»> <source srcset=»smaller_portrait.jpg» media=»(max-width: 40em) and (orientation: portrait)»> <source srcset=»default_landscape.jpg» media=»(min-width: 40em) and (orientation: landscape)»> <source srcset=»default_portrait.jpg» media=»(min-width: 40em) and (orientation: portrait)»> <img srcset=»default_landscape.jpg» alt=»My default image»></picture>

<picture>    <source srcset=»smaller_landscape.jpg» media=»(max-width: 40em) and (orientation: landscape)»>    <source srcset=»smaller_portrait.jpg» media=»(max-width: 40em) and (orientation: portrait)»>    <source srcset=»default_landscape.jpg» media=»(min-width: 40em) and (orientation: landscape)»>    <source srcset=»default_portrait.jpg» media=»(min-width: 40em) and (orientation: portrait)»>    <img srcset=»default_landscape.jpg» alt=»My default image»></picture>

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

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

Если вы хотите предоставлять версии изображений с различным разрешением для экранов с более высокой плотность, вы можете это сделать с помощью добавления дополнительных имен файлов атрибуту srcset. Например, давайте посмотрим на первый пример кода выше с добавлением поддержки разрешения экрана «Ретина 2х»:

<picture> <source srcset=»smaller.jpg, smaller_retina.jpg 2x» media=»(max-width: 768px)»> <source srcset=»default.jpg, default_retina.jpg 2x»> <img srcset=»default.jpg, default_retina.jpg 2x» alt=»My default image»></picture>

<picture>    <source srcset=»smaller.jpg, smaller_retina.jpg 2x» media=»(max-width: 768px)»>    <source srcset=»default.jpg, default_retina.jpg 2x»>    <img srcset=»default.jpg, default_retina.jpg 2x» alt=»My default image»></picture>

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

Использование picture сегодняшний день

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

Пока что, вам не нужно ждать, если вы хотите начать использовать picture прямо сейчас. Вам всего лишь нужно использовать Picturefill 2.0 — полизаполнение предоставляемое разработчиками из Filament Group.

После того, как вы скачаете файл picturefill.js в свой проект, он может применяться всего лишь загрузкой его в секцию head вашего сайта:

<script src=»picturefill.js»></script>

<script src=»picturefill.js»></script>

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

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

IE9

Picturefill отлично работает в других версиях IE, однако IE9 не распознает элементы source, которые завернуты в тэги picture. Чтобы обойти это, условно оберните элементы source в тэги video, что сделает их видимыми для IE9, например:

<picture> <!—[if IE 9]><video><![endif]—> <source srcset=»smaller.jpg» media=»(max-width: 768px)»> <source srcset=»default.jpg»> <!—[if IE 9]></video><![endif]—> <img srcset=»default.jpg» alt=»My default image»></picture>

<picture>    <!—[if IE 9]><video><![endif]—>    <source srcset=»smaller.jpg» media=»(max-width: 768px)»>    <source srcset=»default.jpg»>    <!—[if IE 9]></video><![endif]—>    <img srcset=»default.jpg» alt=»My default image»></picture>

Android 2.3

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

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

Так как это решение реализовано на JavaScript, соответственно, оно нуждается в JavaScript для корректной работы в браузере. Picturefill 2.0 не предоставляет решений для “no-js”, потому что в противном случае, множество изображений стало бы появляться на страницах, когда родная поддержка будет реализована. Однако, вы можете использовать Picturefill 1.2 если возможность “no-js” важна для вас.

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

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

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

Автор: Kezz Bracey

Источник: http://webdesign.tutsplus.com

Редакция: Команда webformyself.

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

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

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

webformyself.com

HTML5: picture

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

Потренируемя на кошках.


<style>
  img {display: block; margin: 0 auto;}
</style>

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

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

Сам элемент picture не имеет атрибутов. Вся работа сосредоточена в source. В обязательном атрибуте srcset указываем путь к файлу. Также можно указать сразу несколько файлов через запятую с указанием коэффициента разрешния (srcset=»kitten.png, [email protected] 2x»). Браузер просматривает source сверху вниз, считывая первый подходящий и игнорируя остальные.

Необязательный атрибут media позволяет указать нужный размер в формате селектора CSS @media.

Необязательный атрибут sizes позволяет задать описатель ширины (sizes=»100vw») или медиа-запрос (sizes=»(max-width: 30em) 100vw»).

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

Необязательный атрибут type позволяет указать MIME-тип (type=»image/webp» или type=»image/vnd.ms-photo»).

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

Источник. Там же есть дополнительные примеры.

Реклама

webmaster.alexanderklimov.ru