BluePil.js demonstration
Img
Original image: here
Original image: here
Original image: here
Bluepil will automatically align the miniature images with the full images according to the background-position you want.
The images used as miniatures in this section have a "not-so-bad" resolution to enhance the fact that they are aligned with the background image.
Note that the position of the background depends on the size of your window at the time of loading. Since the blurred canvas is drawn only at that time, if you change the size of the window, the canvas and the background image will not stay aligned. This should not be a problem in a real application since the blurred canvas should only be showed once during the loading time.
On this page, different sizes and qualities for the miniatures are tested to make an idea of the optimal size.
It seems that 25px for the biggest dimension (width or height) is the smallest size that produces a neat result.
You can manage to start the download of the full size images only when they appear in the window
A more elaborate example here
Base64: I wanted to see if there was a significant difference of loading time according to whether the miniature image is loaded from a different file or embedded in the html in a base64 format. The comparison is here.
Markup generation: I wanted to make sure that generating the markup dynamically wouldn't badly affect the animation. The test is here.
Sequential loading: a demonstration of how to load the images sequentially, i.e. start downloading the full-size images one at a time, starting with the first image in the DOM. It's available here.
Custom animation: the transition from the blurred image to the full sized image is entierly customisable. You can see several examples here .
Custom builds: to reduce the footprint of the library and avoid unnecessary code, bluepil can be built to manage only background-images or html images (but not both). Those builds are respectively used here and here.