<picture> Element Sample

Available in Chrome 38+

The <picture> element informs Chrome which version of an image resource to fetch based on some criteria, such as the browser viewport size and/or image format support.

In the first example below, resize the browser to see different versions of the picture loading at different viewport sizes. The browser looks for the first <source> element where the media query matches the user's current viewport width, and fetches the image specified in the srcset attribute of that <source> element.

a cute kitten

In the second example below, the browser will display a WebP image instead of a JPG when the browser supports WebP.

a butterfly

The <img> element is required as the last nested child tag of the <picture> declaration block. The <img> element will act as the default image resource and also the fallback for browsers that do not support the <picture> element.