SRCSET – Serving high quality images for high pixel density screens

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.

2 thoughts on “SRCSET – Serving high quality images for high pixel density screens”

  1. Now I’m wondering. Would it be possible to neglect the original ‘src’ attribute altogether and only use srcset (assuming that I don’t care about legacy and old ass browsers)?

Leave a Reply

Your email address will not be published. Required fields are marked *