\n\nGenerating Base64 & dominant colours palette for a jpeg image imported in your JS bundle:\n\nPS: The large image file will be emitted & only 400byte of Base64 (if set to true in the loader options) will be bundled.\n\nwebpack.config.js:\n```js\n{\n /**\n * OPTION A:\n * default file-loader fallback\n **/\n test: /\\.jpe?g$/,\n loaders: [\n {\n loader: 'lqip-loader',\n options: {\n path: '/media', // your image going to be in media folder in the output dir\n name: '[name].[ext]', // you can use [hash].[ext] too if you wish,\n base64: true, // default: true, gives the base64 encoded image\n palette: true // default: false, gives the dominant colours palette\n }\n }\n ]\n\n /**\n * OPTION B:\n * Chained with your own url-loader or file-loader\n **/\n test: /\\.(png|jpe?g)$/,\n loaders: [\n {\n loader: 'lqip-loader',\n options: {\n base64: true,\n palette: false\n }\n },\n {\n loader: 'url-loader',\n options: {\n limit: 8000\n }\n }\n ]\n}\n```\n\nyour-app-module.js:\n```js\nimport banner from './images/banner.jpg';\n\nconsole.log(banner.preSrc);\n// outputs: \"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhY.... \n\n// the object will have palette property, array will be sorted from most dominant colour to the least\nconsole.log(banner.palette) // [ '#628792', '#bed4d5', '#5d4340', '#ba454d', '#c5dce4', '#551f24' ]\n \nconsole.log(banner.src) // that's the original image URL to load later!\n\n```\n\n \n
\n \n
\n\nTo save memory and improve GPU performance, browsers (including Chrome started from 61.0.3163.38) will now render a \nslightly more crisp or pixelated Base64 encoded images.\n
\n \n \n Older Chrome to the left, Chrome v61 to the right.\n
\n\nIf you want the blur to be smooth really bad, here's a fix! \n```css\nimg {\n filter: blur(25px);\n}\n```\n\nMore history about the issue can be [found here](https://bugs.chromium.org/p/chromium/issues/detail?id=771110#c3) and [here](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/6L_3ZZeuA0M).\n\nalternatively, you can fill the container with a really cheap colour or gradient from the amazing palette we provide.\n\n \n
\n \n
\n\n- [Medium web app](https://medium.com/cucumbertown-magazine/the-beginners-guide-to-composition-in-food-photography-how-to-transform-your-food-photos-from-good-39613ab78bf2)\n- [Instagram native mobile app](https://www.instagram.com/)\n- [Polymer shop project](https://shop.polymer-project.org/)\n\n \n
\n \n
\n\n- Essential Image Optimization, An [eBook by Addy Osmany](https://images.guide/)\n\n \n
\n \n
\n\nRelated projects to this would be [lqip module for Node](https://github.com/zouhir/lqip) as well as [lqip-cli](https://github.com/zouhir/lqip-cli).\n\nThanks to [Colin van Eenige](https://twitter.com/cvaneenige) for his reviewing and early testing.\n\nMIT - [Zouhir Chahoud](https://zouhir.org/)\n","maintainers":[{"name":"zouhir","email":"zouhir@zouhir.org"},{"name":"iamhosseindhv","email":"hossein.dehnavi98@yahoo.com"}],"time":{"modified":"2022-06-19T14:28:19.978Z","created":"2017-05-25T05:36:50.046Z","0.1.0":"2017-05-25T05:36:50.046Z","0.1.1":"2017-05-25T10:11:46.626Z","0.1.2":"2017-05-25T13:12:28.839Z","1.0.0":"2017-10-08T04:59:10.792Z","2.0.0":"2017-10-14T10:30:05.403Z","2.0.1":"2017-10-14T11:52:23.752Z","2.0.2":"2017-11-16T04:46:13.775Z","2.1.0":"2018-05-14T18:45:46.747Z","2.1.1":"2018-05-23T20:55:45.527Z","2.2.0":"2018-07-24T05:03:51.265Z","2.2.1":"2020-09-11T19:29:19.929Z"},"homepage":"https://github.com/zouhir/lqip-loader#readme","keywords":["Webpack","blurry","images","base64","image","loader","medium","lazy","load"],"repository":{"type":"git","url":"git+https://github.com/zouhir/lqip-loader.git"},"author":{"name":"Zouhir Chahoud"},"bugs":{"url":"https://github.com/zouhir/lqip-loader/issues"},"license":"MIT","readmeFilename":"README.md","users":{"eijs":true}}
![](\"https://raw.githubusercontent.com/zouhir/lqip/master/_github/logo.png\"){kind=logo}
\n![](\"https://raw.githubusercontent.com/zouhir/lqip/master/_github/installation.png\")
\n![](\"https://raw.githubusercontent.com/zouhir/lqip/master/_github/example.png\")
\n![](\"https://github.com/zouhir/lqip/blob/master/_github/important.png\")
\n![](\"https://user-images.githubusercontent.com/5052316/31105257-7986782c-a82e-11e7-972b-cabcf97f13c0.png\")
\n ![](\"https://raw.githubusercontent.com/zouhir/lqip/master/_github/inspo.png\")
\n![](\"https://github.com/zouhir/lqip/blob/master/_github/mentions.png\")
\n![](\"https://raw.githubusercontent.com/zouhir/lqip/master/_github/creds.png\")
\n