• Website: http://responsivenews.co.uk/
• Source: http://github.com/bbc-news/Imager.js

Note: this project is not ready for production and is currently in development

Imager.js is an alternative solution to the issue of how to handle responsive image loading, created by developers at BBC News.

An open-source port of the BBC News technique for handling the loading of images within a responsive code base.

You'll need a server-side image processing script which can return optimised images at specific dimensions that match parameters set within a RESTful URL design.

For the purpose of demonstration we're using the 3rd party service Placehold.it.

See the Demo directory for full example and source files.

Wherever you need an image to appear add: <div class="delayed-image-load" data-src="http://placehold.it/340" data-width="340"></div> - where the data-width is the size of the image placeholder (where the actual image will eventually be loaded) and the data-src is the initial URL to be loaded.

Then within your JavaScript, initialise a new instance of the Imager Enhancer library: new ImageEnhancer();

If you want to add functionality to this project, pull requests are welcome.

• Create a branch based off master and do all of your changes with in it.
• Make sure commits are as 'atomic' as possible (this way specific changes can be removed or cherry-picked more easily)
• If you have to pause to add a 'and' anywhere in the title, it should be two pull requests.
• Make commits of logical units and describe them properly
• Check for unnecessary whitespace with git diff --check before committing.
• If possible, submit tests to your patch / new feature so it can be tested easily.
• Assure nothing is broken by running all the test
• Please ensure that it complies with coding standards.

Please raise any issues with this project as a GitHub issue.

• Mark McDonnell
• Tom Maslen
• Addy Osmani

BBC R&D developer Thomas Parisot has built an alternative implementation that introduces some features currently not available within Imager.js

We are proactively looking to add improvements to Imager.js (such as proper lazy loading images, specifying pixel density images among other additions) but do feel free to explore Thomas' version (remember to check specifically his branches feature-separation and flickr-demo)

This is an experiment in offering developers an interim solution to responsive images based on the ImageEnhancer concept researched and developed by the team at BBC News.

At present, support for srcset and PictureFill are not widespread and the polyfills for these solutions also come with a number of drawbacks.

Mark McDonnell (@integralist) documented the process and rewrote the original code so it could be evolved and improved with the help of the open-source community.

The goal of this project is to automate the process with the help of the Grunt JavaScript task runner (potentially via grunt-responsive-images for image generation based on a source directory).

Much of this work can be repurposed to work with a more standards-based approach once support improves in modern browsers.

For the purposes of maintaining a distinguishment between the ImageEnhancer concept built by BBC News and this project, we're calling it Imager.js

Having reviewed the polyfills for these implementations, the cons outweigh the pros at this point. You either take performance hits or have to deal with 2x image requests, which is counter-intuitive. I'd prefer to just use srcset on its own, but other than WebKit other browsers have yet to implement at this point.

This demo requires the following commands to be run...

• npm install (all dependencies specified in package.json)
• brew install imagemagick (for other installations see http://www.imagemagick.org/script/binary-releases.php)

Review the Gruntfile.js and update the custom sizes that you want to use (if no sizes are specified in the Gruntfile then 320, 640, 1024 are used)...

options: {
    sizes: [
        {
            width: 320,
            height: 240
        },
        {
            name: 'large',
            width: 640
        },
        {
            name   : 'large',
            width  : 1024,
            suffix : '_x2',
            quality: 0.6
        }
    ]
}

...be aware the names of the files need to change within your HTML...

<div class="delayed-image-load" data-src="Assets/Images/Generated/A-320.jpg" data-width="1024"></div>
<div class="delayed-image-load" data-src="Assets/Images/Generated/B-320.jpg" data-width="1024"></div>
<div class="delayed-image-load" data-src="Assets/Images/Generated/C-320.jpg" data-width="1024"></div>

You can then pass those image sizes through to Imager.js along with a regex for Imager to parse the information...

var imager = new Imager({
    availableWidths: [320, 640, 1024]
});

For full details of the Grunt task options see the grunt-responsive-images repo on GitHub.

Imager.js is available to everyone under the terms of the Apache 2.0 open source licence. Take a look at the LICENSE file in the code.