Fallback picture for <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

You can see an (unofficial) overview of browser support here.

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.