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?

Solution

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