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. each image candidate string contains an image url and an optional width or pixel density descriptor that indicates the conditions under which that candidate should be used instead of the image specified by the src property. 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. ...
...nal width or pixel density descriptor that indicates the conditions under which that candidate should be used instead of the image specified by the src property. 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. each image candidate string must begin with a valid url referencing a non-interactive graphic resource. this is followe...
... used in all other cases. notice that the candidates may use different image types. for more information on what image formats are available for use in the <img> element, see image file type and format guide. example html the html below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our documentation. ...
...And 6 more matches

Responsive images - Learn web development
features — and look at what tools html provides to help implement them. this helps to improve performance across different devices. responsive images are just one part of responsive design, a future css topic for you to learn. prerequisites: you should already know the basics of html and how to add static images to a web page. objective: learn how to use features like srcset and the <picture> element to implement responsive image solutions on websites. why responsive images? let's examine a typical scenario. a typical website may contain a header image and some content images below the header. the header image will likely span the whole of the width of the header, and the content image will fit somewhere inside the content column. here's a simple example: ...
...lement solutions. responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction). 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? in this section, we'll look at the two problems illustrated above and show how to solve them using html's responsive image features. you should note that we will be focusing on the html <img>s...
...th resolution switching? we want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. ...
...And 16 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
on: for example, network errors, content blocking, or linkrot. there are many other attributes to achieve various purposes: referrer/cors control for security and privacy: see crossorigin and referrerpolicy. use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts. responsive image hints with sizes and srcset (see also the <picture> element and our responsive images tutorial). supported image formats the html standard doesn't list what image formats to support, so each user agent supports different formats. a complete guide to image formats supported by web browsers is available. below is a list of the image formats that are most commonly used on the web, as well as some older formats that should n...
...last item in the list. a source size value. media conditions describe properties of the viewport, not of the image. for example, (max-height: 500px) 1000px proposes to use a source of 1000px width, if the viewport is not higher than 500px. source size values specify the intended display size of the image. 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. the selected source size affects the intrinsic size of the image (the image’s display size if no css styling is applied). if the srcset attribute is absent, or contains no values with a width descriptor, then the sizes attribute has no effect. src the image url. mandatory for the <img> element. on browsers supporting s...
...each string is composed of: a url to an image optionally, whitespace followed by one of: a width descriptor (a positive integer directly followed by w). ...
...And 7 more matches

<picture>: The Picture element - HTML: Hypertext Markup Language
tribute is selected. the selected image is then presented in the space occupied by the <img> element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. the <img> element serves two purposes: it describes the size and other attributes of the image and its presentation. it provides a fallback in case none of the offered <source> elements are able to provide a usable image. common use cases for <picture>: a...
...a conditions (for example, loading a simpler version of an image which has too many details, on smaller displays). offering alternative image formats, for cases where certain formats are not supported. saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display. if providing higher-density versions of an image for high-dpi (retina) display, use srcset on the <img> element instead. this lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit media conditions. content categories flow content, phrasing content, embedded content permitted content zero or more <source> elements, followed by one <img> element, optionally intermixed with script-supporting elements. tag ...
...ifferent attributes of the <source> element change the selection of the image inside <picture>. the media attribute the media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each <source> element. if the <source>'s media condition evaluates to false, the browser skips it and evaluates the next element inside <picture>. <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. it is composed of a comma-separated list of image descriptors. each image descriptor is composed of a url of the image, and either... a width descriptor, followed by a w (such as 300w); or ...
...And 2 more matches

HTMLImageElement.currentSrc - Web APIs
operty currentsrc indicates the url of the image which is currently presented in the <img> element it represents. syntax let currentsource = htmlimageelement.currentsrc; value a usvstring indicating the full url of the image currently visible in the <img> element represented by the htmlimageelement. this is useful when you provide multiple image options using the sizes and/or htmlimageelement.srcset properties. currentsrc lets you determine which image from the set of provided images was selected by the browser. example in this example, two different sizes are provided for an image of a clock. one is 200px wide and the other is 400px wide. the sizes attribute is provided to indicate that the image should be drawn at 50% of the document width if the viewport is under 400px wide; otherwise, ...
...in this example, two different sizes are provided for an image of a clock. one is 200px wide and the other is 400px wide. the sizes attribute is provided to indicate that the image should be drawn at 50% of the document width if the viewport is under 400px wide; otherwise, the image is drawn at 90% width of the document. ...
...to change preferences in firefox, visit about:config.ie no support noopera full support yessafari full support 10.1webview android full support 45chrome android ...
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 10.3samsung internet android full support 5.0legend full support ...

