LQIP 低质量图像占位符

前言

LQIP（Low Quality Image Placeholders）：低质量图像占位符。这种技术背后的想法是，在网络环境较差的情况下，你可以尽快向用户展示完全可用的网页，为他们提供更好的体验。即使在更好的网络连接上，这仍然为用户提供了更快的可用页面，并且改善了体验。

• 安装 LQIP 工具：npm install lqip

• GitHub源码：https://github.com/zouhir/lqip-loader

代码示例：

const lqip = require('lqip');
const file = './in.png';

lqip.base64(file).then(res => {
    // 色值
    console.log(res);
});

lqip.palette(file).then(res => {
    // 这里输出的是base64的图片地址
    console.log(res);
});

使用Vite插件

// .vitepress/config.js
import lqip from 'vite-plugin-lqip';

export default {
  vite: {
    plugins: [lqip()],
  },
};

SQIP(一种基于 SVG 的 LQIP 技术)

sqip 可以根据你的需要生成 svg 轮廓，因为 svg 是矢量的，也非常适合用作背景图像或者横幅图，而且 css 和 js 都可以很好的操作 svg，为我们留出了很多的可能性。

• GitHub源码：https://github.com/axe312ger/sqip

代码示例：

// 基于 0.3.3 版本
const sqip = require('sqip')
 
const res = sqip({
  filename: 'yasuo.png',
  numberOfPrimitives: 200, // 生成 200 个轮廓
  blur: 0
})
 
console.log(res.final_svg)