JSIO is a tiny library that allows you to make fewer requests to your server by packaging all your site image data in a JavaScript file in data uri format.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
doc GFM syntax highlighting Jan 12, 2013
img Smaller placeholder graphic Jan 10, 2013
src Closes #9 - Fixed error thrown whilst trying to process cross domain… Jan 11, 2013
test
.gitignore
.travis.yml package.json cleanup Jan 11, 2013
CHANGELOG Closes #9 - Fixed error thrown whilst trying to process cross domain… Jan 11, 2013
LICENCE-MIT Version 1.1.0 WIP Jan 7, 2013
README.markdown Merge remote-tracking branch 'origin' Feb 11, 2013
grunt.js Added initial nodeunit test structure and simple tests Jan 8, 2013
package.json

README.markdown

What is JSIO? Build Status Dependency Status

JSIO is a tiny library that allows you to make fewer requests to your server by packaging all your site image data in a JavaScript file in data uri format. The idea is that a Gzipped JavaScript file containing all your image data is likely to be smaller than the sum of each image file and its associated HTTP request and header traffic.

Huh?

Each background-image you place in your CSS stylesheets and each <img> element you place in your HTML file causes your browser to issue a request to download the file from the web server. Each request requires a new HTTP connection to be setup, and HTTP headers to be sent down the wire before the file even starts to be transferred. With a lot of images this starts to become a problem, as a lot of unnecessary time and bandwidth is wasted performing these basic operations over and over again. JSIO helps to ease the burden of opening all these connections by placing all your image data in one file.

How does it work?

Simple. The JSIO script sends a request to the server to fetch a JavaScript file that contains image data. The data is loaded into the jsio.resources object - the keys are the filenames of images and the values are their data uri representation. For example:

jsio.resources = {'superman.jpg': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBhISEBU...'};

Check this out:

<img src="img/jsio.gif#superman.jpg"/>

This is an image element that will display the image "jsio.gif". The file "jsio.gif" is a placeholder that signals to the library that the image by the name of "img/superman.jpg" has been encoded as a data URI and can be found in the jsio.resources JavaScript object.

JSIO looks for these placeholders, and replaces them with data uri's that are in the jsio.resources object.

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBhISEBU..."/>

You can see JSIO in action on the test page.

What's the catch?

Glad you asked. The elephant in the room is of course IE. IE < 9 has a 32KB limit on data uri's and IE < 8 doesn't support data uri's at all. Data uri's are supported in most other browsers. Also, somewhat obviously, JavaScript must be enabled.

How can I use it on my website?

  • Clone the latest JSIO code
  • Link to the JSIO library at the bottom of your document: <script src="js/jsio.js" data-res-url="/js/jsio-resources.js"></script>
  • Place the placeholder image (jsio.gif) in your website image directory
  • Use this tool to generate your resources file. There is also a grunt task that'll do this for you.
  • Place the resources file at "/js/jsio-resources.js"
  • Start using JSIO URLs in your <img> elements and background-image CSS declarations

Advanced usage

What's new in this version?

See the changelog

I have a question/suggestion/problem...

Please contact me or add an issue on GitHub

...or check the frequently asked questions