Yes, the <picture> is an official part of the standard, but HTML5 is a living standard, and this tag is considered "experimental."
The <picture> is currently adopted by the WHATWG HTML5 Living Standard . This does not mean that it is installed in stone, and it is still considered to be "experimental technology." You should not depend on browsers to support this technology. You can see the (unofficial) browser support overview here .
As stated on the Mozilla Developer Network:
This is an experimental technology. Since this technology specification has not stabilized, check the compatibility table for the correct prefixes for use in different browsers. Also note that the syntax and behavior of experimental technology may change in future versions of browsers as the specification changes.
The " standard of living " HTML standardization model means that elements are adopted more easily, but may not remain in the standard or may be changed if there is a good argument against their use at present.
The <img> element must be included, and this has a side effect of the proposed return option.
An image element, if necessary, must have an <img> tag inside it, as well as <source> elements. This has the side effect of providing a return option, but you also need to provide the base image and metadata (especially to provide the required alt attribute). The <source> elements simply override the src attribute of the <img> (under certain circumstances).
Here is an example of an image element that is being used correctly. This example is from the Mozilla Developer Network .
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"> </picture>
The src attribute should always be included, even if you use the srcset attribute.
The srcset attribute (from what I understand) is an "older" method of determining sources for different resolutions. It does not use queries with standard syntax or has other flexible features provided by <picture> and <source> elements ( although Chris Koyer from CSS tricks does not agree with me here ), but may be supported by some browsers that do not support the new standard . Including the srcset tag in the <img> may be desirable, but in these cases you still need to include the src attribute (which provides a default value when none of the srcset files matches, and provides rollback for browsers that do not support srcset ) . All image tags always need the src and alt attributes - these are required attributes for the <img> .
The following is an example of a valid <picture> , including the srcset attribute as a srcset and the src attribute as a rejection of the worst case scenario.
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" srcset="mdn-logo.png 2x" alt="MDN"> </picture>
This Smashing Magazine article provides a much deeper analysis of the different methods for responding to images and when to use them.
Also: Please do not trust W3Schools as an official source. W3Schools have chosen a name similar to the W3C (World Wide Web Consortium), but in fact they are not affiliated with the official standards body. On the about page: "The site got its name from the World Wide Web (W3), but is not associated with the W3C."