Mastering CSS

What is srcset?

The srcset attribute is simply just a set of images, just like the name implies. What we can do is provide not just one image for the browser to serve, but a set of images that the browser can choose from and only fetch whichever image the browser decides is most appropriate for the device.

We're going to focus on the three movie images on our movies page, which are all raster, photographic images:

In movies.html we have an img tag and the appropriate image for each movie. So for Sharknado, we have sharknado.jpg:

<img src="images/sharknado.jpg" alt="Sharknado movie">

For Jaws, we have jaws.jpg:

<img src="images/jaws.jpg" alt="Jaws ...