JavaScript
Low Quality Image Placeholders (LQIP) for Webpack

LQIP-LOADER for WEBPACK

LQIP: Low Quality Images Placeholder

Demo: must see first

Inspired By:

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

What's this loader best at:

• Static assets
• Fast JPEG, JPG, PNG scale down and base64 string conversion.
• Not losing a reference of the original image as the return value is an object (look on usage).

What can be improved

Image src hold a reference for the file path in your output directory, it does not emit the file, but at the moment it lacks the smartness and capability of file-loader to maintain relative paths.

I am Currently working on a solution to pipe it after file-loader or url-loader or find a better src URL implemenation please feel free to submit a PR or raise an issue with your idea.

Example usage

Loading JPEG or JPG files

in your webpack config file

{
    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
            }
        },
    ]
}

In your module

import banner from './images/banner.jpg';

console.log(banner.preSrc) // that's the base64 blurry file, use first
console.log(banner.src) // that's the original image URL to load later

License

MIT - Zouhir Chahoud