Low Quality Image Placeholders (LQIP) for Webpack
JavaScript
Switch branches/tags
Nothing to show
Latest commit 9d21100 Nov 23, 2017 @zouhir zouhir Merge pull request #10 from jeffreyyoung/patch-1
fix link

README.md

lqip-loader: low quality images placeholders for webpack

demo



npm install --save-dev lqip-loader

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

PS: The large image file will be emitted & only 400byte of Base64 (if set to true in the loader options) will be bundled.

webpack.config.js:

{
    /**
     * OPTION A:
     * default file-loader fallback
     **/
    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
            }
        },
    ]

    /**
     * OPTION B:
     * Chained with your own url-loader or file-loader
     **/
    test: /\.(png|jpe?g)$/,
    loaders: [
      {
        loader: 'lqip-loader',
        options: {
          base64: true,
          palette: false
        }
      },
      {
        loader: "url-loader",
        options: {
          limit: 8000
        }
      }
  ]
}

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 the 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 encoded 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 a really cheap colour or gradient from the amazing palette we provide.




Related projects to this would be lqip module for Node as well as lqip-cli.

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

MIT - Zouhir Chahoud