Можно ли заменить изображение при определенной ширине окна браузера?

Question

[weranda]

Приветствую

Есть изображение:
<img src="../logo-big.png">
При ширине окна браузера в 960px хотелось бы его заменить на:
<img src="../logo-middle.png">
А при ширине окна браузера в 400px на:
<img src="../logo-mini.png">
Возможно ли это сделать прямо в HTML без медиа-запросов в CSS через background-image или JavaScript? Краем уха слышал про набор адаптивных изображений через srcset, но из-за ненадобности даже не вникал в это, но помнится, что там дело замешано на чем-то ином, нежели на ширине окна браузера.

P.S.
Или же, если не прибегать к JS, то путь в этом случае один — CSS и background-image?

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
но если не поддерживается, отработает все равно, просто без зависимости от min-width