lqip-loader

Low Quality Image Placeholders (LQIP) loader for webpack

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:

{
  /**
   * 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:

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!

img {
  filter: blur(25px);
}

More history about the issue can be found hereand here.

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




Related projects to this would be lqip module for Nodeas well as lqip-cli.

Thanks to Colin van Eenigefor his reviewing and early testing.

MIT - Zouhir Chahoud

HomePage

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

Repository

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


上一篇:lqip
下一篇:markdown-it-jsx

相关推荐

  • 还在用字体图标吗,试试svg图标吧(内附vuecli-svg-sprite-loader插件)

    前言,关于字体图标 ​相信每位前端童鞋都对字体图标不陌生,毕竟网页必然少不了用大量的图标来装饰页面效果。在很早的时候,我们一般都是用img来当作图标来使用,由于大量地使用img会造成http请求过多的...

    7 天前
  • 说说vue-cli中使用flexible和px2rem-loader

    1.下载libflexible 2.在项目中引入libflexible 一般情况在(main.js中引入libflexible) 3.设置meta标签(视情况而定) 4.安装px2r...

    1 年前
  • 详解webpack之scss和postcss-loader的配置

    本文介绍了详解webpack之scss和postcssloader的配置,分享给大家,具体如下: 开始 首先配置postcssloader 在这里postcss是为了来给浏览器内核添加私有前...

    2 年前
  • 自己撸个 vue markdown loader

    最近,当我把 vueloader 升级到 v15 后发现,自己项目中所使用的一个 vuemarkdownloader 因为兼容问题而没法用了,正当我一筹莫展的时候,无意间看到 vuepress 中使用...

    2 年前
  • 编写一个webpack loader,用于获取指定目录下的图片,返回图片URL数组

    前言 经常遇到这么一个问题。做h5项目图片资源预加载的时候,我们往往需要手动的拿到一个个图片地址存在数组里面,然后再对其遍历做预加载处理,比如这样: 本着能偷懒就偷懒的心态,我们可以编写一个...

    7 个月前
  • 给 React 组件自动加上 react-hot-loader

    在 React 项目中使用 Webpack HMR 时,通常会使用 reacthotloader(/go/?target=https%3A%2F%2Fgithub.com%2Fgaearon%2Fre...

    10 个月前
  • 用 svg-sprite-loader 引入 SVG 以及它的“坑”

    在页面中以 symbol 引用的方式使用 SVG,已经成为目前最完美的图标解决方案。除了使用一些无版权图标网站如 Iconfont 提供的引入方式外,我们还可以在项目中使用 Webpack 来引入自己...

    1 个月前
  • 深入webpack打包原理,loader和plugin的实现

    本文讨论的核心内容如下: webpack进行打包的基本原理 如何自己实现一个loader和plugin 注: 本文使用的webpack版本是v4.43.0, webpackcli版本是v3.3.1...

    22 天前
  • 手把手教你写一个 Loader

    本文示例源代码请戳github博客(https://github.com/xiangxingchen/blog/tree/master/src/webpack/demo06),建议大家动手敲敲代码。

    1 年前
  • 在vue项目中使用webuploader实现文件上传

    简介: WebUploader是由团队开发的一个简单的以,的现代。在现代的浏览器里面能充分发挥HTML5的优势,同时又,沿用原来的FLASH运行时,。两套运行时,同样的调用方式,可供用户任意选用。

    10 个月前

官方社区

扫码加入 JavaScript 社区