Naughty Programmer's Madness

    @docusaurus/lqip-loader
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0-beta.21 • Public • Published

    @docusaurus/lqip-loader

    Low Quality Image Placeholders (LQIP) loader for webpack.

    Installation

    npm install --save-dev @docusaurus/lqip-loader
    

    Example

    Generating Base64 for a jpeg image imported in your JS bundle:

    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: '@docusaurus/lqip-loader',
          options: {
            path: '/media', // your image going to be in media folder in the output dir
            name: '[name].[ext]', // you can use [contenthash].[ext] too if you wish,
          }
        }
      ]
    
      // OPTION B: Chained with your own url-loader or file-loader
      test: /\.(png|jpe?g)$/,
      loaders: [
        '@docusaurus/lqip-loader',
        {
          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!

    Important note

    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. If you want the blur to be very intense (smooth), here's a fix!

    img {
      filter: blur(25px);
    }

    More history about the issue can be found here and here.

    Credits

    This package has been imported from @endiliey/lqip-loader which was a fork of the original lqip-loader created exclusively for Docusaurus.

    Keywords

    none

    Install

    npm i @docusaurus/lqip-loader

    DownloadsWeekly Downloads

    6,618

    Version

    2.0.0-beta.21

    License

    MIT

    Unpacked Size

    7.94 kB

    Total Files

    7

    Last publish

    Collaborators

    • yangshun
    • fb
    • slorber
    • lex111
    • docusaurus-bot