Question

我正在构建一个简单的静态网站，并希望优化图像，最终为jpgs / png和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甚至不会显示回退。

以下是代笔演示：https://codepen.io/antejan/full/rKEPNm/

有没有一种方法可以使用srcset，webp和后备而不会出现这些问题？

是否可以将amp-img与srcset和fallback一起使用？

0 个答案: