npm install --save-dev @mole-inc/lqip-loader
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 }| Name | Type | Default | Description |
|---|---|---|---|
width |
{Number} |
20 |
resize width |
forceJimp |
{Boolean} |
false |
When this is falsy, use sharp if installed |
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.
- Essential Image Optimization, An eBook by Addy Osmani
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