In the responsive web design revolution, images are one thing that have seemingly lagged behind. Until relatively recently, serving different images based on screen size or pixel density was not something that was done at all.
<picture> element shows a lot of promise in changing this. But whether the picture element is used at all, there are two attributes that are key in providing responsive images -
srcset and the accompanying
srcset attribute allows us to provide a set of images that can be potentially served by the browser. We, as the authors, provide a comma-separated list of images and the user agent determines which image to display depending on the particulars of the device.
When listing the images, we provide two pieces of information about each image -
- The path to the image file
- The pixel density or width of the image
To define pixel density, we add an
x to the density number for the image. For example -
<img src="one.png" srcset="two.png 2x, three.png 3x, four.png 4x">
The image defined with the
src attribute is assumed to be
srcset attribute was first specified in 2012, we could only provide images of different pixel densities, as shown above. However, the 2014 Specification introduced the width value, which allows us to assign the width of the different images.
To assign the width of the image, we add a
w to the pixel width number for the image. For example -
<img src="one.png" srcset="two.png 100w, three.png 500w, four.png 1000w">
Only when using the width version of the
srcset attribute, can we accompany it with the
sizes attribute allows us to explicitly define the size the image should be according to a set of media conditions.
<img src="one.png" srcset="two.png 100w, three.png 500w, four.png 1000w" sizes="<media condition> <width>, <media condition> <width>, <optional default image width>">
A media condition is not exactly a media query. It is part of a media query. It doesn’t allow us to specify media types, e.g.
A valid media condition can be either -
- A plain media condition, e.g.
- A “not” media condition, e.g.
( not (orientation: landscape) )
- An “and” media condition, e.g.
(orientation: landscape) and (min-width: 900px)
- An “or” media condition, e.g.
( (orientation: portrait) or (max-width: 500px) )
The width specified can be almost any length value, e.g. em, rem, pixels, and viewport width.
However, percentage values are not allowed, "to avoid confusion about what it would be relative to". The
vw value is recommended as an alternative if a relative value is needed.
Putting it Together
Putting the media condition and width together -
<img src="one.png" srcset="two.png 100w, three.png 500w, four.png 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em, ( not (orientation: portrait) ) 300px, ( (orientation: landscape) or (min-width: 1000px) ) 50vw, 100vw">
If the media condition is true, the user agent will choose what image to serve at the size specified based on the different images defined in the
sizes attributes are relatively well supported.
For browsers that do not support the attributes, the image is fetched from the regular
src attribute and displayed normally across all media conditions.