lqip-loader: low quality images placeholders for webpack

Installation

npm install --save-dev @mole-inc/lqip-loader

Usage Example

Generating Base64 for a jpeg/png 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$/,
  use: [
    {
      loader: '@mole-inc/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
      }
    }
  ]

  /**
   * OPTION B:
   * Chained with your own url-loader or file-loader
   **/
  test: /\.(png|jpe?g)$/,
  use: [
    {
      loader: '@mole-inc/lqip-loader',
      options: {
        width: 200
      }
    },
    {
      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.... 
 
console.log(banner.src); // that's the original image URL to load later!

console.log(banner.sizes);
// { width: 14, height:7, originalWidth: 1400, originalHeight: 700 }

Options

| Name | Type | Default | Description | | :-------------: | :---------: | :-----: | :------------------------------------------------------------------------- | | width | {Number} | 20 | resize width | | forceJimp | {Boolean} | false | When this is falsy, use sharp if installed |

Important

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.

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.

Inspired by

• Medium web app
• Instagram native mobile app
• Polymer shop project

Remarkable Mentions

• Essential Image Optimization, An eBook by Addy Osmani

Notes, Credits & License

This is a maintained fork of zouhir/lqip-loader.
Original lqip-loader is released under The MIT License by Zouhir Chahoud.

Please see LICENSE file