A polyfill for proposed behavior of the picture element, which does not yet exist, but should. :)
-
Author: Scott Jehl (c) 2012
-
License: MIT/GPLv2
-
Notes: For active discussion of the picture element, see http://www.w3.org/community/respimg/. While this code does work, it is intended to be used only for example purposes until either:
A) A W3C Candidate Recommendation for
B) A major browser implements
Demo URL: http://scottjehl.github.com/picturefill/
Note: The demo only polyfills picture
support for browsers that support CSS3 media queries, but it includes (externally) the matchMedia polyfill which makes matchMedia work in media-query
-supporting browsers that don't have matchMedia
, or at least allows media types to be tested in most any browser. matchMedia
and the matchMedia
polyfill are not required for picture
to work, but they are required to support the media
attributes on picture
source
elements.
Currently, picturefill.js
compresses to around 498bytes (~0.5kb), after minify and gzip. To minify, you might try these online tools: [Uglify]:(http://marijnhaverbeke.nl/uglifyjs), [Yahoo Compressor]:(http://refresh-sf.com/yui/), or Closure Compiler. Serve with gzip compression.
Picturefill
performs a html5-shiv style workaround to get picture
elements recognized in IE browsers. Because of that, you must reference it from the head
of your document. If you'd prefer not referencing it from head
, you'll need to at least call document.createElement("picture"); document.createElement("source");
somewhere in the head of your document, and then you can load picturefill.js
whenever you want.
While the proposed markup for the picture
element is quite simple, enabling its use in browsers that don't yet support it requires a few unfortunate tweaks. The following markup pattern is intended to "bulletproof" existing browser support for picture
without interfering with future native implementations.
<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<!-- <source src="small.jpg"> -->
<source src="small.jpg">
<!-- <source src="medium.jpg" media="(min-width: 400px)"> -->
<source src="medium.jpg" media="(min-width: 400px)">
<!-- <source src="large.jpg" media="(min-width: 800px)"> -->
<source src="large.jpg" media="(min-width: 800px)">
<!-- Fallback content for non-JS browsers. Same src as the initial source element. -->
<noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
</picture>
Notes on the markup above...
- The
picture
element'salt
attribute is used as alternate text for the generatedimg
element. - The
picture
element can have any number ofsource
elements. The above example may contain more than the average situation would call for. - Each
source
element must have asrc
attribute specifying the image path. - It's generally a good idea to include one source element with no
media
qualifier, so it'll apply everywhere. - Each
source
element can have an optionalmedia
attribute to make it apply in different media settings. Both media types and queries can be used, like anymedia
attribute, but support for media queries depends on the browser (unsupporting browsers fail silently). - The
matchMedia
polyfill (included in/external
) is necessary to support themedia
attribute across browsers, even in browsers that support media queries, although it is becoming more widely supported in new browsers. - To ensure
picture
source
elements are recognized in browsers like iOS4.3, Android 2.x, and IE9,source
elements should be preceded by a comment containing thatsource
element's markup. See the support table for information on which browsers rely on these comments (these browsers removesource
elements from the DOM at load, so the comments provide a fallback). - The
noscript
element wraps the fallback image for non-JavaScript environments, and including this wrapper prevents browsers from fetching the fallback image during page load (causing unnecessary overhead). Generally, it's a good idea to reference a small image here, as it's likely to be loaded in older/underpowered mobile devices.
Picturefill supports a broad range of browsers and devices (there are currently no known unsupported browsers), provided that you stick with the markup conventions provided.
The following table covers some of the major platforms tested so far and their mode of support for the picture element, and picturefill.
<tr><td>Chrome Mac (tested v17)</td> <td>Full</td></tr>
<tr><td>Opera Mac Desktop (tested v11)</td> <td>Full</td></tr>
<tr><td>Firefox Mac Desktop (tested v3.0+)</td> <td>Full</td></tr>
<tr><td>IE 6</td> <td>Full (*no media query support, though)</td></tr>
<tr><td>IE 7 </td> <td>Full (*no media query support, though)</td></tr>
<tr><td>IE 8</td> <td>Full (*no media query support, though)</td></tr>
<tr><td>IE 9</td> <td>Comment fallbacks used</td></tr>
<tr><td>IE 10</td> <td>Full</td></tr>
Browser | Support Type |
---|---|
Android 1.6 Webkit | Full |
Android 2.1 Webkit | Comment fallbacks used |
Android 2.2 Webkit | Comment fallbacks used |
Android 2.3 Webkit | Comment fallbacks used |
Android 4.x Webkit | Full |
iOS 4.3 Safari | Comment fallbacks used |
iOS 5.0 Safari | Full |
Opera Mobile | Full |
...More testing wanted! :)