<commit_before># Picturefill
A Responsive Images approach that you can use today that mimics the [proposed picture element](http://www.w3.org/TR/2013/WD-html-picture-element-20130226/) using `span`s, for safety sake.


* Author: <NAME> (c) 2012 (new proposal implemented by <NAME>)
* License: MIT/GPLv2

**Demo URL:** [http://jansepar.github.com/picturefill/](http://jansepar.github.com/picturefill/)

**Note:** Picturefill works best in browsers that support CSS3 media queries. The demo page references (externally) the [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) which makes matchMedia work in `media-query`-supporting browsers that don't support `matchMedia`. `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. In non-media query-supporting browsers, the `matchMedia` polyfill will allow for querying native media types, such as `screen`, `print`, etc.	

## Markup pattern and explanation

Mark up your responsive images like this.

```html
	<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
		<span data-srcset="images/small.jpg"></span>
		<span data-srcset="images/medium.jpg" data-media="(min-width: 400px)"></span>
		<span data-srcset="images/large.jpg" data-media="(min-width: 800px)"></span>
		<span data-srcset="images/extralarge.jpg" data-media="(min-width: 1000px)"></span>

		<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
		&lt;noscript&gt;<img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></img>&lt;/noscript&gt;
	</span>
```

Or when using `sizes`:

```html
    <span data-picture data-alt="Obama with soldiers">
        <span data-sizes="(max-width: 30em) 100%, (max-width: 50em) 75%, 50%"<commit_msg>Add link to draft spec<commit_after># Picturefill
A Responsive Images approach that you can use today that mimics the [proposed picture element](http://www.w3.org/TR/2013/WD-html-picture-element-20130226/) using `span`s, for safety sake.


* Author: <NAME> (c) 2012 (new proposal implemented by <NAME>)
* License: MIT/GPLv2

**Demo URL:** [http://jansepar.github.com/picturefill/](http://jansepar.github.com/picturefill/)

**Draft Specification:** [http://picture.responsiveimages.org/](http://picture.responsiveimages.org/)

**Note:** Picturefill works best in browsers that support CSS3 media queries. The demo page references (externally) the [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) which makes matchMedia work in `media-query`-supporting browsers that don't support `matchMedia`. `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. In non-media query-supporting browsers, the `matchMedia` polyfill will allow for querying native media types, such as `screen`, `print`, etc.	

## Markup pattern and explanation

Mark up your responsive images like this.

```html
	<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
		<span data-srcset="images/small.jpg"></span>
		<span data-srcset="images/medium.jpg" data-media="(min-width: 400px)"></span>
		<span data-srcset="images/large.jpg" data-media="(min-width: 800px)"></span>
		<span data-srcset="images/extralarge.jpg" data-media="(min-width: 1000px)"></span>

		<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
		&lt;noscript&gt;<img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></img>&lt;/noscript&gt;
	</span>
```

Or when using `sizes`:

```html
    <span data-picture data-alt="Obama with soldiers">
        <span data-sizes="(max-width: 30em) 100%, (max-width: 50em) 75%, 50%"
{'fraction_non_alphanumeric': 0.14173825164224355, 'fraction_numerical': 0.0202122283981809, 'mean_word_length': 4.953383458646616, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 35, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1610209', 'n_tokens_mistral': 1315, 'n_tokens_neox': 1189, 'n_words': 400}