From 14111f62f041fec58a8a622ea042273e12b5f271 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Tue, 22 Dec 2015 12:22:29 +0100 Subject: [PATCH] Add images to embedded content introduction's examples * Images illustrating screen size, pixel density, orientation, viewport-based selection, and art direction. * New raster images are public domain, attributed in acks. * Change the president example to a wolf to reuse that image. * Rewrap. --- images/kettlebell.jpg | Bin 0 -> 9060 bytes images/wolf.jpg | Bin 0 -> 8216 bytes source | 477 ++++++++++++++++++++++++++++-------------- 3 files changed, 315 insertions(+), 162 deletions(-) create mode 100644 images/kettlebell.jpg create mode 100644 images/wolf.jpg diff --git a/images/kettlebell.jpg b/images/kettlebell.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e5e72207590b72522a3473696ae67a4e13a7c354 GIT binary patch literal 9060 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 E0Z`&;d;kCd literal 0 HcmV?d00001 diff --git a/images/wolf.jpg b/images/wolf.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7848ec467f6444dc2439a06f87d9046dfc9761db GIT binary patch literal 8216 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 oXRqeFE+na=yZwZlDr zA|Ds5oTm=s_ba3h_eZn@OpTiCxKL4D*)6wjnF&RuyXnr=E=}BrG1IyY@mN9TV4978N?EgfdaLrb@ZeEk& zjVFW`4D4~y6f6gEK;gZnG~+|t!!!U>pz14^Q?4#NSXd7M7kD~!P zZB_>~HXZeh5S^*VnvJUT@Wr;dbQ4CTWCr?fp z1V4WgZ`Xrx*4z*uDFH`(ck??3p02sC3Rgy}h<@RhQXtyfmlv+)^g_i!G8|h^-3{4=a82OU zilxmGZr*h$=4vh!G91HJf^Y0L_}x<&U4JTi9S|-zem6Wz;$3H0(ey?O&%9#V*CE>E z90eU)g8MUrV2Hz<`Bh6gMb^pKJ?&06R}a#cr(2d^nc!Qd^F94NT&i8{HV*|=uPztq zuj$Z>4A(|lUWUyaT!CMoUSCZ?l8{P&>$z(o4jGa1s z4eo_;$&r=Tcwy>-RH)HmE z?Hd!q1i%caJ#OmV4WmrY$N$uNXc~b=DOdd3ZY46@pbO|UDRgKIzoh2M{Oop%%}ovG z_1GUgkWhM?aAy$DFSf^IWfR>K@KH=faN8~~PIgYCdr~KK=T~A>hi3*Qg8;Wx(ROqF z_%?vSehu1B;5S(fTc@%4m28l9Xe3XSQ+<>Vw`y?ak52dl;KJrJr}5e6lF0{bZF{4j zST`S;+Z9jIg^^h|0h`mlo5_wcRdf5g_VAsTa=SEgA2{&|0rQ5Hd{g&Y`y!mXxRu4k zdNW5n+r<0}kYI`IDZWSC_o>q;ak5iiMO76c=jIJ-iSk{`?aMM{9*yRfMmu}j2Z`g? z#71g5hqN|aj1UPn@>@X!QBzMZ64HzKahq%M7;6=dS`X`vV(}71DJ+&RXey0%*lwUu zs5^7sExuQ^+~e~PmIy6h1Qw!V-g?m4kFli(W{xdEdYAW2$Iy5pHqp=>$5G~>>`+q_ zz#eY!Igff<8I46#-g$EHfHr&7OG}|?5tuU8h8>0@DFC`UB#{>!A;Vj`kf)=gyvwTY zt{!drDMO*z%&D0ebBkmWlPh_oB}n`Ao99NuuS|GYtuJAP5%;inXIWt04l|K4{-(Oh zn*bZdT8a)dGg~1TP4o1*caIa{rF#sF*L;M}j1SeAxnE@wQxfT)pX~UnPV3nN>qc`R z!b1~wj6*N@)Sks%_o+n9C71xVmXmGs$|F5K*Ty(Td1i=b)oz68uu@G~xVj6o(>*p{ zyI=kv7C0%ZrxKx~L0;6!QftGIm*xMZ&2_vLra8hk4PcNRW32ePhU`Rg?6DfQV&vp^-z`W z&IrihV-re7KcI>ZEw-to9RN~9vCa)gn7W+O?mj5{T4)d8MXvGuh!f%9+r@C-*06Z6 z>FNC)1!p+FD@bwIT;@a&f!$-oX>dKFbGYtcAdMJnP{?c+jeLz8@3{49SqIF1C&0=W u3s&BhYp;^H{KP`TLVs7?_!T@r9J}{Qhot**sK@ITCF2OH*8lO(#{U6;4df>P literal 0 HcmV?d00001 diff --git a/source b/source index 0cb9b681ee1..b46faea063e 100644 --- a/source +++ b/source @@ -22916,8 +22916,8 @@ interface HTMLHyperlinkElementUtils { -

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.

@@ -22928,8 +22928,8 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
-

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:

    @@ -22943,9 +22943,28 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

    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.

    + + + + + 4″ + + + + 14″ + +
    -

    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.

    + + + + + + + + + + + + + + + + + + + 1x + 3x + +
    +
  • -

    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".

    + + + + + + Portrait + + + 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.

    • @@ -22993,90 +23058,164 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
  • -

    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.

    + + + + + + + + + Narrow, 1 column + + + + + + + + + Medium, 2 columns + + + + + + + + + Wide, 3 columns + +
  • -

    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.

-
Device-pixel-ratio-based selection when the rendered size of the image is fixed
+
Device-pixel-ratio-based selection when the rendered size of the image is + fixed

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).

+ 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).

-

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.

@@ -23087,20 +23226,20 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ... <p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922) was an English <a href="/wiki/Music_hall">music hall</a> singer, ... -

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.

@@ -23110,72 +23249,75 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
-

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.

@@ -23186,25 +23328,25 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

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).

+ 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).

<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.

@@ -23248,14 +23390,12 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ... <p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922) was an English <a href="/wiki/Music_hall">music hall</a> singer, ... -

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.

@@ -23287,8 +23427,9 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ... <figcaption>Barney Frank, 2011</figcaption> </figure> -

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