slimmage: A JavaScript repository from 19nine78

Slimmage - sane & simple responsive images

Your wait for a sane, easily managed path to responsive images has now ended.

With Slimmage, CSS controls which image size is downloaded, not HTML

Media queries, breakpoints, nested percentages, & max-width work as expected.
Works on > 99% of browsers. 3KB minified vanilla js, 1.5KB compressed.
Cookie-free; works on first page load. Works with CDNs.
Fully accessible; degrades gracefully without javascript
Massive bandwidth reduction. No duplicate requests. Can auto-enable WebP and adjust compression based on pixel density
Works with any RIAPI-compliant backend. ImageResizer is preferred.

Tested on IE6-10, Firefox 3.6-23, Opera 11-12, Safari 5-6, Chrome 14-28, Opera Mobile, and over a dozen mobile Webkit browsers. Essentially everything supported by BrowserStack. In theory we should be supporting over 99.5% of browsers.

MIT/Apache dual licensed by Imazen.

Demo page using PureCSS, slimmage.js, & ImageResizer.

If you're on Windows or IIS, read this guide for the easiest implementation path

Sample markup

<noscript data-slimmage>
  <img class="halfsize" src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>

<style type="text/css">
  img.halfsize {max-width:50%;}
</style>

<script src="/slimmage.js" ></script>

Sample markup with IE6/7/8 support

IE6, 7, & 8 are unable to access the contents of a noscript tag, and we are therefore required to duplicate the attributes. If you didn't care about non-javascript enabled users, you could drop the inner img element, but we wouldn't advise it.

<noscript data-slimmage data-img-class="halfsize" data-img-src="http://z.zr.io/ri/1s.jpg?width=150">
  <img class="halfsize" src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>

Sample markup with WebP and quality adjustment enabled, console logging disabled.

<noscript data-slimmage>
  <img class="halfsize" src="http://z.zr.io/ri/1s.jpg?width=150&format=jpg&quality=90" />
</noscript>

<style type="text/css">
  img.halfsize {max-width:50%;}
</style>

<script type="text/javascript">
    window.slimmage = {tryWebP:true, verbose:false};
</script>
<script src="/slimmage.js" ></script>

Sample markup for LQIP (Low-quality image placeholders) mode

Warning - this syntax will cause 2 network requests on many browsers

<img data-slimmage="true" src="http://z.zr.io/ri/1s.jpg?width=100&format=jpg&quality=75" />

Notes

Slimmage requires "width=[number]" be present in the URL. This value specifies the image size when javascript is disabled, but is modified by slimmage.js under normal circumstances.
It can also adjust compression quality based on device pixel ratio, if "quality=[number]" is present.
If WebP is enabled, it can automatically detect and request WebP images instead.
The final max-width applied to the element determines which image file size is downloaded. Unlike earlier versions, a sizing image is not used, and 'width' and 'height' properties are ignored in the selection process.
Images are loaded immediately after stylesheets download. Slimmage add 2ms of javascript execution time per image.

It's a good idea to use a helper method or HTML filter to generate slimmage's required markup. Everything works cross-browser today, but browser vendors have a long and venerable tradition of breaking responsive image solutions.

For IIS or ASP.NET, there's SlimResponse, an output filter that simplifes the markup down to <img src="image.jpg?width=150&slimmage=true" />

Feel free to fork and add links to your HTML filters/helpers here!

Release notes

0.1 - Dynamically injected a twin image tag with a sizer gif (4k wide transparent gif) to let the browser calculate the desired size, then used that for the image URI.
0.2 - Implemented direct reading of the calculated 'max-width' value and conversion of non-px units via a dynamic sibling div (faster and added IE6,7,8 support).

19nine78/slimmage