Fallback picture for <PICTURE>

Issue

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.

Solution

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."

Answered By - Woodrow Barlow