About
When a web server gets a request, it has no information about the characteristic of the screen device. Is this a mobile or a desktop with a top notch screen ? (You may get this kind of information in the user agent but it may be wrong)
The srcset attribute of the img tag allows to delegate the choice of the best image to the browser. It will choose the best image depending on the characteristics of the device.
Syntax
<img
srcset="image/url descriptor, ..., image/url descriptor"
sizes="definition"
>
where:
- the srcset attribute defines a serie of image and their descriptor describing the image properties
- the sizes attribute defines the width of the image to take depending on the browser width (works only for the width descriptor of srcset and not the x image resolution descriptor)
srcset
srcset just lists the available images and their intrinsic characteristics via what's called a descriptor.
<img srcset="image/url descriptor, ..., image/url descriptor">
The descriptor can describe the image by width or resolution but not both. All descriptor must be of the same format. ie
- a width descriptor [0-9]*w. Example for an image of 100px, 100w.
- or a x descriptor for the image resolution. Example: 1.5x, 2x (Default to 1x if not defined)
The w in the descriptor describes the intrinsic width (physical), not in screen pixel (logical).
If the pixel ratio of your device is 3 (such as on a iphone 6) and that the browser width is 100px, the browser will choose the image with a width descriptor of 300w.
Sizes
The sizes attributes permits to define the wanted image size based on screen resolution (not based on container size)
If an element has a sizes attribute present, all image must have the width descriptor specified.
Sizes defines what image size would be best to choose for a set of media conditions (e.g. screen widths).
You can define it:
- for all browser width
- or by layout breakpoints.
Syntax:
<img sizes="[mediaCondition ]layoutWidth, ..., [mediaCondition ]layoutWidth">
where:
- the media condition is:
- optional (chosen when none of the media conditions are true)
- a part of a media query (Ref). Example:
- (max-width: 375px) and (min-resolution:192dpi)
- (min-width:600px)
- the layout width defines the size of the slot on the page in logical pixel (css pixel):
- absolute length (px, em)
- relative length (to the viewport vw, …)
- but NOT percentage
Fixed sizes
- auto: let the browser choose
<img sizes="auto">
- the half of the browser width
<img sizes="50vw">
Breakpoint sizes
min-width
Example of sizes by breakpoint:
- if you want the image to span:
- the full width on small screen
- a small width on large screen
you would write with
<img sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw">
that you can read as:
When the browser width is | The image width is … of the viewport width (vw) |
---|---|
> 600px | 25% |
600px < width < 500px | 50% |
< 500px | 100% |
max-width
You can also use the reverse direction and use the max-width filter.
Example:
<img sizes="(max-width: 600px) 480px, 800px">
Image selection
The image selection depends on:
- the browser width
- and the device pixel ratio
With a fixed sizes of 50vw meaning half the view port, the browser would make the following selections.
Browser width | Device pixel ratio | Image used specified by the descriptor | Effective resolution |
---|---|---|---|
400px | 1 | 200w | 1x |
400px | 2 | 400w | 2x |
320px | 2 | 400w | 2.5x |
600px | 2 | 800w | 2.67x |
640px | 3 | 1000w | 3.125x |
1100px | 1 | 800w | 1.45x |
Example in the wild
Basic
Below is a html page created in a iframe of 400px to constraint the viewport
- The css that doesn't make the image overflow
img { max-width: 100%; }
- The srcset
<img width="606px" height="160px"
srcset="
https://via.placeholder.com/226x60 226w,
https://via.placeholder.com/446x118 446w,
https://via.placeholder.com/606x160 606w
"
/>
- The device pixel ratio (DPR) is
console.log("Device pixel Ratio (DPR) :"+window.devicePixelRatio)
- If you device pixel ratio (DPR) is:
- one, you should see the 446 image.
- two, you should see the 606 image.
<img srcset="example-320w.jpg 320w,
example-480w.jpg 480w,
example-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="example-800w.jpg" alt="responsive web!">
<img
alt="Description"
decoding="auto"
style="object-fit: cover;"
sizes="598px"
srcset="https://url 640w, https://url2 750w, https://url3 1080w"
src="https://url"
>