Negotiate an alternative image

picture

The picture element allows the browser and server to negotiate which version of an image to use.

The picture element supports different sized versions of the same image for optimal display on desktops, laptops, tablets and cellphones with different display sizes and resolutions.

The picture element is a wrapper for one "img" element and multiple "source" elements.

The img element specifies most of the attributes to use like height, width, assistive technology alt text, etc.

Each source element specifies an alternate version of the image to be used on devices with higher resolutions or different sized screens or support for different content types.

Properties

The picture element does not have any special attributes.: Use attributes on the img element to specify image settings such as: width, height and alt.; Use attributes on each of the source elements to specify type, media, srcset and sizes.

Examples

// The tiff version is only usable by devices with special setup
// The webp version is supported by some browsers
// The JPEG version is supported by everyone

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'
}

Alternate images for unsupported 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"
}

Alternate images to match device size

Descendents

img: The img element is used to display a photograph or graphic drawing within a document.

source: Each source element provides one version of a media file, allowing the browser to negotiate which one to use.