Negotiate best media file
source
Each source element provides one version of a media file, allowing the browser to negotiate which one to use.
Webmasters may specify more than one source element for each picture, video or audio element. Each source is examined by the browser, in sequence, and the first one that with a specification that matches the device's capabilities is chosen.
When used with audio and video elements, only the src
attribute is examined.
When used with picture elements, only the media
, srcset
and sizes
attributes are examined.
Properties
- src
- Use sourceref notation to identify the media file containing the soundtrack or video.
- (For use with "audio" and "video" elements only. This is not used with "picture" elements.)
- type
- The MIME-type of the media file. Browsers that can't handle this type will discard this source and check the next one.
- media
- A CSS @media query to describe which conditions will trigger use of this source.
- (For use with "picture" elements only. This is not used with "audio" or "video" elements.)
- srcset
- Provide a comma-separated list of responsive images to use as alternatives, to accomodate devices with higher resolutions or different widths. Only the negotiated image is actually downloaded.
- Use "x" specifiers to define alternate pixel densities, for example
srcset="altimg2.png 2x, altimg3.png 3x, altimg4.png 4x"
- Use "w" specifiers to define alternate-width images, for example
srcset="baseimg.png 800w, altimg2.png 400w, altimg3.png 200w"
- (For use with "picture" elements only. This is not used with "audio" or "video" elements.)
- sizes
- When the srcset attribute is provided, and it uses "w" specifiers, then this sizes attribute can also be specified.
- Provide a comma-separated list of CSS @media query conditions to negotiate what the display width of the image should be.
- Each of the comma-separated specifiers should have a media query and a CSS width. For example,
sizes="(min-width: 1200px) 45vw, (min-width: 800px) 35vw, 25vw"
. The final item is the fallback and should have a CSS width with no accompanying media query. - The negotiated CSS width will be used — instead of the "width" attribute — and the best srcset image will be downloaded and resized to fit that width.
- (For use with "picture" elements only. This is not used with "audio" or "video" elements.)
Examples
Ancestors
- picture
- The picture element allows the browser and server to negotiate which version of an image to use.
- audio
- The audio element allows a browser to play and pause a media file containing a sound track.
- video
- The video element allows a browser to play and pause a media file containing a video.