Fallback Picture For
Solution 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><sourcesrcset="mdn-logo-wide.png"media="(min-width: 600px)"><imgsrc="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><sourcesrcset="mdn-logo-wide.png"media="(min-width: 600px)"><imgsrc="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."
Solution 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><sourcemedia="(min-width: 64em)"src="high-res.jpg"><sourcemedia="(min-width: 37.5em)"src="med-res.jpg"><sourcesrc="low-res.jpg"><imgsrc="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.
Post a Comment for "Fallback Picture For"