Imager.js
What is it?
Imager.js is an alternative solution to the issue of how to handle responsive image loading, created by developers at BBC News
How does it work?
- Lookup placeholder elements
- Replace with transparent 1x1 image
- Assign src attribute with appropriate value
- On resize update image src
Usage
<div style="width: 240px">
<div class="delay" data-src="http://placehold.it/{width}"></div>
</div>
<script>
new Imager({ availableWidths: [200, 260, 320, 600] });
</script><div style="width: 240px">
<img src="http://placehold.it/260" data-src="http://placehold.it/{width}" class="image-replace">
</div>
<script>
new Imager({ availableWidths: [200, 260, 320, 600] });
</script>Other Features?
Why?
A task runner using Node.js
Auto generate images
Allows you to specify...
- dimensions
- named files
- suffixes
- quality