我正在尝试使用webP作为主要格式为艺术指导图片标签建立示例，如果不支持webP（仍在图片标签中）则为png，对于不支持图片的浏览器，则为png img标签。我打算通过标签外部的样式来处理尺寸，并打算在基本操作完成后的某个时候增加2倍和3倍图像分辨率。
我有
<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的浏览器中工作正常，但在尝试（但失败）加载webp图像的Edge中不能正常工作
任何建议（以及与此有关的2x分辨率的任何演示）都将受到欢迎。
谢谢