Responsive & Dynamic Background Image - best practice

Question

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)

Answer 1

Have you discovered the srcset attribute? What srcset does is it allows you to add more than one image in a <img> tag and set certain conditions to it. Depending on which condition is met, the corresponding image will be shown. Time for an example

If you want an image to be viewed half of the users viewport width you would use

<img src="images/space-needle.jpg" sizes="50vw"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">  

What this does is it finds how large the users viewport width is, say its 500px wide, so your image images/space-needle.jpg 200w will load for the user.

In this example we specified that the image needs to take up half the screens width sizes="50vw". It would be impossible to show an image at 600px or 400px wide on a 500px wide screen and comfortably have it shown only at half the viewport so it chooses the 200w option.

There are many ways to specify conditions for which image should load, device pixel ratio, screen size, browser size so on and so forth.

Eduational links:
https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
https://www.udacity.com/course/responsive-images--ud882