我正在构建简单的静态网站并想要优化图像，最终为每个图像集生成不同大小的 jpgs/pngs 和 webps。在非 AMP 世界中，我会使用不同类型的<picture>标签和<source>内部标签，但据我所知，这里只有 amp-img。我的代码是这样的：
<amp-img src="s.webp" srcset="s.webp 100w, m.webp 200w" width="100" height="100">
<amp-img fallback src="s.png" srcset="s.png 100w, m.png 200w" width="100" height="100"></amp-img>
</amp-img>
- 大多数不支持 webp 的浏览器（Edge 17、IE 11、Safari 11、iOS 11 Safari）在加载时会显示回退，但是如果用户调整浏览器大小并且（看起来）触发 srcset 转换，浏览器会显示损坏的图像，调整大小后不再改变。例如，在 iPhone 上打开页面，旋转以更改方向。
- 如果外部 amp-img 具有 srcset，Firefox 67 甚至不会显示回退。
这是 codepen 演示：https ://codepen.io/antejan/full/rKEPNm/
有没有办法在没有这些问题的情况下使用 srcset、webp 和后备？