80
Device-pixel-ratiop272
-based selection when the rendered size of the image is fixed
Thesrcp281
andsrcsetp281
attributes on theimgp280
element can be used, using thexdescriptor, to provide multiple images that only vary
in their size (the smaller image is a scaled-down version of the bigger image).
Viewport-based selectionp272
Thesrcsetp281
andsizesp282
attributes can be used, using thewdescriptor, to provide multiple images that only vary in their size (the
smaller image is a scaled-down version of the bigger image).
Thexdescriptor is not appropriate when the rendered size of the image depends on theviewport
width (viewport-based
selectionp272
), but can be used together withart directionp273
.
Note
<h2>From today's featured article</h2>
<img
src="/uploads/100-marie-lloyd.jpg"
srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
alt="" width="100" height="150">
<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.
For backwards compatibility with older user agents that don't yet understand thesrcsetp281
attribute, one of the URLs is
specified in theimgp280
element'ssrcp281
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, thesrcp281
attribute participates in the resource
selection, as if it was specified insrcsetp281
with a1xdescriptor.
The image's rendered size is given in thewidthp393
andheightp393
attributes, which allows the user agent to allocate space for
the image before it is downloaded.
Example
In this example, a banner image takes up the entireviewport
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 specifiedwdescriptors and the specified rendered
size in thesizesp282
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 320CSS pixels
wide, this is equivalent to specifyingwolf-400.jpg 1.25x, wolf-800.jpg 2.5x,
wolf-1600.jpg 5x. On the other hand, if the user's screen is 1200CSS 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 wdescriptors and thesizesp282
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 theimgp280
element'ssrcp281
attribute. In new user agents, the
srcp281
attribute is ignored when thesrcsetp281
attribute useswdescriptors.
Example
In this example, the Web page has three layouts depending on the width of theviewport
. 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 theviewport
is30emwide and50emwide, 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">
Thesizesp282
attribute sets up the layout breakpoints at30emand50em, and declares the image sizes between these
breakpoints to be100vw,50vw, orcalc(33vw - 100px). These sizes do not necessarily have to match up exactly with the
actual image width as specified in the CSS.
Example
274
C# WPF PDF Viewer SDK to view PDF document in C#.NET Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert & pages edit, C#.NET PDF pages extract, copy, paste, C# Abilities to zoom in and zoom out PDF page
how to fill out pdf forms in reader; extract data from pdf to excel
76
Art directionp273
-based selection
Thepicturep277
element and thesourcep278
element, together with themediap278
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).
Image format-based selectionp273
Thetypep278
attribute on thesourcep278
element can be used, to provide multiple images in different formats.
The user agent will pick a width from thesizesp282
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 theviewport
width is29em, then(max-width: 30em)evaluates to true and100vwis used, so the image size,
for the purpose of resource selection, is29em. If theviewport
width is instead32em, then(max-width: 30em)evaluates to
false, but(max-width: 50em)evaluates to true and50vwis used, so the image size, for the purpose of resource selection, is
16em(half theviewport
width). Notice that the slightly widerviewport
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.
<picture>
<source
media="(min-width: 45em)" srcset="large.jpg">
<source
media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt="The wolf runs through the snow.">
</picture>
The user agent will choose the firstsourcep278
element for which the media query in themediap278
attribute matches, and then
choose an appropriate URL from itssrcsetp278
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.
img { width: 300px; height: 300px }
@media (min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }
Example
CSS
This example combinesart directionp273
- anddevice-pixel-ratiop272
-based selection. A banner that takes half theviewport
is
provided in two versions, one for wide screens and one for narrow screens.
<h1>
<picture>
<source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
<img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
</picture>
</h1>
Example
<h2>From today's featured article</h2>
<picture>
<source srcset="/uploads/100-marie-lloyd.webp"
type="image/webp">
<source srcset="/uploads/100-marie-lloyd.jxr"
type="image/vnd.ms-photo">
<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
</picture>
<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 atypep278
attribute with a supported MIME type. If the user
agent supports WebP images, the firstsourcep278
element will be chosen. If not, but the user agent does support JPEG XR
images, the secondsourcep278
element will be chosen. If neither of those formats are supported, theimgp280
element will be
chosen.
Example
275
VB.NET PDF - View PDF with WPF PDF Viewer for VB.NET Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert & pages edit, C#.NET PDF pages extract, copy, paste, C# Abilities to zoom in and zoom out PDF page
export excel to pdf form; how to fill in a pdf form in reader VB.NET PDF- HTML5 PDF Viewer for VB.NET Project Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert VB.NET convert PDF to text, VB.NET extract PDF pages, VB PDF page and zoom in or zoom out PDF page
save pdf forms in reader; extract data from pdf file to excel
66
4.8.1.1 Adaptive images
This section is non-normative.
CSS and media queries can be used to construct graphical page layouts that adapt dynamically to the user's environment, in particular to different
viewport
dimensions and pixel densities. For content, however, CSS does not help; instead, we have theimgp280
element'ssrcsetp281
attribute
and thepicturep277
element. This section walks through a sample case showing how to use these features.
Consider a situation where on wide screens (wider than 600CSS pixels
) a 300×150 image nameda-rectangle.pngis to be used, but on
smaller screens (600CSS pixels
and less), a smaller 100×100 image calleda-square.pngis to be used. The markup for this would look like this:
<figure>
<picture>
<source srcset="a-square.png" media="(max-width: 600px)">
<img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses.">
</picture>
<figcaption>Barney Frank, 2011</figcaption>
</figure>
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 as the page is loading, CSS and CSS media queries can be used to provide the dimensions:
<style>
#a { width: 300px; height: 150px; }
@media (max-width: 600px) { #a { width: 100px; height: 100px; } }
</style>
<figure>
<picture>
<source srcset="a-square.png" media="(max-width: 600px)">
<img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses." id="a">
</picture>
<figcaption>Barney Frank, 2011</figcaption>
</figure>
Alternatively, thewidthp393
andheightp393
attributes can be used to provide the width for legacy user agents, using CSS just for the user agents
that supportpicturep277
:
<style media="(max-width: 600px)">
#a { width: 100px; height: 100px; }
</style>
<figure>
<picture>
<source srcset="a-square.png" media="(max-width: 600px)">
<img src="a-rectangle.png" width="300" height="150"
alt="Barney Frank wears a suit and glasses." id="a">
</picture>
<figcaption>Barney Frank, 2011</figcaption>
</figure>
Theimgp280
element is used with thesrcp281
attribute, which gives the URL of the image to use for legacy user agents that do not support the
picturep277
element. This leads to a question of which image to provide in thesrcp281
attribute.
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)">
<source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
<img src="pear-desktop.jpeg" alt="The pear is juicy.">
</picture>
For details on what to put in thealtp281
attribute, see theRequirements for providing text to act as an alternative for imagesp297
section.
Note
276
VB.NET PDF - WPF PDF Viewer for VB.NET Program Field Data. Data: Auto Fill-in Field Data. Field: Insert & pages edit, C#.NET PDF pages extract, copy, paste rotate PDF pages, zoom in or zoom out PDF pages and go
java read pdf form fields; export pdf form data to excel
98
However, if legacy mobile user agents are more important, one can list all three images in thesourcep278
elements, overriding thesrcp281
attribute
entirely.
<picture>
<source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
<source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
<source srcset="pear-desktop.jpeg">
<img src="pear-mobile.jpeg" alt="The pear is juicy.">
</picture>
Since at this point thesrcp281
attribute is actually being ignored entirely bypicturep277
-supporting user agents, thesrcp281
attribute can default
to any image, including one that is neither the smallest nor biggest:
<picture>
<source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
<source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
<source srcset="pear-desktop.jpeg">
<img src="pear-tablet.jpeg" alt="The pear is juicy.">
</picture>
Above themax-widthmedia feature is used, giving the maximum (viewport
) dimensions that an image is intended for. It is also possible to use
min-widthinstead.
<picture>
<source srcset="pear-desktop.jpeg" media="(min-width: 1281px)">
<source srcset="pear-tablet.jpeg" media="(min-width: 721px)">
<img src="pear-mobile.jpeg" alt="The pear is juicy.">
</picture>
Categoriesp114:
Flow contentp117
.
Phrasing contentp117
.
Embedded contentp118
.
Contexts in which this element can be usedp114:
Whereembedded contentp118
is expected.
Content modelp114:
Zero or moresourcep278
elements, followed by oneimgp280
element, optionally intermixed withscript-supporting elementsp119
.
Tag omission in text/htmlp114:
Neither tag is omissible.
Content attributesp114:
Global attributesp121
DOM interfacep114:
interface HTMLPictureElement : HTMLElement
{};
Thepicturep277
element is a container which provides multiple sources to its containedimgp280
element to allow authors to declaratively control
or give hints to the user agent about which image resource to use, based on the screen pixel density,viewport
size, image format, and other
factors. Itrepresentsp112
its children.
Thepicturep277
element is somewhat different from the similar-lookingvideop325
andaudiop329
elements. While all of them contain
sourcep278
elements, thesourcep278
element'ssrcp279
attribute has no meaning when the element is nested within apicturep277
Note
IDL
4.8.2 Thepictureelement
Support:
Chrome
38+
Chrome for Android
50+
UC Browser for
Android
None
iOS Safari
9.3+
Firefox
38+
IE
None
Opera Mini
None
Android Browser
50+
Edge
13+
Safari
9.1+
Opera
25+
IE Mobile
None
Source:caniuse.com
⋰
277
98
Categoriesp114:
None.
Contexts in which this element can be usedp114:
As a child of apicturep277
element, before theimgp280
element.
As a child of amedia elementp333
, before anyflow contentp117
ortrackp330
elements.
Content modelp114:
Nothingp115
.
Tag omission in text/htmlp114:
Noend tagp954
.
Content attributesp114:
Global attributesp121
srcp279
— Address of the resource
typep278
— Type of embedded resource
srcsetp278
— Images to use in different situations (e.g. high-resolution displays, small monitors, etc)
sizesp278
— Image sizes for different page layouts
mediap278
— Applicable media
DOM interfacep114:
interface HTMLSourceElement : : HTMLElement
{
[CEReactions
] attribute DOMString src
;
[CEReactions
] attribute DOMString type
;
[CEReactions
] attribute DOMString srcset
;
[CEReactions
] attribute DOMString sizes
;
[CEReactions
] attribute DOMString media
;
};
Thesourcep278
element allows authors to specify multiple alternativesource setsp288
forimgp280
elements or multiple alternativemedia
resourcesp334
formedia elementsp333
. It does notrepresentp112
anything on its own.
Thetypeattribute may be present. If present, the value must be avalid MIME typep43
.
The remainder of the requirements depend on whether the parent is apicturep277
element or amedia elementp333
:
↪
sourcep278
element's parent is apicturep277
element
Thesrcsetattribute must be present, and must consist of one or moreimage candidate stringsp281
, each separated from the next by a
U+002C COMMA character (,). If animage candidate stringp281
contains no descriptors and nospace charactersp64
after the URL, the
followingimage candidate stringp281
, if there is one, must begin with one or morespace charactersp64
.
If thesrcsetp278
attribute has anyimage candidate stringsp281
using awidth descriptorp282
, thesizesattribute must also be present,
and the value must be avalid source size listp282
.
Themediaattributes may also be present. If present, the value must contain avalid media query listp86
.
Thetypep278
gives the type of the images in thesource setp288
, to allow the user agent to skip to the nextsourcep278
element if it does
not support the given type.
element, and the resource selection algorithm is different. Also, thepicturep277
element itself does not display anything; it merely
provides a context for its containedimgp280
element that enables it to choose from multipleURLs
.
If thetypep278
attribute isnotspecified, the user agent will not select a differentsourcep278
element if it finds that it does not
support the image format after fetching it.
Note
IDL
4.8.3 Thesourceelement
278
63
When asourcep278
element has a following siblingsourcep278
element orimgp280
element with asrcsetp281
attribute specified, it
must have at least one of the following:
• Amediap278
attribute specified with a value that, afterstripping leading and trailing whitespacep64
, is not the empty string and
is not anASCII case-insensitivep63
match for the string "all".
• Atypep278
attribute specified.
Thesrcp279
attribute must not be present.
↪
sourcep278
element's parent is amedia elementp333
Thesrcattribute gives theURL
of themedia resourcep334
. The value must be avalid non-empty URL potentially surrounded by
spacesp86
. This attribute must be present.
Thetypep278
attribute gives the type of themedia resourcep334
, to help the user agent determine if it can play thismedia resourcep334
before fetching it. Thecodecsparameter, which certain MIME types define, might be necessary to specify exactly how the resource is
encoded.[RFC6381]p1163
Dynamically modifying asourcep278
element and its attribute when the element is already inserted in avideop325
or
audiop329
element will have no effect. To change what is playing, just use thesrcp335
attribute on themedia elementp333
directly, possibly making use of thecanPlayType()p336
method to pick from amongst available resources. Generally,
manipulatingsourcep278
elements manually after the document has been parsed is an unnecessarily complicated approach.
Note
The following list shows some examples of how to use thecodecs=MIME parameter in thetypep278
attribute.
H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC
audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC
audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
Theora video and Vorbis audio in Ogg container
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
Theora video and Speex audio in Ogg container
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
Example
279
73
Thesrcsetp278
,sizesp278
, andmediap278
attributes must not be present.
If asourcep278
element is insertedp43
as a child of amedia elementp333
that has nosrcp335
attribute and whosenetworkStatep337
has the value
NETWORK_EMPTYp337
, the user agent must invoke themedia elementp333
'sresource selection algorithmp338
.
The IDL attributessrc,type,srcset,sizesandmediamustreflectp89
the respective content attributes of the same name.
Categoriesp114:
Flow contentp117
.
Phrasing contentp117
.
Embedded contentp118
.
Form-associated elementp428
.
If the element has ausemapp389
attribute:Interactive contentp118
.
Palpable contentp118
.
Contexts in which this element can be usedp114:
Whereembedded contentp118
is expected.
Content modelp114:
Nothingp115
.
Vorbis audio alone in Ogg container
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
Speex audio alone in Ogg container
<source src='audio.spx' type='audio/ogg; codecs=speex'>
FLAC audio alone in Ogg container
<source src='audio.oga' type='audio/ogg; codecs=flac'>
Dirac video and Vorbis audio in Ogg container
<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>
If the author isn't sure if user agents will all be able to render the media resources provided, the author can listen to theerrorp1154
event on the lastsourcep278
element and trigger fallback behaviour:
<script>
function fallback(video) {
// replace <video> with its contents
while (video.hasChildNodes()) {
if (video.firstChild instanceof HTMLSourceElement)
video.removeChild(video.firstChild);
else
video.parentNode.insertBefore(video.firstChild, video);
}
video.parentNode.removeChild(video);
}
</script>
<video controls autoplay>
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
onerror="fallback(parentNode)">
...
</video>
Example
4.8.4 Theimgelement
Spec bugs:24055
,26068
,
28096
⋰
280
Documents you may be interested
Documents you may be interested