用 sharp 压缩 Logo：7KB，我是怎么做到的？

garyguo
7 阅读3分钟

最近在处理一个 Logo 图片。

  • PNG
  • 透明背景
  • 宽 2000+ 像素
  • 体积 258KB

对一张 Logo 来说，这尺寸和体积都明显偏大了。
我的目标很简单：

👉 缩到 512px 宽，体积越小越好，肉眼看不出明显差别即可。

如果你买不起（或者不想装）正版 Photoshop，那今天这条路你一定用得上。

sharp：一个高性能的 Node.js 图像处理库

这次我用的是 sharp —— 一个非常流行、非常快的 Node.js 图像处理库。

官网一句话介绍：

High performance Node.js image processing

简单、直接、不废话。

创建一个最小可用的测试项目

先建一个空白 Node.js 项目：

npm init -y

安装 sharp（我用的是 pnpm）：

pnpm add sharp

为了方便使用 import 语法，在 package.json 里加一行：

{
  "type": "module"
}

把 Logo 缩到 512px

假设当前目录下有一张 logo.png，代码可以这样写：

import sharp from 'sharp';

await sharp('logo.png')
  .resize({ width: 512 })
  .toFile('logo-512.png');

toFile() 返回的是一个 Promise，所以我直接 await 了。

运行之后：

  • ✅ 成功生成 logo-512.png
  • ✅ 宽度变成 512px
  • ❗ 体积从 258KB → 55KB

只是改了尺寸，体积就少了 近 80% 。

说实话，有点震惊。

继续压榨：PNG 压缩参数

sharp 对 PNG 还提供了更多压缩选项，比如：

  • quality
  • compressionLevel
  • palette
  • effort

继续来一刀：

await sharp('logo.png')
  .resize({ width: 512 })
  .png({
    quality: 80,
    compressionLevel: 9,
    palette: true
  })
  .toFile('logo-512.png');

结果：

  • 👀 肉眼几乎看不出差别
  • 📦 体积直接干到 7KB 以下

对，你没看错。

7KB。

一张 2000+ 像素的透明 PNG Logo，最后只有原图的零头。

sharp 到底有多火？

我本来只觉得它“好用”，直到我看了下 npm 数据：

  • sharp：周下载量 3000 万+
  • Vue：周下载量 800 万+

对比一下，sharp 的使用频率已经是“基础设施级别”了。

你可能没直接用过它，但你用过的很多工具，大概率已经在用 sharp 了。

为什么 sharp 这么快？

因为它并不是一个“从零造轮子”的库。

sharp 的底层，是一个真正的巨人 👇

libvips：站在巨人的肩膀上

libvips 是一个用 C/C++ 编写的图像处理库，核心特点只有四个字：

快 + 省内存

甚至有人评价它是：

目前最快的图像处理库之一

sharp 本质上是 libvips 的 Node.js 绑定。

而且不止 Node.js：

  • Go → bimg
  • Python → pyvips
  • Ruby / PHP / C# → 都有对应绑定

libvips 才是真正的本体。

libvips 为什么这么猛？

我也很好奇，于是顺藤摸瓜，翻到了 libvips GitHub Wiki。

然后发现：

👉 有两篇论文

标题看起来就很“学术”，内容……全是英文。

我：😵‍💫
论文：📄📄

幸好，现在是 AI 时代

于是我干了一件很符合这个时代的事：

  1. 把两篇论文下载到本地
  2. 上传到自己的 AI 知识库
  3. 对 AI 说一句：

“用人话给我讲清楚。”

AI 非常配合，开始不知疲倦地把高深的图像处理理论，
翻译成我能听懂的版本。

（中间省略一万字 🤣）

总结

  • sharp 是一个：

    • 快
    • 易用
    • 工程级稳定
    • 社区极其活跃
      的 Node.js 图像处理库

  • 简单 resize + 压缩，就能把 Logo：

    • 从 258KB → 7KB

  • 它之所以这么强，是因为底层依托 libvips

  • libvips 才是真正的“图像处理怪物”

如果你在做：

  • Web 前端
  • Node 服务
  • 图片上传 / CDN 优化
  • 构建工具 / 静态站点

👉 sharp 基本是必学选项。

参考资料

avatar
文章
阅读
粉丝