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

问题

An example

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

Now are we not polluting the HTML by repeating them, it can be done with layout fill and giving parent wrapper desired height on media change for example

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

Hence please help me to understand when should be use them on what scenarios?

回答1:

The answer is already in the doc

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.

Thank you guys

回答2:

Another approach that works is to use amp-img with the srcset element to describe which images to load at different viewport widths and pixel densities.

来源：https://stackoverflow.com/questions/35132034/is-using-media-queries-to-switch-amp-img-a-recommended-practice