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.
In the second example below, the browser will display a WebP image instead of a JPG when the browser supports WebP.
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.