Is it possible to replace an image at a specific browser window width?

Question

css

Greetings
There is an image: With a browser window width of 960px, I would like to change it to: And with a browser window width of 400px to: Is it possible to do this directly in HTML without media queries in CSS through background-image or JavaScript? Out of the corner of my ear I heard about a set of responsive images through srcset , but due to uselessness I didn’t even delve into it, but I remember that the matter is involved in something other than the width of the browser window. PS Or, if you do not resort to JS, then in this case there is only one way - CSS and background-image?
<img src="../logo-big.png">
<img src="../logo-middle.png">
<img src="../logo-mini.png">

Answer 1

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

https://caniuse.com/#search=picture
but if not supported, it will still work, just without the min-width dependency