picgo-plugin-squeeze

简介

现有图像压缩算法可在保证图像质量基本不变的前提下，极大降低图像大小，从而减少存储占用和数据流量传输，对于使用云存储的用户极为重要。目前 PicGo 图像压缩插件大致分为本地压缩和在线压缩两类

• 本地压缩：通过本地 npm 包实现图像压缩
• 在线压缩：将图像上传至云端图像压缩 API 实现

本插件同时支持上述两种方式：本地压缩 基于 npm 包 sharp 实现，在线压缩 则提供 色彩笔 和 TinyPNG 两种方案

特性

• 支持 本地压缩 和 在线压缩

  	本地压缩	色彩笔	TinyPNG
  尺寸限制	像素数 ≤ 268402689	≤ 5MB	≤ 5MB
  数量限制	无	无	≤ 500
  免注册登陆	✔️	✔️	❌
  图片质量控制	✔️	✔️	❌
  PNG 无损压缩	✔️	✔️	❌
  图片格式转换	✔️	✔️	✔️
  JPG/JPEG	✔️	✔️	✔️
  PNG	✔️	✔️	✔️
  GIF	✔️	✔️	❌
  WebP	✔️	❌	✔️
  AVIF	✔️	❌	✔️

  [1] TinyPNG 超过 500 张图片需购买额度

• 支持 图像裁剪、缩放 和 输出格式转换，其中输出转换格式支持的图像类型如下

  	JPEG	PNG	WebP	AVIF	JXL
  本地压缩	✔️	✔️	✔️	✔️	❌
  色彩笔	✔️	✔️	✔️	✔️	❌
  TinyPNG	✔️	✔️	✔️	✔️	✔️

  [1] 色彩笔本身不具备图片格式转换功能，该功能由 sharp 实现

• 支持 PNG 无损压缩 和 图像质量控制

• 支持压缩变大时自动保留原图

• 支持 TinyPNG 添加多个 Key，额度用尽时自动切换 Api Key

• 支持 自定义压缩规则

• 支持 临时关闭压缩，无需禁用插件或重启 PicGo

处理流程

本插件处理流程可分为 裁剪、缩放、压缩和格式转换 四部分，不同压缩模式下的处理流程如下图所示

灰色模块代表 sharp 库处理，米色模块代表由色彩笔 API 处理，绿色模块代表由 TinyPNG API 处理。需要注意的是，裁剪和缩放仅在 custom 压缩模式下支持

配置

1. 在插件设置中搜索 squeeze 安装

2. 点击右下角设置 > 配置 plugin - plugin-squeeze

3. 修改相关设置，不同压缩方式支持的配置项不同，详情可参考“特性”一节

   配置项	参数范围	默认参数	备注
   压缩方式	off local secaibi tinypng custom	local	off（关闭压缩） local（本地 sharp 压缩） secaibi（色彩笔） tinypng（TinyPNG） custom（自定义压缩流程）
   图片质量	5~100	0	数字越大图像质量越好，但相应能压缩的文件体积也较少 （若不确定具体的数值请设置为 0，插件将根据具体情况决定）
   允许 png 质量下降	true/false	true	png 为无损压缩格式，若能够接受 png 图片质量的轻微下降，可设置为 true 以获得更大压缩比
   图片格式自动转换	off avif webp jpeg png jxl	off	1.off 表示仅压缩不转换格式 2.所有 GIF 均会被转换操作忽略
   快捷键切换时提醒	true/false	true	通过快捷键临时关闭压缩时是否弹出提醒
   记录 TingPNG API Key 刷新时间	true/false	true	1.当 TinyPNG 返回本月额度已用尽时，插件会记录该 key 下个月可重试时间，后续上传会优先跳过这些暂时无额度的 key 2.关闭后会清空本地记录并且每次都直接请求 TinyPNG
   在线压缩并发数	1~5	1	多图在线压缩时可同时处理的图片数量
   TinyPNG API Keys	string	*	可前往 TinyPNG 获取
   自定义压缩流程	string	ext =*=> mode = local	通过图片后缀名、大小、宽高等条件自定义压缩方式、图片质量、失败后是否继续匹配等参数，仅当压缩方式为 custom 时生效，规则模板及示例见下文

4. 点击 确定，设置完成

快捷键

部分场景下可能需要 临时关闭压缩且不想禁用插件、重启 PicGo，本插件可通过插件设置 > 压缩模式 > off 实现，也可以通过 TOGGLE_MODE 快捷键命令快速切换

