Bootstrap Karussel Bilder: Andere Bilder nach Displaygröße laden (per srcset, <picture> oder background-image?)

[DonCarlos]

Ziel ist es nur die nötigen Bilder für die jeweilige Displaygröße herunterzuladen. Die Bootstrap Klassen xs-visible/xs-invisible zum Einblenden/Ausblenden großer/kleiner Bilder finde ich u.a. nicht gut weil stets alle Bilder heruntergeladen werden. Mir fallen sonst nur 3 potentielle Lösungen ein:

srcset: "<img srcset" fand ich zunächst eine gute Idee. Laut caniuse.com wird es aber von Opera Mini nicht unterstützt. Immerhin 3% der Smartphones nutzen diesen aber. Ich weiß nicht ob man ein <img> ohne srcset als Fallback davor schreiben kann.

background-image: Das Problem per CSS Hintergrundbildern zu lösen scheint mir die sauberste Lösung. Ich hab's noch nicht probiert. Geht das?

<picture>: Lässt sich das im Karussel ohne große Anpassungen verwenden oder zerhaut es mir mein Layout der bootstrap.css?

Was empfehlt Ihr?