简单易用的图片压缩小工具

配图源自 Freepik

背景

对于前端开发来说，图片压缩是很常见的场景。网上各类压缩工具众多，如果对图片压缩没有很高、很精细的要求，那么 TinyPNG 是一个不错的选择。

最直接的使用方法就是：打开其官网、上传本地图片、再下载到本地。

是的，我觉着有点麻烦。如果只是偶尔、一两张图片的话还好。

本文推荐一个 CLI 工具：tinypng-cli（npm package），可省去手动上传与下载的过程，且没有最大 5MB 限制。

安装

全局安装：

$ npm i tinypng-cli -g

其 CLI 命令就是 tinypng。

使用之前，需前往 TinyPNG Developer API 申请一个 API key，在下方输入 Full name 和 Email 即可获取。

每月有 500 个「免费」的压缩次数 👍🏻（于我而言足矣）。若有需要，可以前往 TinyPNG API Dashboard 升级付费订阅。

获取到 API key 之后，我们将其写入到用户目录下的 .tinypng 文件中。

$ echo <your-api-key> > ~/.tinypng

如果不嫌麻烦，也可以不写入该文件，每次执行该命令时传入 -k 参数来指定 API key。比如：

$ tinypng /path/to/file.png -k <your-api-key>

使用

用法很简单，支持单个或多个的文件或目录，也可递归遍历子目录。如果是目录的话，会自动查找目录下的所有图片。

需要注意的是，图片压缩后会覆盖原文件。

# 1️⃣ 处理当前目录（其中 `.` 可省略）
$ tinypng .

# 2️⃣ 处理单个目录
$ tinypng /path/to/image-dir

# 3️⃣ 处理多个目录
$ tinypng /path/to/image-dir-1 /path/to/image-dir-2

# 4️⃣ 处理单个图片
$ tinypng /path/to/image.png

# 5️⃣ 处理多个图片
$ tinypng /path/to/image-1.png /path/to/image-2.png

# 6️⃣ 处理指定目录及其子目录的所有图片（指定 `-r` 参数）
$ tinypng /path/to/image-dir -r

还可以指定 --width 和 --height 参数以调整图片大小。但对我来说，这个使用场景很少。

更多请看 tinypng-cli 或 tinypng -h 查看。

$ tinypng -h
Usage
  tinypng <path>

Example
  tinypng .
  tinypng assets/img
  tinypng assets/img/test.png
  tinypng assets/img/test.jpg

Options
  -k, --key        Provide an API key
  -r, --recursive  Walk given directory recursively
  --width          Resize an image to a specified width
  --height         Resize an image to a specified height
  -v, --version    Show installed version
  -h, --help       Show help

The end.

toFrankie / blog

简单易用的图片压缩小工具 #314

背景

安装

使用