I am curious about

As the viewport is decreased in size the next "useable" image is the called upon.

In the example, there then are no "usable" images (once the viewport is too small) So it defaults to the given img tag (but this could equally be a source tag)

Then, when the viewport is increased in size it goes back to the previous image because the media query permits it:

Note: while the network tab shows that the image has been requested again, it is likely (based on common browser settings) that this request will actually be the cached image and the server won't do any work.