For a long time, when I had to create a website with a lot of different pages (and with every pages having a hero section with a different background image), I used to do like this:
<div class="hero" style="background-image: url(my-dynamic-img.jpg)"></div>
And the following css:
.hero {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
The image would have been loaded dynamically for each pages. In a CMS for exemple, the client would have been able to change images on it's own, without changing the css
But now, I realize it's not good at all, because you end up with loading the same image on every device (mobile, tablet, desktop...) .
So I'd like to have your opinion on the best way to do this: having 3 different images (hero-mobile.jpg, hero-tablet.jpg and hero-desktop.jpg) for the same background and target the good one automatically. The declaration of the 3 images has to be in the HTML, not in the css (so the client can change it at any time)