https://github.com/zouhir/lqip-loader

Low Quality Image Placeholders (LQIP) for Webpack
https://github.com/zouhir/lqip-loader

Last synced: 22 days ago
JSON representation

Low Quality Image Placeholders (LQIP) for Webpack

• Host: GitHub
• URL: https://github.com/zouhir/lqip-loader
• Owner: zouhir
• Created: 2017-05-24T12:32:35.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-29T03:51:42.000Z (almost 2 years ago)
• Last Synced: 2024-05-15T13:09:17.781Z (6 months ago)
• Language: JavaScript
• Size: 349 KB
• Stars: 1,205
• Watchers: 14
• Forks: 42
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



lqip-loader: low quality images placeholders for webpack



  demo











  



```

npm install --save-dev lqip-loader

```






  



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:

```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 dir

        name: '[name].[ext]', // you can use [hash].[ext] too if you wish,

        base64: true, // default: true, gives the base64 encoded image

        palette: 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:

```js

import banner from './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 least

console.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! 

```css

img {

  filter: blur(25px);

}

```

More 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).

alternatively, you can fill the container with a really cheap colour or gradient from the amazing palette we provide.






  



- [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)

- [Instagram native mobile app](https://www.instagram.com/)

- [Polymer shop project](https://shop.polymer-project.org/)






  



- Essential Image Optimization, An [eBook by Addy Osmany](https://images.guide/)






  

 


Related 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).

Thanks to [Colin van Eenige](https://twitter.com/cvaneenige) for his reviewing and early testing.

MIT - [Zouhir Chahoud](https://zouhir.org/)