You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 dirname: '[name].[ext]',// you can use [hash].[ext] too if you wish,base64: true,// default: true, gives the base64 encoded imagepalette: 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:
importbannerfrom'./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 leastconsole.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.