A Responsive Images approach that you can use today!
JavaScript
Clone or download
Pull request Compare This branch is 23 commits ahead, 726 commits behind scottjehl:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
external
README.md
bower.json
index.html
picturefill.js
picturefill.srcset.js

README.md

Picturefill

A Responsive Images approach that you can use today that mimics the proposed picture element using spans, for safety sake.

  • Author: Scott Jehl (c) 2012
  • License: MIT/GPLv2

Picturefull

This is a fork of Scott Jehl’s picturefill, with the following changes/additions:

Example

<span data-picture data-postpone data-class="photo" data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

	<!-- WebP content for browsers that support it -->
	<span data-type="image/webp" data-srcset="small.jpg 1x, small_x2.jpg 2x"></span>
	<span data-type="image/webp" data-srcset="medium.jpg 1x, medium_x2.jpg 2x"			data-media="(min-width: 400px)"></span>
	<span data-type="image/webp" data-srcset="large.jpg 1x, large_x2.jpg 2x"			data-media="(min-width: 800px)"></span>
	<span data-type="image/webp" data-srcset="extralarge.jpg 1x, extralarge_x2.jpg 2x"	data-media="(min-width: 1000px)"></span>

	<!-- JPEG content for browsers that don't support WebP -->
	<span data-srcset="small.jpg 1x, small_x2.jpg 2x"></span>
	<span data-srcset="medium.jpg 1x, medium_x2.jpg 2x"			data-media="(min-width: 400px)"></span>
	<span data-srcset="large.jpg 1x, large_x2.jpg 2x"			data-media="(min-width: 800px)"></span>
	<span data-srcset="extralarge.jpg 1x, extralarge_x2.jpg 2x"	data-media="(min-width: 1000px)"></span>

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

</span>