To embed an image in HTML, when there is only a single image resource,
- use the img element and its src attribute.
To embed an image in HTML, when there is only a single image resource, use the img
+ element and its src attribute.
However, there are a number of situations for which the author might wish - to use multiple image resources that the user agent can choose from:
+However, there are a number of situations for which the author might wish to use multiple image + resources that the user agent can choose from:
The users' physical screen size might be different from one another.
-A mobile phone's screen might be 4 inches diagonally, while a laptop's screen might be 14 inches diagonally.
+A mobile phone's screen might be 4 inches diagonally, while a laptop's screen might be 14 + inches diagonally.
+ + +This is only relevant when an image's rendered size depends on the viewport size.
+This is only relevant when an image's rendered size depends on the viewport + size.
@@ -22953,37 +22972,83 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...The users' screen pixel density might be different from one another.
-A mobile phone's screen might have three times as many physical pixels per inch +
A mobile phone's screen might have three times as many physical pixels per inch compared to another mobile phone's screen, regardless of their physical screen size.
+ +The users' zoom level might be different from one another, or might change for a single user over time.
+The users' zoom level might be different from one another, or might change for a single + user over time.
-A user might zoom in to a particular image to be able to get a more detailed look.
+A user might zoom in to a particular image to be able to get a more + detailed look.
-The zoom level and the screen pixel density (the previous point) can both affect the number of physical screen pixels per CSS pixel. - This ratio is usually referred to as device-pixel-ratio.
+The zoom level and the screen pixel density (the previous point) can both affect the number + of physical screen pixels per CSS pixel. This ratio is usually referred to as + device-pixel-ratio.
The users' screen orientation might be different from one another, or might change for a single user over time.
+The users' screen orientation might be different from one another, or might change for a + single user over time.
-A tablet can be held upright or rotated 90 degrees, so that the screen is either "portrait" or "landscape".
+A tablet can be held upright or rotated 90 degrees, so that the screen is either + "portrait" or "landscape".
+ + +The users' network speed, network latency and bandwidth cost might be different from one another, or might change for a single user over time.
+The users' network speed, network latency and bandwidth cost might be different from one + another, or might change for a single user over time.
-A user might be on a fast, low-latency and constant-cost connection while at work, - on a slow, low-latency and constant-cost connection while at home, - and on a variable-speed, high-latency and variable-cost connection anywhere else.
+A user might be on a fast, low-latency and constant-cost connection while + at work, on a slow, low-latency and constant-cost connection while at home, and on a + variable-speed, high-latency and variable-cost connection anywhere else.
Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport. - This is usually referred to as viewport-based selection.
+Authors might want to show the same image content but with different rendered size depending + on, usually, the width of the viewport. This is usually referred to as viewport-based + selection.
-A Web page might have a banner at the top that always spans the entire viewport width. - In this case, the rendered size of the image depends on the physical size of the screen (assuming a maximised browser window).
+A Web page might have a banner at the top that always spans the entire viewport width. In + this case, the rendered size of the image depends on the physical size of the screen (assuming + a maximised browser window).
+ + +Another Web page might have images in columns, - with a single column for screens with a small physical size, - two columns for screens with medium physical size, - and three columns for screens with big physical size, - with the images varying in rendered size in each case to fill up the viewport. - In this case, the rendered size of an image might be bigger in the one-column layout compared to the two-column layout, - despite the screen being smaller.
+Another Web page might have images in columns, with a single column for screens with a small + physical size, two columns for screens with medium physical size, and three columns for screens + with big physical size, with the images varying in rendered size in each case to fill up the + viewport. In this case, the rendered size of an image might be bigger in the + one-column layout compared to the two-column layout, despite the screen being smaller.
+ + +Authors might want to show different image content depending on the rendered size of the image. - This is usually referred to as art direction.
+Authors might want to show different image content depending on the rendered size of the + image. This is usually referred to as art direction.
-When a Web page is viewed on a screen with a large physical size (assuming a maximised browser window), - the author might wish to include some less relevant parts surrounding the critical part of the image. - When the same Web page is viewed on a screen with a small physical size, - the author might wish to show only the critical part of the image.
+When a Web page is viewed on a screen with a large physical size (assuming a maximised + browser window), the author might wish to include some less relevant parts surrounding the + critical part of the image. When the same Web page is viewed on a screen with a small physical + size, the author might wish to show only the critical part of the image.
+ + +Authors might want to show the same image content but using different image formats, depending on which image formats the user agent supports. - This is usually referred to as image format-based selection.
+Authors might want to show the same image content but using different image formats, + depending on which image formats the user agent supports. This is usually referred to as + image format-based selection.
-A Web page might have some images in the JPEG, WebP and JPEG XR image formats, - with the latter two having better compression abilities compared to JPEG. - Since different user agents can support different image formats, - with some formats offering better compression ratios, - the author would like to serve the better formats to user agents that support them, - while providing JPEG fallback for user agents that don't.
+A Web page might have some images in the JPEG, WebP and JPEG XR image + formats, with the latter two having better compression abilities compared to JPEG. Since + different user agents can support different image formats, with some formats offering better + compression ratios, the author would like to serve the better formats to user agents that + support them, while providing JPEG fallback for user agents that don't.
The above situations are not mutually exclusive. - For example, it is reasonable to combine different resources for different device-pixel-ratio - with different resources for art direction.
+The above situations are not mutually exclusive. For example, it is reasonable to combine + different resources for different device-pixel-ratio with different resources for + art direction.
-While it is possible to solve these problems using scripting, doing so introduces some other problems:
+While it is possible to solve these problems using scripting, doing so introduces some other + problems:
Some user agents aggressively download images specified in the HTML markup, - before scripts have had a chance to run, - so that Web pages complete loading sooner. - If a script changes which image to download, - the user agent will potentially start two separate downloads, - which can instead cause worse page loading performance.
Some user agents aggressively download images specified in the HTML markup, before scripts + have had a chance to run, so that Web pages complete loading sooner. If a script changes which + image to download, the user agent will potentially start two separate downloads, which can + instead cause worse page loading performance.
If the author avoids specifying any image in the HTML markup - and instead instantiates a single download from script, - that avoids the double download problem above - but then no image will be downloaded at all for users with scripting disabled - and the aggressive image downloading optimisation will also be disabled.
If the author avoids specifying any image in the HTML markup and instead instantiates a + single download from script, that avoids the double download problem above but then no image will + be downloaded at all for users with scripting disabled and the aggressive image downloading + optimisation will also be disabled.
With this in mind, this specification introduces a number of features to address the above problems in a declarative manner.
+With this in mind, this specification introduces a number of features to address the above + problems in a declarative manner.
The src and srcset
- attributes on the img element can be used,
- using the x descriptor,
- to provide multiple images that only vary in their size
- (the smaller image is a scaled-down version of the bigger image).
img element can be used, using the x
+ descriptor, to provide multiple images that only vary in their size (the smaller image is a
+ scaled-down version of the bigger image).
- The x descriptor is not appropriate when the
- rendered size of the image depends on the viewport width (viewport-based selection),
- but can be used together with art direction.
The x descriptor is not appropriate when the rendered
+ size of the image depends on the viewport width (viewport-based selection), but can
+ be used together with art direction.
The user agent can choose any of the given resources depending on - the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.
+The user agent can choose any of the given resources depending on the user's screen's pixel + density, zoom level, and possibly other factors such as the user's network conditions.
-For backwards compatibility with older user agents that
- don't yet understand the srcset attribute,
- one of the URLs is specified in the img element's src attribute.
- This will result in something useful (though perhaps lower-resolution than the user would like)
- being displayed even in older user agents.
- For new user agents, the src attribute participates in the resource selection,
- as if it was specified in srcset with a 1x descriptor.
For backwards compatibility with older user agents that don't yet understand the srcset attribute, one of the URLs is specified in the
+ img element's src attribute. This will result
+ in something useful (though perhaps lower-resolution than the user would like) being displayed
+ even in older user agents. For new user agents, the src
+ attribute participates in the resource selection, as if it was specified in srcset with a 1x descriptor.
The image's rendered size is given in the
- width and height attributes,
- which allows the user agent to allocate space for the image before it is downloaded.
The image's rendered size is given in the width and
+ height attributes, which allows the user agent to
+ allocate space for the image before it is downloaded.
The srcset and sizes attributes can be used,
- using the w descriptor,
- to provide multiple images that only vary in their size
- (the smaller image is a scaled-down version of the bigger image).
The srcset and sizes attributes can be used, using the w
+ descriptor, to provide multiple images that only vary in their size (the smaller image is a
+ scaled-down version of the bigger image).
In this example, a banner image takes up the entire viewport width - (using appropriate CSS).
+In this example, a banner image takes up the entire viewport width (using appropriate + CSS).
<h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
src="wolf-400.jpg" alt="The rad wolf"></h1>
- The user agent will calculate the effective pixel density of each image
- from the specified w descriptors and the specified rendered size in the sizes attribute.
- It can then choose any of the given resources depending on
- the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.
If the user's screen is 320 CSS pixels wide, this is equivalent to specifying
- wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x.
- On the other hand, if the user's screen is 1200 CSS pixels wide,
- this is equivalent to specifying
- wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x.
- By using the w descriptors and the sizes attribute,
- the user agent can choose the correct image source to download regardless of how large the user's device is.
For backwards compatibility,
- one of the URLs is specified in the img element's src attribute.
- In new user agents, the src attribute is ignored
- when the srcset attribute uses w descriptors.
The user agent will calculate the effective pixel density of each image from the specified
+ w descriptors and the specified rendered size in the sizes attribute. It can then choose any of the given resources
+ depending on the user's screen's pixel density, zoom level, and possibly other factors such as
+ the user's network conditions.
If the user's screen is 320 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. On the other hand, if
+ the user's screen is 1200 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. By using the
+ w descriptors and the sizes
+ attribute, the user agent can choose the correct image source to download regardless of how
+ large the user's device is.
For backwards compatibility, one of the URLs is specified in the img element's
+ src attribute. In new user agents, the src attribute is ignored when the srcset attribute uses w descriptors.
In this example, the Web page has three layouts depending on the width of the viewport.
- The narrow layout has one column of images (the width of each image is about 100%),
- the middle layout has two columns of images (the width of each image is about 50%),
- and the widest layout has three columns of images, and some page margin (the width of each image is about 33%).
- It breaks between these layouts when the viewport is 30em wide and 50em wide, respectively.
In this example, the Web page has three layouts depending on the width of the viewport. The
+ narrow layout has one column of images (the width of each image is about 100%), the middle
+ layout has two columns of images (the width of each image is about 50%), and the widest layout
+ has three columns of images, and some page margin (the width of each image is about 33%). It
+ breaks between these layouts when the viewport is 30em wide and 50em wide, respectively.
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
- The sizes attribute sets up the
- layout breakpoints at 30em and 50em,
- and declares the image sizes between these breakpoints to be
- 100vw, 50vw, or calc(33vw - 100px).
- These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.
The user agent will pick a width from the sizes attribute,
- using the first item with a <media-condition> (the part in parentheses) that evaluates to true,
- or using the last item (calc(33vw - 100px)) if they all evaluate to false.
For example, if the viewport width is 29em,
- then (max-width: 30em) evaluates to true and 100vw is used,
- so the image size, for the purpose of resource selection, is 29em.
- If the viewport width is instead 32em,
- then (max-width: 30em) evaluates to false,
- but (max-width: 50em) evaluates to true and 50vw is used,
- so the image size, for the purpose of resource selection, is 16em (half the viewport width).
- Notice that the slightly wider viewport results in a smaller image because of the different layout.
The user agent can then calculate the effective pixel density and choose an appropriate resource - similarly to the previous example.
+The sizes attribute sets up the layout breakpoints at
+ 30em and 50em, and declares the image sizes
+ between these breakpoints to be 100vw, 50vw, or
+ calc(33vw - 100px). These sizes do not necessarily have to match up
+ exactly with the actual image width as specified in the CSS.
The user agent will pick a width from the sizes
+ attribute, using the first item with a <media-condition> (the part in
+ parentheses) that evaluates to true, or using the last item (calc(33vw -
+ 100px)) if they all evaluate to false.
For example, if the viewport width is 29em, then (max-width: 30em) evaluates to true and 100vw is used,
+ so the image size, for the purpose of resource selection, is 29em. If
+ the viewport width is instead 32em, then (max-width:
+ 30em) evaluates to false, but (max-width: 50em) evaluates to true
+ and 50vw is used, so the image size, for the purpose of resource
+ selection, is 16em (half the viewport width). Notice that the slightly
+ wider viewport results in a smaller image because of the different layout.
The user agent can then calculate the effective pixel density and choose an appropriate + resource similarly to the previous example.
The picture element and the source element,
- together with the media attribute,
- can be used, to provide multiple images that vary the image content
- (for instance the smaller image might be a cropped version of the bigger image).
media attribute, can be used,
+ to provide multiple images that vary the image content (for instance the smaller image might be
+ a cropped version of the bigger image).
<picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> - <img src="small.jpg" alt="The president giving an award."> + <img src="small.jpg" alt="The wolf runs through the snow."> </picture>-
The user agent will choose the first source element
- for which the media query in the media attribute matches,
- and then choose an appropriate URL from its srcset attribute.
The user agent will choose the first source element for
+ which the media query in the media attribute
+ matches, and then choose an appropriate URL from its srcset attribute.
The rendered size of the image varies depending on which resource is chosen. - To specify dimensions that the user agent can use before having downloaded the image, - CSS can be used.
+The rendered size of the image varies depending on which resource is chosen. To specify + dimensions that the user agent can use before having downloaded the image, CSS can be used.
img { width: 300px; height: 300px }
@media (min-width: 32em) { img { width: 500px; height:300px } }
@@ -23214,9 +23356,9 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
This example combines art direction- and device-pixel-ratio-based selection. - A banner that takes half the viewport is provided in two versions, - one for wide screens and one for narrow screens.
+This example combines art direction- and device-pixel-ratio-based + selection. A banner that takes half the viewport is provided in two versions, one for wide + screens and one for narrow screens.
<h1> <picture> @@ -23233,9 +23375,9 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
The type attribute
- on the source element can be used,
- to provide multiple images in different formats.
The type attribute on the source element can be used, to provide multiple images in
+ different formats.
In this example, the user agent will choose the first source that has
- a type attribute with a supported MIME type.
- If the user agent supports WebP images,
- the first source element will be chosen.
- If not, but the user agent does support JPEG XR images,
- the second source element will be chosen.
- If neither of those formats are supported,
- the img element will be chosen.
In this example, the user agent will choose the first source that has a type attribute with a supported MIME type. If the user
+ agent supports WebP images, the first source element will
+ be chosen. If not, but the user agent does support JPEG XR images, the second source element will be chosen. If neither of those formats are
+ supported, the img element will be chosen.
For details on what to put in the alt attribute,
- see the Requirements for providing text to act as an alternative for images section.
For details on what to put in the alt
+ attribute, see the Requirements for providing text to act as an alternative for
+ images section.
The problem with this is that the user agent does not necessarily know what dimensions to use for the image when the image is loading. To avoid the layout having to be reflowed multiple times @@ -23324,13 +23465,13 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
The img element is used with the src attribute, which gives the URL of the image to use for legacy user
- agents that do not support the picture element. This leads
- to a question of which image to provide in the src
- attribute.
The img element is used with the src attribute,
+ which gives the URL of the image to use for legacy user agents that do not support the
+ picture element. This leads to a question of which image to provide in the src attribute.
If the author wants the biggest image in legacy user agents, the markup could be as follows:
+If the author wants the biggest image in legacy user agents, the markup could be as + follows:
<picture> <source srcset="pear-mobile.jpeg" media="(max-width: 720px)"> @@ -23363,9 +23504,9 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
Above the max-width media feature is used, giving the maximum
- (viewport) dimensions that an image is intended for.
- It is also possible to use min-width instead.
Above the max-width media feature is used, giving the maximum (viewport)
+ dimensions that an image is intended for. It is also possible to use min-width instead.
<picture> <source srcset="pear-desktop.jpeg" media="(min-width: 1281px)"> @@ -118417,6 +118558,18 @@ INSERT INTERFACES HERE
The image of the wolf in the embedded content introduction is based on a photo + by Barry O'Neill. + (Public domain) +
The image of the kettlebell swing in the embedded content introduction is based on a photo + by kokkarina. + (CC0 1.0) +
The image of two cute kittens in a basket used in the context menu example is based on a photo
