srcset is an attribute, very similar to src which is being set on the <img> tag.
srcset allows you to define a “set” of sources of images that will be served according to certain rules.
A simple & very useful example, would be this:
<img src="pic.jpg" srcset="pic.jpg 1x, pic-2x.jpg 2x">
Note the 1x & 2x – this basically allows us to set a different image according to the relevant pixel density.
- 1x – “normal” pixel density
- 2x – double than “normal” pixel density, retina displays for example.
- and so on…
The nice thing about srcset, is that it both degrades gracefully to use src if the browser lacks support & the browser is smart enough to only load the relevant image.