后备图为<PICTURE>

Question

Is <PICTURE> officially in HTML5? I can't find it in w3schools.com.

Assuming it is official, is the source attribute of the fallback <img> element src or srcset . I am seeing some web sites using srcset and they don't work in any version of IE, but src works in IE.

Answer 1

Yes, the <picture> tag is an official part of the standard, but HTML5 is a living standard, and this tag is considered "experimental".

The <picture> tag is currently accepted into the WHATWG HTML5 Living Standard . That does not mean it is set in stone, and it is still considered an "experimental technology". You should not depend on browsers to support this technology. You can see an (unofficial) overview of browser support here .

As stated on the Mozilla Developer's Network:

This is an experimental technology. Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

The " living standard " model of standardizing HTML means that elements are accepted more easily but may not remain in the standard or may be changed if a good argument is made against their current use.

The <img> element must be included, and this has the side-effect of offering a fall-back option.

The picture element, by necessity, must have an <img> tag inside it, alongside the <source> elements. This has the side-effect of providing a fall-back option, but is also necessary to provide the base image and metadata (especially to provide the required alt attribute). The <source> elements merely override the src attribute of the <img> tag (under specified circumstances).

Here is an example of the picture element, used properly. This example comes from the Mozilla Developer's 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 in addition.

The srcset attribute is (from what I understand) an "older" technique of defining sources for different resolutions. It does not use standard-syntax media queries or have the other flexibilities afforded by using the <picture> and <source> elements ( although Chris Coyier of CSS-tricks disagrees with me here ), but may be supported by some browsers which don't support the newer standard. Including the srcset attribute on your <img> tag might be desirable, but, in these cases, you still need to include the src attribute as well (which provides a default when none of the srcset files are appropriate, and provides a fall-back for browsers that don't support srcset ). All image tags always need src and alt attribute -- these are required attributes for the <img> tag.

A valid example of the <picture> tag, including the srcset attribute as a fall-back, and the src attribute as a worst-case-scenario fall-back, is below.

<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 gives a much more in-depth analysis of the different responsive images techniques and when to use each one.

---

Aside: Please don't trust W3Schools as an official source. W3Schools chose a name that is similar to W3C (the World Wide Web Consortium), but they are not, in fact, related to the official standards body. From their about page: "The site derives its name from the World Wide Web (W3), but is not affiliated with the W3C."

Answer 2

Yes <picture> tag is part of html5 and according to documentation, its fallback is <img src=... > which will work even in very old browsers.

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>

Its also worth noting that other solutions, such as the srcset attribute, are also being discussed and are starting to see support. The srcset attribute was implemented in Webkit a while ago. However srcset attribute is not used for fallback but allows you to specify higher-quality images for your users who have high-resolution displays, without penalizing the users who don't.