A Responsive Images approach that you can use today!
JavaScript
Pull request Compare This branch is 23 commits ahead, 718 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>