使用媒体查询切换 amp-img 是否是推荐的做法？

Question

一个例子

<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>

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

Answer 1

答案已经在文档中

For example, here we have 2 images with mutually exclusive media queries. Depending on the screen width, one or the other will be fetched and rendered.

谢谢大家

Answer 2

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

使用媒体查询切换 amp-img 是否是推荐的做法？

Is using media queries to switch amp-img a recommended practice?

amp-html