Резервные копии изображений можно создать с помощью элемента <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>
.