Available in Chrome 38+
<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
<source> element where the media query matches
the user's current viewport width, and fetches the image specified in the
srcset attribute of that
In the second example below, the browser will display a WebP image instead of a JPG when the browser supports WebP.
<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