Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удается сохранять высокое качество при малом размере файла. Тем не менее, бразуеры поддерживают их не полностью.
<picture>позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута type, бразуер сразу определит файлы такого типа как неподдерживаемые:
<picture>
<source type="image/webp" srcset="pyramid.webp">
<source type="image/svg+xml" srcset="pyramid.svg">
<img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
https://habr.com/ru/company/ruvds/blog/494710/
Итог - вы не делаете бэкап, вы просто загружаете 2 картинки, и браузер сам выбирает для себя то, что ему нужно.
