WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Платформа для конвертации и монетизации трафика

HTML тег <picture>

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

<picture> — это обертка для элементов <source> и <img>, которая дает браузеру возможность выбрать источник. <img> тег тут очень важен для роботов.

Использование этого тега удобнее чем sizes и srcset в двух случаях:

1) Когда используются разные форматы изображений.

<picture> позволяет использовать ультра-модные форматы и не бояться за поддержку старых браузеров. Для этого можно указать MIME-тип картинки в type атрибуте, браузер «возьмет» первый поддерживаемый тип (выбор идет сверху вниз разумеется):

<picture>
	<source type="image/svg+xml" srcset="my-photo.svg">
	<source type="image/webp" srcset="my-photo.webp">
	<img src="my-photo.png" alt="">
</picture>
  • Тип изображение указанного в <source> должен соответствовать типу указанному в type.
  • Не используйте атрибут media, если вам не нужно художественное оформление.
  • Также можно использовать srcset и sizes.

2) При Художественном оформлении.

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

Например у нас есть картинка, которая нуждается в художественном оформлении:

<img src="my-photo.jpg" alt="">

Исправим её с помощью <picture>.

<picture>
	<source media="(max-width: 800px)" srcset="my-photo-portrait.jpg">
	<source media="(min-width: 800px)" srcset="my-photo.jpg">
	<img src="my-photo.jpg" alt="">
</picture>

Комментарии к коду:

  • media атрибут элемента <source> содержит медиа-условие, используя которое бразуер выбирает какую картинку нужно использовать. Из примера выше, если ширина экрана (viewport) 800 или меньше, то будет выведено изображение первого элемента <source>, если больше — второго.

  • srcset атрибут содержит URL картинки. Здесь также можно указать группу предписаний и добавить атрибут sizes, однако используя <picture> тег это вряд ли будет продуктивно.

  • <img src="" alt=""> с атрибутами src и alt перед закрывающем тегом </picture>, должен быть обязательно указан, иначе изображения не появятся! Этот тег нужен для роботов и когда браузер не может выбрать изображение по указанным условиям.

Показывать разные изображение (художественное оформление) можно и через srcset, но через <picture> удобнее.

Эта заметка встроена в: HTML атрибуты: srcset и sizes
Комментариев нет
    Войти