Low Quality Image Placeholders (LQIP) for Webpack
Clone or download
Latest commit df3aa40 Jul 24, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore v2.0.0-color-palette Oct 8, 2017
README.md Fix README.md indentation Jan 31, 2018
index.js Integrate with file-loader and url-loader. Move away from pitch Nov 16, 2017
package-lock.json new core lqip@2.1.0 Jul 24, 2018
package.json new core lqip@2.1.0 Jul 24, 2018

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