Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 48 lines (29 sloc) 3.61 kb
77defd7 all in.
scottjehl authored
1 # Picturefill
2
c839311 div branch becomes the new default
Scott Jehl authored
3 A Responsive Images approach that you can use today, that mimics the [proposed picture element](http://www.w3.org/community/respimg/wiki/Picture_Element_Proposal) using `div`s, for safety sake.
77defd7 all in.
scottjehl authored
4
5 * Author: Scott Jehl (c) 2012
6 * License: MIT/GPLv2
7
c82d642 demo link update - gh pages seems to be working now
scottjehl authored
8 Demo URL: [http://scottjehl.github.com/picturefill/](http://scottjehl.github.com/picturefill/)
77defd7 all in.
scottjehl authored
9
c839311 div branch becomes the new default
Scott Jehl authored
10 Note: Picturefill works best in browsers that support CSS3 media queries. It includes (externally) the [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) 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 `picturefill` to work, but they are required to support the `media` attributes on `picture` `source` elements.
404c39d This refactors the proposed markup (slightly) and picturefill JS to b…
scottjehl authored
11
12 ## Size and delivery
13
14 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](http://closure-compiler.appspot.com/home). Serve with gzip compression.
15
16 ## Markup pattern and explanation
17
c839311 div branch becomes the new default
Scott Jehl authored
18 Mark up your responsive images like this. The data-media attribute on each div[data-src] element accepts and and all CSS3 media queries, such as `min` or `max` width, or even `min-device-pixel-ratio` for HD (retina) displays.
19
20 <div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
21 <div data-src="small.jpg"></div>
22 <div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
23 <div data-src="large.jpg" data-media="(min-width: 800px)"></div>
24 <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
25
26 <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
27 <noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
28 </div>
404c39d This refactors the proposed markup (slightly) and picturefill JS to b…
scottjehl authored
29
30
31 ### Explained...
32
33 Notes on the markup above...
34
c839311 div branch becomes the new default
Scott Jehl authored
35 * The `div[data-picture]` element's `alt` attribute is used as alternate text for the generated `img` element.
36 * The `div[data-picture]` element can have any number of `source` elements. The above example may contain more than the average situation would call for.
37 * Each `div[data-src]` element must have a `data-src` attribute specifying the image path.
404c39d This refactors the proposed markup (slightly) and picturefill JS to b…
scottjehl authored
38 * It's generally a good idea to include one source element with no `media` qualifier, so it'll apply everywhere.
c839311 div branch becomes the new default
Scott Jehl authored
39 * Each `data-src` element can have an optional `media` attribute to make it apply in different media settings. Both media types and queries can be used, like any `media` attribute, but support for media queries depends on the browser (unsupporting browsers fail silently).
404c39d This refactors the proposed markup (slightly) and picturefill JS to b…
scottjehl authored
40 * The `matchMedia` polyfill (included in `/external`) is necessary to support the `media` attribute across browsers, even in browsers that support media queries, although it is becoming more widely supported in new browsers.
41 * 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.
42
43
44 ## Support
45
46 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.
47
Something went wrong with that request. Please try again.