• 若当前压缩方式不是 off，触发后会记录当前模式并切换为 off
• 若当前已是 off，再次触发会恢复到上一次记录的模式

通过快捷键切换默认会弹窗提醒当前压缩模式，可通过 插件设置 > 快捷键切换时提醒 控制

自定义压缩流程

规则格式为 条件 => 动作，条件和动作之间用英文逗号分隔，* 表示任意值

• => 左右两侧空格不影响解析，多条规则通过英文分号分隔

• 压缩成功后流程结束；压缩失败、缺少必要配置、超过压缩模式限制、接口报错或压缩后体积变大时，默认继续匹配后续规则，仅当显式设置 on_failed=break 时才会结束匹配并输出原图。举例如下，假设自定义 2 条规则 Rule1、Rule2

  

  • （a）中输入图像匹配 Rule1 并且压缩成功，直接输出压缩图像
  • （b）中输入图像匹配 Rule1 但压缩失败，由于 Rule1 动作中未设置 on_failed 或设置为 continue，继续匹配 Rule2 并输出压缩图像
  • （c）中输入图像匹配 Rule1 但压缩失败，由于 Rule1 动作中设置 on_failed 为 break，停止匹配并输出原始输入图像

• 若自定义规则格式错误，插件将在本次上传临时使用 本地压缩模式

支持的条件和动作如下表所示

	参数	参数范围	描述	示例
条件	ext	任意拓展名（不带 .）	图片拓展名 匹配多个拓展名时通过|分隔	ext = jpg|jpeg|png
	size	[comparer]*B/KB/MB	图片尺寸	size < 200KB
	width	[comparer]*	图片宽度（px）	width >= 1920
	height	[comparer]*	图片高度（px）	height >= 1080
动作	mode	off local secaibi tinypng	压缩模式（关闭/本地/色彩笔/TinyPNG）	mode = local
	crop	width width:height left​:top:width:height	1 个数字表示输出图像的宽度和高度 2 个数字默认 left=0, top=0	crop = 10:20:800:600
	resize	width:height[:fit]	1.width 或 height 可写 auto，根据裁剪后图像比例自动计算另一边 2.fit 支持 cover/contain/fill/inside/outside 3.禁止放大小图	resize = 1920:1080:inside
	kernel	nearest linear cubic mitchell lanczos2 lanczos3 mks2013 mks2021	缩放插值模式，仅在设置了 resize 时生效（默认 lanczos3）	kernel = lanczos3
	convert	off/avif/jpeg/jxl/png/webp	图像输出格式 任何 gif 输入都会忽略转换	convert = webp
	quality	0~100	图片质量	quality = 0
	png_lossy	true/false	允许 PNG 质量下降	png_lossy = false
	on_failed	break	压缩失败、缺少必要配置、超过在线模式限制、接口报错或压缩后体积变大时直接结束并返回原图；未配置时默认继续匹配下一条规则	on_failed = break

图像裁剪

以如下 webp 图像为例，展示图像裁剪的实际效果

	原始图像	crop=2048	crop=2048:1536	crop=1024:768:2048:1536
输出尺寸	4096×3072	2048×2048	2048×1536	2048×1536
图像

图像缩放

图像缩放包含 尺寸、缩放模式和插值模式 三个配置项

• 尺寸：缩放后图像的大小，本插件不支持图片放大
• 缩放模式：图像如何缩放至目标尺寸
• 插值模式：如何从原图中计算缩放后图像的像素值

尺寸设置必须同时指定宽度和高度，给定其中一个时另一个可使用 auto 代替，插件会自动根据原图像宽横比计算另一值。缩放模式支持如下类型

inside	contain	cover	fill	outside
在保持宽高比的前提下，把图像缩放到尽可能大，同时保证宽高都小于或等于目标尺寸	在保持宽高比的前提下，把图像包含在给定尺寸内，并在需要时用特定像素补充边缘未填充区域	保持比例并填满目标框，通常会对原图进行裁剪	不保持宽高比，强行拉伸到目标尺寸	保持宽高比，至少覆盖目标框 可能某一边超过目标尺寸，超出部分丢弃

插值模式通过 kernel 参数配置，其决定了缩放后如何计算每个点的像素值，不同插值模式的区别如下

