Bootstrap: How to display different images depending on grid?

Question

HTML

How to do it right. The option below works, but how to do it correctly, without loading images that are not for the current grid?

<img class="banner visible-md visible-lg" src="banner_md.png" />
<img class="banner visible-sm visible-xs" src="banner_xs.png" />

Answer 1

Offhand:
Option a) css - background-image and media
Option b) javascript - substitute the src variable and hang the event on resize