Я пытаюсь создать пример для тега художественного изображения с использованием webP в качестве основного формата, png, если webP не поддерживается (все еще в теге изображения), и тег png img для браузеров, не поддерживающих изображение,Я собираюсь обработать размер с помощью стиля вне тега и собираюсь добавить разрешение изображения 2x и 3x в какой-то момент, когда я получу основы
У меня
<picture>
<source media="(min-width: 800px)" srcset="images/catstand.webp">
<source media="(min-width: 600px)" srcset="images/catsitting.webp">
<source media="(min-width: 450px)" srcset="images/catsleeping.webp">
<source media="(min-width: 1px)" srcset="images/catface.webp">
<source media="(min-width: 800px)" srcset="images/catstand.webp">
<source media="(min-width: 600px)" srcset="images/catsitting.png">
<source media="(min-width: 450px)" srcset="images/catsleeping.png">
<img src="images/catface.png" alt="Cat cartoon" id="subImg">
</picture>
Работает нормальнов браузерах, которые поддерживают webp, но не в Edge, где он пытается (и не может) загрузить изображение webp *
Любой совет (а также любая демонстрация этой работы с разрешением 2x также приветствуются).
Спасибо