amp-html - 使用媒体查询来切换 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

答案已经在文档中

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

感谢你们

Answer 2

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