HTMLImageElement.src - Web APIs
src; value when providing only a single image, rather than a set of images from which the browser selects the best match for the viewport size and display pixel density, the src attribute is a usvstring specifying the url of the desired image. this can be set either within the html itself using the src content attribute, or programmatically by setting the element's src property. ...
...g the url of the desired image. this can be set either within the html itself using the src content attribute, or programmatically by setting the element's src property. 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). ...
...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. examples specifying a single image html <img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg" width="160" alt="slices of grapefruit, looking yummy."> result using src with an image se...
...he 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. examples specifying a single image html <img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg" width="160" alt="slices of grapefruit, looking yummy."> result using src with an image set when using a set of images with the srcset property, the src serves as either a fallback for older browsers, or as the 1x size of the image. html result specifying a fallback for viewport-based selection when using viewport-bases selection of an image from a srcset by also specifying the sizes property, the src property serves as the fallback to be used on browsers that don't support viewport-based selection. browsers that do support ...

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
edia query of the resource's intended media; this should be used only in a <picture> element. sizes is a list of source sizes that describes the final rendered width of the image represented by the source. each source size consists of a comma-separated list of media condition-length pairs. 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). the sizes attribute has an effect only when the <source> element is the direct child of a <picture> element. src required for <audio> and <video>, address of the media resource. the value of this attribute is ignored...
...each string is composed of: one url specifying an image. a width descriptor, which consists of a string containing a positive integer directly followed by "w", such as 300w. ...
...e floating number directly followed by "x". the default value, if missing, is 1x. each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor. the browser chooses the most adequate image to display at a given point of time. the srcset attribute has an effect only when the <source> element is the direct child of a <picture> element. type the mime media type of the resource, optionally with a codecs parameter. if the type attribute isn't specified, the media's type is retrieved from the server and checked to see if the user agent can handle it; if it can't be rendered, the next <source> is checked. if the type attribute is...
...ning area article video and audio content is a great resource. picture example in this example, two <source> elements are included within the <picture>, providing versions of an image to use when the available space exceeds certain widths. if the available width is less than the smaller of these widths, the user agent will fall back to the image given by the <img> element. <picture> <source srcset="mdn-logo-wide.png" media="(min-width: 800px)"> <source srcset="mdn-logo-medium.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="mdn web docs"> </picture> with the <picture> element, you must always include an <img> with a fallback image, with an alt attribute to ensure accessibility (unless the image is an irrelevant background decorative image). specifications ...

Mozilla splash page - Learn web development
g, using the appropriate youtube tools to generate the code. the video should be 400px wide. adding responsive images to the further info links inside the <div> with the class of further-info you will find four <a> elements — each one linking to an interesting mozilla-related page. ...
...o insert an <img> element inside each one containing appropriate src, alt, srcset and sizes attributes. in each case (except one — which one is inherently responsive?) we want the browser to serve the 120px wide version when the viewport width is 500px wide or less, or the 400px wide version otherwise. make sure you match the correct images with the correct links! 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. an art directed red panda inside the <div> with the class of red-panda, we want to insert a <picture> element that serves the small portrait panda image if...

Index - Learn web development
nd audio in web pages. 247 test your skills: html images beginner, html, images, learn, test your skills this aim of this skill test is to assess whether you've understood our images in html article. ...
... 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. as a recap, there are two distinct problems we've been discussing here: 250 video and audio content article, audio, beginner, guide, html, video, captions, subtitles, track and that's a wrap; we hope you had fun playing with video and audio in web pages! in the next article, w...

HTML performance features - Learn web development
uality of your webpage. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the impact of html elements and attributes on web performance optimization. ...
..."why" of web performance what is web performance? how do users perceive performance? ...

HTMLImageElement.height - Web APIs
rendered to a visual medium or not. if the image is being rendered to a visual medium such as a screen or printer, the height is expressed in css pixels. otherwise, the image's height is represented using its natural (intrinsic) height, adjusted for the display density as indicated by naturalheight. example in this example, two different sizes are provided for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 300px. <p>image height: <span class="size">?</span>px (resize to update)</p> <img src="/files/173...
...0px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 300px. <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. var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updateheight = event =...

HTMLImageElement.width - Web APIs
ing rendered to a visual medium or not. if the image is being rendered to a visual medium such as a screen or printer, the width is expressed in css pixels. otherwise, the image's width is represented using its natural (intrinsic) width, adjusted for the display density as indicated by naturalwidth. example in this example, two different sizes are provided for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 400px. <p>image width: <span class="size">?</span>px (resize to update)</p> <img src="/files/1686...
...00px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 400px. <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. this is done in the window's load and resize event handlers, in order to always provide this information. var clockimage = document.queryselector("img"); let...

HTMLImageElement - Web APIs
that is, for a given viewport size, a particular image size is to be used. read the documentation on the sizes page for details on the format of this string. htmlimageelement.src a usvstring that reflects the src html attribute, which contains the full url of the image including base uri. you can load a different image into the element by changing the url in the src attribute. htmlimageelement.srcset a usvstring reflecting the srcset html attribute. this specifies a list of candidate images, separated by commas (',', u+002c comma). each candidate image is a url followed by a space, followed by a specially-formatted string indicating the size of the image. the size may be specified either the width or a size multiple. read the srcset page for specifics on the format of the size substring. ht...
...images[0].src); specifications specification status comment css object model (cssom) view modulethe definition of 'extensions to htmlimageelement' in that specification. working draft added the x and y properties. html living standardthe definition of 'htmlimageelement' in that specification. living standard the following properties have been added: srcset, currentsrc and sizes. html5the definition of 'htmlimageelement' in that specification. recommendation a constructor (with 2 optional parameters) has been added. the following properties are now obsolete: name, border, align, hspace, vspace, and longdesc. the following properties are now unsigned long, instead of long: height, and width. the following properties have be...

nsIContentPolicy - Archive of obsolete content
cates a content security policy report. type_xslt 18 indicates a style sheet transformation. type_beacon 19 indicates a beacon post. type_fetch 20 indicates a load initiated by the globalfetch.fetch() method, which is available as a global in both window and worker contexts. type_imageset 21 indicates a request to load an <img> (with the srcset attribute or <picture>. type_web_manifest 22 indicates a request to load a web manifest. type_internal_script 23 an internal constant used to represent scripts loaded using <script> elements. important: this type is mapped to type_script before being passed to content policy implementations, and should not be used outside gecko core code. ...

Responsive design - Learn web development
ght be nice to have a square image for mobile, but show the same scene as a landscape image on desktop. or, acknowledging the smaller size of an image on mobile you might want to show a different image altogether, one which is more easily understood at a small screen size. these things can't be achieved by simply scaling down an image. responsive images, using the <picture> element and the <img> srcset and sizes attributes solve both of these problems. you can provide multiple sizes along with "hints" (meta data that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. you can also art direct images used at differ...