Amp html 使用媒体查询切换amp img是否为推荐做法？

一个例子

<amp-img
 media="(min-width: 650px)"
 src="wide.jpg"
 width=466
 height=355
 layout="responsive" >
</amp-img>
<amp-img
  media="(max-width: 649px)"
  src="wide.jpg"
  width=527
  height=193
  layout="responsive" >
</amp-img>

现在，如果我们没有通过重复它们来污染HTML，那么可以通过布局填充来完成，并在媒体更改时为父包装提供所需的高度

/*figure can be given desired height and width on media queries */
<figure>
  <amp-img
   src="wide.jpg"
   layout="fill" >
 </amp-img>
</figure>

/*可以在媒体查询中给出所需的高度和宽度*/

---

因此，请帮助我了解什么时候应该在什么情况下使用它们？

答案已经在文档中

例如，这里我们有两张带有互斥媒体查询的图像。根据屏幕宽度，将提取和渲染其中一个

---

谢谢大家

另一种有效的方法是使用amp img和srcset元素来描述在不同的视口宽度和像素密度下加载哪些图像。

请解释下推的原因，以便我可以改进