Imager.js is an alternative solution to the issue of how to handle responsive image loading, created by developers at BBC News. There are many responsive image solutions in the wild, srcset, src-n, PictureFill and so on. They are either verbose or hard to debug (and to maintain/integrate). Some of them don't deal well with pixel density and suffer from double asset payload (meaning you end up downloading assets unnecessarily). We wanted something simple, which works and which is fast as well as network friendly (only download what you need, when you need it). Imager has the ability to replace {width} with a non-numeric value if you provide the widthInterpolator option, which is a function that returns the string to be injected into the image URL for a given width. This feature allows you to use a human-readable name or integrate with third-party image providers.
Features
- Imager implements the BBC Responsive News technique
- Loading any image once
- Loading the most suitable sized image
- Lookup placeholder elements
- Replace placeholders with transparent images
- Update src attribute for each image and assign the best quality/size ratio URL