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