HTML5 <picture>

Тег HTML5 picture определяет размер окна браузера и выбирает для отображения оптимальное изображение относительно окна просмотра.

Синтаксис

Тег picture может содержать больше чем один элемент source с атрибутами media, sizes, type, srcset.

<style>picture img { width: 100%; height: auto; }</style>
<figure>
 <picture>
   <source srcset="/image.png" media="(min-width: 900px)">                        
   <source srcset="/image-240-180.jpg, 
                   /image.jpg 2x" media="(min-width: 450px)">                                                          
   <img src="http://site.ru/image-120-90.jpg" 
           srcset="/image-240-180.jpg 2x" 
           alt="Альтернативный заголовок изображения" 
           title="Заголовок изображения" 
           longdesc="подробное_описание.html#description">
  </picture>
 <figcaption>Подпись под изображением</figcaption>
</figure>
к меню ↑

Элемент source

Элемент source в HTML для изображений определяет несколько ресурсов.

Атрибут media — выполняет CSS медиа-запрос: @media="(max-width: 30em)".

Атрибут sizes — выполняет один или несколько запросов ширины дескриптора: sizes="100vw", sizes="(max-width: 30em) 100vw", sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)".

последнее значение используется по умолчанию.

Атрибут srcset содержит ссылку на изображение: srcset="http://site.ru/image.jpg". Или разделенные запятыми несколько ссылок на изображения:

большое_изображение.png,
среднее_изображение.png,
маленькое_изображение.png

Для экранов с высокой плотностью пикселей указывается значения 1.5x или 2x srcset="image-120-90.jpg, image-240-180.png 2x"

Атрибут type выполняет запрос для альтернативных форматов графических файлов type="изображение/webp" или type="изображение/vnd.ms-photo".

к меню ↑

Элемент img

Элемент img в контейнере picture обязательный без него изображение не будет отображаться в браузере.

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

Атрибут alt для альтернативного описания изображения.

Атрибут longdesc содержит гиперссылку на содержание подробного описания изображения.

к меню ↑

Альбомная или книжная ориентация

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

HTML5 picture для выбора окна просмотра
Выбор тегом HTML5 picture изображение по ширине окна просмотра

picture

Код из примера:

<picture> 
   <source media="(min-width: 800px)" 
           srcset="img/image-600.jpg, 
                   img/image-1200.jpg 2x">                         
   <source media="(min-width: 450px)" 
           srcset="img/image-300.jpg, 
                   img/image-600.jpg 2x">        
   <img src="img/image-150.jpg" 
           srcset="img/image-300.jpg 2x" 
           alt="Альтернативное описание изображения" 
           longdesc="description.html#description">
</picture>

Вот как этот код работает: если для книжной ориентации окно просмотра шириной 800px. Браузер будет отображать изображение-640.jpg (640px) если устройство 2x, будет показано изображение-1280.jpg (1280px). Для альбомной ориентации всё просто, браузер покажет изображение размером больше чем 800px.

к меню ↑

Поддержка

Включить поддержку тега picture в браузерах:

Chrome
chrome://flags Экспериментальные функции веб-платформы.
Opera
opera://flags Экспериментальные функции веб-платформы.
Firefox
about:config dom.image.picture.enable.

После перезапуска браузера тег picture будет работать в браузере. Или скачать polyfill (picturefill) для элемента HTML 5.1 picture.

Поэкспериментировать с демонстрацией элемента picture можно с помощью «Chrome DevTools».