node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »

lqip-loader

lqip-loader: low quality images placeholders for webpack

demo



npm install --save-dev lqip-loader

Generating Base64 & dominant colours palette for an jpeg image imported in your JS bundle:

webpack.config.js:

{
    test: /\.jpe?g$/,
    loaders: [
        {
            loader: 'lqip-loader',
            options: {
                path: '/media', // your image going to be in media folder in the output dir
                name: '[name].[ext]' // you can use [hash].[ext] too if you wish,
                base64: true, // default: true, gives the base64 encoded image
                palette: true // default: false, gives the dominant colours palette
            }
        },
    ]
}

your-app-module.js:

import banner from './images/banner.jpg';
 
console.log(banner.preSrc);
// outputs: "data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhY.... 
 
// the object will have palette property, array will be sorted from most dominant colour to least
console.log(banner.palette) // [ '#628792', '#bed4d5', '#5d4340', '#ba454d', '#c5dce4', '#551f24' ]
 
console.log(banner.src) // that's the original image URL to load later!
 

To save memory and improve GPU performance browsers (including Chrome started from 61.0.3163.38) will now render a slightly more crisp or pixelated Base64 images.


Older Chrome to the left, Chrome v61 to the right.

If you want the blur to be smooth really bad, here's a fix!

  img {
    filter: blur(25px);
  }

More history about the issue can be found here and here.

alternatively, you can fill the container with really cheap colour or gradient from the amazing palette we provide.




Related projects to this would be lqip-loader for webpack as well as lqip-cli.

Thanks to Colin van Eenige for his reviewing and early testing.

MIT - Zouhir Chahoud