WebP на сайте

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

<picture>
<source type="image/webp" srcset="sunrise.webp">
<source type="image/jpeg" srcset="sunrise.jpg">
<img src="sunrise.jpg" alt="Sunrise Image">
</picture>

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

У элемента <source> есть атрибуты для определения типа изображения и инструкций, когда какой тип использовать:

  • type: MIME тип файла источника;
  • srcset: Путь к файлу изображения. Для вывода одного изображения разных размеров можно использовать несколько файлов.
  • sizes: Список размеров каждого исходного файла
  • media: Медиа-запрос для определения, какой из источников будет использоваться для вывода картинки.

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

Прокрутить вверх