lqip（Low Quality Image Placeholders，低质量图片占位符）是一款可以优化图片加载体验的 npm 包。它可以将原图片转换成几种小尺寸、低质量的缩略图，并将这些缩略图用于占位符，使页面能够更快地渲染。使用 lqip 可以有效减少首屏加载时间、加速页面加载速度，提高用户体验。
安装 lqip
在终端中进入项目根目录（即 package.json 所在目录），然后输入以下命令进行安装 lqip：
npm install lqip --save-dev
使用 lqip
在使用 lqip 前，我们需要先将原图片转换成多种小尺寸、低质量的缩略图。lqip 本身并不提供图片转换功能，所以我们需要使用其他图片处理工具，如 GraphicsMagick、ImageMagick 等。这里以 GraphicsMagick 为例。
安装 GraphicsMagick
GraphicsMagick 是一款功能强大的命令行图片处理工具，支持多种图片格式，如JPEG、PNG、GIF等，可以进行图片剪裁、调整大小、滤镜等操作。它非常适合用于批量处理图片，可在项目根目录下输入以下命令进行安装：
brew install graphicsmagick缩略图生成
在安装好 GraphicsMagick 后，我们就可以使用 lqip 了。lqip 支持多种外部缩略图生成库，包括 GraphicsMagick、ImageMagick、Sharp 等。这里我们使用 GraphicsMagick 来进行缩略图生成。
生成缩略图脚本
我们可以编写一个脚本来批量生成缩略图。在项目根目录下创建一个新文件夹“thumbnails”，然后在此文件夹下创建一个名为“generate-thumbnails.sh”的脚本文件，并在其中编写如下代码：
-- -------------------- ---- ------- ----------- - ------ ------- -- --- ------- ------------------- -- -- --- -- - ---- ------------------- - ----- ---------------------- - ------ --------- - ------ --- --- -- --------- -- ------------------- ------- - -- -------------- ------- -- ------- ------ ------ ---------- -------- ----------------- ----展开代码
说明：
DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"：获取当前脚本文件所在目录的路径。SRC="$DIR/original"：指定原图片所在目录，可以根据实际情况修改。DEST="$DIR/thumbnails"：指定缩略图输出目录，可以根据实际情况修改。WIDTH=240：指定缩略图宽度，可以根据实际情况修改。for img in "$SRC"/*; do：遍历原图片目录下的图片。filename=$(basename "$img")：获取图片文件名。gm convert "$img" -strip -thumbnail "$WIDTH" "$DEST/$filename"：调用 GraphicsMagick 进行缩略图生成。
生成缩略图
在完成脚本编写后，我们可以在项目根目录下执行以下命令，生成缩略图：
sh thumbnails/generate-thumbnails.sh
执行完命令后，我们可以在“thumbnails”文件夹下看到生成的缩略图。
使用 lqip
在生成好缩略图后，我们可以在前端代码中使用 lqip。
安装 lqip-loader
lqip-loader 是一款 Webpack 插件，它可以将 lqip 自动生成的缩略图插入到 HTML 中，从而达到图片占位符的效果。我们可以使用以下命令进行安装：
npm install lqip-loader --save-dev
Webpack 配置
在使用 lqip-loader 前，我们需要在 Webpack 配置文件中进行如下配置：
-- -------------------- ---- ------- -- ----------------- -------------- - - -- --- ------- - ------ - -- --- - ----- --------------------- ---- - - ------- ------------- -------- - ------ ----- ----- ------------------------------- -- -- - ------- -------------- -------- - ----- --------- ----- ------------------------- -- -- -- -- -- --- -- -- --展开代码
说明：
test: /\.(png|jpe?g|gif)$/：指定对图片文件进行处理。url-loader：将图片文件转换成 Base64 编码，以减少 HTTP 请求次数。limit: 8192表示当图片大小小于 8192 字节时，使用 Base64 编码；否则将图片文件输出到 dist 目录并返回文件 URL。lqip-loader：调用 lqip 自动生成的缩略图并插入到 HTML 中。path: 'images'：指定缩略图目录（相对于项目根目录）。name: '[name].[ext].lqip.json'：指定缩略图文件名格式。[name].[ext]表示与原图片文件名和扩展名相同，.lqip.json表示后缀为 lqip.json。
页面引用
在完成 Webpack 配置后，我们就可以在页面中使用占位符了。以 React 为例，我们可以在组件中使用以下代码：
-- -------------------- ---- ------- ------ ------------ ---- ------------------------------- -------- -------------- - ------ - ----- ---- ----------------------------------- ------------- -------- ------ ------ -- ------------------------------------------- -- ----- ------ -- -- ------ -- -展开代码
说明：
thumbWelcome：导入 lqip 自动生成的缩略图。src={require('images/welcome.jpg')}：获取原图片 URL。data-lqip={thumbWelcome?.metadata?.dataURI}：将缩略图 Base64 编码插入到data-lqip属性中。
总结
使用 lqip 可以显著提高页面加载速度，并且不影响图片质量。本文介绍了使用 lqip 的完整流程，包括安装 lqip、安装 GraphicsMagick、生成缩略图、使用 lqip-loader 和在页面引用占位符等。希望本文能对您有所启发，对您的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77048
