Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)

The `<picture>` element

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

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)

The <picture> element

The `<picture>` element