Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Offline caching for picturefill responsive images
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
external
.htaccess
LICENSE
README.md
index.html
pickyfill.js

README.md

Pickyfill

Offline caching for picturefill responsive images.

  • Author: Rich Trott
  • Copyright: Regents of the University of California (c) 2012
  • License: MIT

Demo URL: http://trott.github.com/pickyfill/

What is it?

Responsive images and offline application caching do not play well together. For an explanation, see "Gotcha #6" of Jake Archibald's "Application Cache is a Douchebag".

Pickyfill (partially) solves the problem using Scott Jehl's picturefill as a starting point. Pickyfill stores responsive images as data URLs in LocalStorage. If your page is using the HTML5 offline Appcache, pickyfill will detect this and store picturefill images as they are loaded. It will only store the images that your device displays, so (for example) an iPhone will only cache iPhone-sized images; it will not download and store crazy large images designed for gigantic screens.

Pickyfill makes the cached images available if the user is offline. It can also improve page load time if the user is on a slow network.

Support, or Where Won't This Work?

Pickyfill requires ApplicationCache, LocalStorage, and Canvas. If a browser that does not support these features visits a site that uses pickyfill, then pickyfill will do nothing and the experience will gracefully degrade to straight-up picturefill.

Browser Version Support
Internet Explorer 10.0+ full support
Internet Explorer < 10.0 degrades to regular picturefill
Firefox 3.5+ partial support*
Chrome 4.0+ full support
Safari (OS X, Windows) 4.0+ full support
Safari (iOS) 3.2+ full support
Opera 10.6+ full support
Android All versions it's complicated**

*In Firefox, pickyfill will cache images on load, but not on resize. This is to avoid caching truncated/corrupted images. On resize, behavior gracefully degrades to regular picturefill behavior.

**Android browser in Android 2.3 (and probably others) does not implement toDataURL() completely/correctly. Pickyfill will detect the problem and degrade gracefully to regular picturefill behavior. Otherwise, pickyfill is fully supported in Android.

How do I use it?

Use picturefill the same way you would without pickyfill. The only changes will be to load pickyfill.js after picturefill.js and to give your site/page an HTML5 Appcache manifest.

<html manifest="/manifest.appcache">
    <head>
...
        <script src="/assets/js/matchmedia.js"></script>
        <script src="/assets/js/picturefill.js"></script>
        <script src="/assets/js/pickyfill.js"></script>
...

Although it would be better to minify and concatenate the JS files, the above code is for clarity.

Because pickyfill will only cache images that are actually displayed, it is possible for a user to visit the site, then visit the site again while offline, resize their browser, and end up with a broken image (because the image that is required at the new browser size was never downloaded before and therefore has not been cached). For this reason, it is important to have an appropriate small FALLBACK image in your offline Appcache.

FALLBACK:
imgs/    imgs/fallback.png
Something went wrong with that request. Please try again.