nearest	linear	cubic	mitchell	lanczos2	lanczos3	mks2013	mks2021
最近邻 速度快但边缘易出现锯齿	双线性 速度快且比较平滑	双三次 比 linear 更平滑	比较自然，锐化没那么强	锐度比 linear/cubic 更好	细节和锐度通常最平衡	偏抗振铃属性	mks1023 变体 相较 lanczos 更加克制

建议默认选择 lanczos3

示例

例如，svg 不压缩，大小在 500KB~5MB 的 jpg/jpeg/png/webp/avif 采用 TinyPNG 压缩，其余均采用本地压缩

ext=svg=>mode=off,convert=off; ext=jpg|jpeg|png|webp|avif,size>=500KB,size<=5MB => mode=tinypng; ext=* => mode=local

宽度 ≥ 1920 或高度 ≥ 1080 的 png 使用本地压缩并允许 png 有损

ext=png,width>=1920 => mode=local,png_lossy=true; ext=png,height>=1080 => mode=local,png_lossy=true; ext=* => mode=local

将 4K 大小的 jpg 图像缩放为 1080P 大小，然后使用 TinyPNG 压缩并转换为 webp

ext=jpg,width=3840,height=2160 => mode=tinypng,resize=1920:auto:inside,kernel=lanczos3,convert=webp

jpg/jpeg 优先尝试 TinyPNG 并转换为 webp，若接口报错则继续走本地压缩

ext=jpg|jpeg => mode=tinypng,convert=webp; ext=* => mode=local

根据下文测试，笔者认为 jpg、jpeg 各个压缩模式差别不大，tinypng 对 png、webp 和 avif 的压缩效果比较显著，因此可使用如下流程

ext=svg=>mode=off,convert=off; ext=png|webp|avif,size>=300KB,size<=5MB => mode=tinypng; ext=* => mode=local

测试

jpg/jpeg

		原始图像	图像质量 = 0	图像质量 = 20	图像质量 = 60	图像质量 = 80
本地压缩	图像大小	315KB	305KB	58KB	148KB	259KB
	压缩比例	0%	3.17%	81.59%	53.02%	17.78%
	压缩图像
色彩笔	图像大小	*	247KB	57KB	147KB	257KB
	压缩比例	*	22%	83%	54%	19%
	压缩图像	*
TinyPNG	图像大小	*	235KB	*	*	*
	压缩比例	*	26%	*	*	*
	压缩图像	*		*	*	*

png

		原始图像	禁止 PNG 质量下降 图像质量 = ANY	允许 PNG 质量下降 图像质量 = 0	允许 PNG 质量下降 图像质量 = 30	允许 PNG 质量下降 图像质量 = 60	允许 PNG 质量下降 图像质量 = 90
本地压缩	图像大小	2.39MB	1.70MB	912KB	496KB	496KB	912KB
	压缩比例	0%	28.87%	62.74%	79.73%	79.73%	62.74%
	压缩图像
色彩笔	图像大小	*	2.1MB	547KB	547KB	547KB	547KB
	压缩比例	*	11%	78%	78%	78%	78%
	压缩图像	*
TinyPNG	图像大小	*	*	543KB	*	*	*
	压缩比例	*	*	78%	*	*	*
	压缩图像	*	*		*	*	*

webp

		原始图像	图像质量 = 0	图像质量 = 30	图像质量 = 60	图像质量 = 90
本地压缩	图像大小	876KB	771KB	244KB	367KB	876KB
	压缩比例	0%	12%	72%	58%	0%
	压缩图像
TinyPNG	图像大小	*	469KB	*	*	*
	压缩比例	*	47%	*	*	*
	压缩图像	*		*	*	*

gif

		原始图像	图像质量 = 0	图像质量 = 30	图像质量 = 60	图像质量 = 90
本地压缩	图像大小	2.4MB	2.4MB	1.4MB	1.5MB	2.4MB
	压缩比例	0%	0%	41%	39%	0%
	压缩图像
色彩笔	图像大小	*	2.4MB	2.4MB	2.4MB	2.4MB
	压缩比例	*	0%	0%	0%	0%
	压缩图像	*

avif

		原始图像	图像质量 = 0	图像质量 = 30	图像质量 = 60	图像质量 = 90
本地压缩	图像大小	586KB	541KB	240KB	360KB	586KB
	压缩比例	0%	8%	59%	39%	0%
	压缩图像
TinyPNG	图像大小	*	347KB	*	*	*
	压缩比例	*	41%	*	*	*
	压缩图像	*		*	*	*