KEMBAR78

Images: Picture element with media attributes in source

The `<picture>` element

Note: this sample uses the picturefill polyfill to provide backwards compatibility for browsers that do not support the <picture> element.

a head carved out of wood

Viewport widths 0 to 449px:

If <picture> is not supported, the fallback <img src="head-fb.jpg"> (150px×150px) is used
1x display: head-fb.jpg (150px×150px)
2x display: head-fb-2x.jpg (300px×300px)

Viewport widths 450px to 799px:

1x display: head-small.jpg (200px×133px)
2x display: head-small-2x.jpg (400px×267px)

Viewport widths 800px and over:

1x display: head.jpg (300px×200px)
2x display: head-2x.jpg (600px×400px)