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

picture {
source *srcset="/images/el-capitan.tiff" *type='image/tiff'
source *srcset="/images/el-capitan.webp" *type='image/webp'
img `/images/el-capitan.jpg` *width=980 *height=*600 *alt='El Capitan'
}
A picture with alternate media types

picture {        
source *srcset="camellia-800.jpeg" *media="(min-width: 1000px)"
source *srcset="camellia-600.jpeg" *media="(min-width: 800px)"
img `camellia-400.jpeg` *alt="White Camellia"
}
A picture with alternate sizes

picture {        
// the base image is at 1x resolution
source `baseimg.png` *srcset="altimg2.png 2x,
altimg3.png 3x,
altimg4.png 4x"
img `baseimg.png` *alt="Avatar"
}
A picture with alternate resolutions

picture {
source *srcset="baseimg.png 800w,
altimg2.png 400w,
altimg3.png 200w"
*sizes="(min-width: 1200px) 45vw,
(min-width: 800px) 35vw,
25vw"
img `baseimg.png` *alt="Avatar"
}
A picture with alternate widths

audio *controls {
source `roar.mp3` *type="audio/mpeg"
source `roar.ogg` *type="audio/ogg"
}
A soundtrack with multiple CODECs

video *controls {
source `/media/campbells-soup.mp4` *type="video/mpeg"
source `/media/campbells-soup.webm` *type="video/webm"
source `/media/campbells-soup.avi` *type="video/avi"
}
A video with multiple CODECs

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.

semantax > media-embed > sourceNegotiate best media file

Q