Node.js 高性能缩略图工具：@giszhc/vips-thumbnail 开源实践

一个简单、高性能的 Node.js 图片缩略图生成库，适用于
GIS 平台、图片管理系统、企业官网等场景。

为什么需要图片缩略图？

在实际项目中，高清图片通常很大：

• 摄影图片：10MB+
• 遥感影像：几十 MB 甚至 GB
• 产品图片：数 MB

如果直接加载原图：

• 页面加载慢
• 浪费带宽
• 消耗服务器资源

因此，大多数系统都会提前生成缩略图。

例如：

原图：
8000 × 6000
25MB

缩略图：
300 × 300
几十 KB

–

安装

npm：

npm install @giszhc/vips-thumbnail

pnpm：

pnpm add @giszhc/vips-thumbnail

---

基本使用

示例：

import { createThumbnail } from "@giszhc/vips-thumbnail"

await createThumbnail(
  "uploads/demo.jpg",
  "thumbnail/demo.jpg",
  {
    width: 300,
    height: 300
  }
)

生成：

uploads
 └── demo.jpg

thumbnail
 └── demo.jpg

---

真实工程应用场景

企业图片管理系统

产品图片：

product.jpg

8MB

生成：

product-thumb.jpg

80KB

提升首页加载速度。

---

开发踩坑记录

1. 不要随意读取大图片 Buffer

错误方式：

const buffer = fs.readFileSync(file)

sharp(buffer)

大图片容易造成：

JavaScript heap out of memory

推荐：

sharp(filePath)

让 libvips 管理文件读取。

---

2. 注意图片比例

错误：

resize(300,300)

可能导致图片变形。

推荐：

resize({
  width:300,
  height:300,
  fit:"cover"
})

---

3. Docker 环境需要 libvips

Linux 环境：

apt install libvips

Docker：

RUN apt update \
&& apt install -y libvips-dev

---

性能优化建议

多尺寸生成

实际项目通常需要：

large
medium
small
thumbnail

一次生成，多处使用。

项目地址：

https://www.npmjs.com/package/@giszhc/vips-thumbnail

如果这篇文章对你有帮助，欢迎点赞 👍 收藏 ⭐ 关注 👀

完结，撒花✿✿ヽ(°▽°)ノ✿