HTMLImageElement.srcset - Web APIs
the htmlimageelement property srcset is a string which identifies one or more image candidate strings, separated using commas (,) each specifying image resources to use under given circumstances.
... the srcset property, along with the sizes property, are a crucial component in designing responsive web sites, as they can be used together to make pages that use appropriate images for the rendering situation.
... syntax htmlimageelement.srcset = imagecandidatestrings; let srcset = htmlimageelement.srcset; value a usvstring containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the <img> element represented by the htmlimageelement.
...And 7 more matches

Responsive images - Learn web development
objective: learn how to use features like srcset and the <picture> element to implement responsive image solutions on websites.
... note: the new features discussed in this article — srcset/sizes/<picture> — are all supported in release versions of modern desktop and mobile browsers (including microsoft's edge browser, although not internet explorer.) how do you create responsive images?
...the standard <img> element traditionally only lets you point the browser to a single source file: <img src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> we can however use two new attributes — srcset and sizes — to provide several additional source images along with hints to help the browser pick the right one.
...And 14 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
responsive image hints with sizes and srcset (see also the <picture> element and our responsive images tutorial).
...user agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width (w) descriptors.
...if the srcset attribute is absent, or contains no values with a width descriptor, then the sizes attribute has no effect.
...And 8 more matches

HTMLImageElement.src - Web APIs
if you use the srcset content attribute to provide multiple image options for different display pixel densities, the url specified by the src attribute is used in one of two ways: as a fallback for browsers that don't support srcset.
... as an equivalent for specifying an image in srcset with the size multiplier 1x; that is, the image specified by src is used on low-density screens (such as typical 72 dpi or 96 dpi displays).
... additionally, if you use src along with both sizes (or the corresponding sizes content attribute) and srcset in order to choose an image based on the viewport size, the src attribute is only used as a fallback for browsers that don't support sizes and srcset; otherwise, it's not used at all.
...And 2 more matches

<picture>: The Picture element - HTML: Hypertext Markup Language
to decide which url to load, the user agent examines each <source>'s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.
... if providing higher-density versions of an image for high-dpi (retina) display, use srcset on the <img> element instead.
... <picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="mdn"> </picture> the srcset attribute the srcset attribute is used to offer list of possible images based on size.
...And 2 more matches

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
this information is used by the browser to determine, before laying the page out, which image defined in srcset to use.
... please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example).
... srcset a list of one or more strings separated by commas indicating a set of possible images represented by the source for the browser to use.
...And 2 more matches

HTMLImageElement.currentSrc - Web APIs
this is useful when you provide multiple image options using the sizes and/or htmlimageelement.srcset properties.
... html <img src="/files/16797/clock-demo-400px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 50%, 90%"> javascript var clockimage = document.queryselector("img"); let p = document.createelement("p"); if (!clockimage.currentsrc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.innertext = "using the 400px image!"; } document.body.appendchild(p);...
... full support 45edge full support 13firefox full support 38 full support 38 no support 32 — 52disabled disabled from version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true).
... support 45chrome android full support 45firefox android full support 38 full support 38 no support 32 — 52disabled disabled from version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true).

HTMLImageElement - Web APIs
htmlimageelement.srcset a usvstring reflecting the srcset html attribute.
...read the srcset page for specifics on the format of the size substring.
... living standard the following properties have been added: srcset, currentsrc and sizes.

Adding vector graphics to the Web - Learn web development
troubleshooting and cross-browser support for browsers that don't support svg (ie 8 and below, android 2.3 and below), you could reference a png or jpg from your src attribute and use a srcset attribute (which only recent browsers recognize) to reference the svg.
... this being the case, only supporting browsers will load the svg — older browsers will load the png instead: <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"> you can also use svgs as css background images, as shown below.

Mozilla splash page - Learn web development
to complete this section you'll need to insert an <img> element inside each one containing appropriate src, alt, srcset and sizes attributes.
... note: to properly test the srcset/sizes examples, you'll need to upload your site to a server (using github pages is an easy and free solution), then from there you can test whether they are working properly using browser developer tools such as the firefox network monitor.

Index - Learn web development
248 mozilla splash page assessment, beginner, codingscripting, embedding, html, images, jpeg, multimedia, png, video, iframe, img, picture, responsive, sizes, src, srcset in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about mozilla!
... 249 responsive images article, beginner, codingscripting, design, graphics, guide, html, image, intermediate, jpeg, png, pictures, captions, hyperlinks, img, picture, sizes, src, srcset that's a wrap for responsive images — we hope you enjoyed playing with these new techniques.

HTML performance features - Learn web development
elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance?
... html performance features css performance features fonts and performance mobile performance focusing on performance see also the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) ...

HTMLImageElement.complete - Web APIs
the image is considered completely loaded if any of the following are true: neither the src nor the srcset attribute is specified.
... the srcset attribute is absent and the src attribute, while specified, is the empty string ("").

HTMLImageElement.height - Web APIs
example in this example, two different sizes are provided for an image of a clock using the srcset attribute.
... <p>image height: <span class="size">?</span>px (resize to update)</p> <img src="/files/17373/clock-demo-200px.png" alt="clock" srcset="/files/17373/clock-demo-200px.png 200w, /files/17374/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 300px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn.

HTMLImageElement.width - Web APIs
example in this example, two different sizes are provided for an image of a clock using the srcset attribute.
... <p>image width: <span class="size">?</span>px (resize to update)</p> <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 400px"> javascript the javascript code looks at the width to determine the width of the image at the moment.