Picgo的图片压缩插件compress安装历险记

SEO对图片的压缩要求很高，Ai-china是在Typora中撰写博文，在插入图片的同时，直接通过Picgo上传到github图床。但因为图片量较大，会影响网页的加载速度，进而影响到网站的SEO表现。

于是就琢磨着，能否在上传之前（或过程中）完成图片的无损压缩，这样就一劳永逸了。

好在Picgo确实支持这样的功能，有现成的插件 picgo-plugin-compress，就能利用 tinypng.com 网站的 API，实现图片的无损大幅压缩。

那就安装呗！好，问题来了。Win11下，原来功能一切正常的Picgo就是不能安装这个插件，尝试了能找到的所有安装方法（包括软件内直接安装，下载release后本地加载，npm），折腾了一整天，报错信息也五花八门。偶然发现其他插件能直接正常安装，更让Ai-china百思不得其解。

报错最多的是C:\Users\用户名\AppData\Roaming\picgo\node_modules\cwebp-bin: Command failed.再用各种方法尝试安装这个 cwebp-bin，也是怎么都安装不上。

直到发现这篇帖子：PicGo安装插件compress

感谢作者LOU，里面讲到了有效的安装方法和配置方式，真正用心（并非人云亦云）地解决问题。

Picgo插件自动压缩图片

compress用于 PicGo 的图片压缩插件,非常好用。极大的节约图床储存和服务器流量

插件地址：https://github.com/JuZiSang/picgo-plugin-compress

下面是解决Window版PicGo compress(图片压缩插件)安装失败问题。（必须科学上网）

安装步骤

安装Nodejs

安装yarn

1
2
3

npm install --global yarn 
#查看版本
yarn -v

进入node_modules文件夹（C:\Users\你的用户名\AppData\Roaming\picgo\node_modules）
把node_modules文件夹清空。注意上述路径，并非你的Picgo主程序安装的路径。
科学上网，开启全局代理

设置yarn代理：

1 2	yarn config set proxy http://127.0.0.1:10809 yarn config set https-proxy http://127.0.0.1:10809

其中10809和电脑代理设置里开的端口一致

最后输入

1	yarn add picgo-plugin-compress

成功后记得删除代理

1 2	yarn config delete proxy yarn config delete https-proxy

申请API KEY

tinypng申请API调用
图片压缩API网站：https://tinify.cn/（tinypng.com也是一样，应该是同一家公司）
填写邮箱注册后（直接进API页面填写有效邮箱，然后点击邮箱中确认邮件即完成注册），进入Account Page

创建一个Api key并保存

复制这个API KEY

PicGo配置

安装压缩插件（现在是1.4）

点击⚙图片，选择配置，然后将刚才复制的api key填写到key这里

！！！下面这个一定要打开，否则不会压缩上传的图片的！！！（点击之后才是“禁用”，点击的是“启用”）

测试上传一张照片

tinypng网站查看Account Page API统计，如果次数增加了，说明压缩成功了

值得注意的是：

上面引用的教程是在 2022 年 1 月。compress插件于 2022 年4 月发布了最后一版 1.4，然后就停更了。随着Picgo更新2.3.1，作者将PicGo底层上传库从 request 完全迁移至 axios ，所以不再支持 request，导致compress插件的 tinypng 不再可用（imagemin仍可用，image2webp不知为何不可用）。

面对这一问题，有3种解决办法：

下载前一版本（Picgo 2.3.0）的exe安装文件，将当前运行的picgo退出后直接重新安装 Picgo 2.3.0 即可正常使用（因为此版本尚对request做了兼容处理）。
自行修改源码（由github issue中的hyn-lei提供，Ai-china未做测试）：

fork github 上 picgo-plugin-compress 代码，clone 到本地后，修改两处即可。
- src\util.ts，13行修改为：
  1
  const response = await ctx.request({ method: 'GET', url, encoding: null, resolveWithFullResponse: true, responseType: 'arraybuffer' })
- src\compress\tinypng\tinypng.ts，86-93 行修改为：
  1
  2
  3
  4
  5
  6
  7
  if (options.buffer) {
  this.PicGo.log.info('TinyPng 上传本地图片')
  Object.assign(fetchOptions, {
  data: options.buffer
  })
  }
  const req = this.PicGo.request(fetchOptions)
- package.json ，修改，更新 picgo-core 的版本，“picgo”: “1.5.0”
- 执行 rpm run build，重新编译生成dist 文件夹中内容，关闭 PicGo，将生成的 dist 文件复制到 PicGo用户数据目录中的 node_modules\picgo-plugin-compress 覆盖即可。
1. 上帖末尾处有位名为liujinpen的大神直接编译了一版：
  
  地址：https://github.com/liujinpen/picgo-plugin-compress-tinypng
  
  使用方法：
  1. 安装
    已发布npm，在PicGo插件设置中搜索tinypng即可，或者下载源码本地导入PicGo。
  2. 配置
    加载插件后，启用transformer-tinypng选项
    点击配置plugin -picgo-plugin-tinypng：
    图床配置名：可以自定义；
    key：tinify官网申请的API key。
    
    还是一样的API，一样的Picgo配置方法，但有了它，就不用降级Picgo了！

进一步自动优化

除了Picgo上传时的直接压缩（tinypng的压缩和视频效果都超好）之外，还可以在远端的github添加一个机器人进行二次压缩。

ImgBot 是一个为你节省时间优化图片的机器人。优化图片意味着不牺牲图片质量和更小的文件大小。安装后不久，你会收到一个优化图片的 pull request。合并这个 pull request 就行了！Imgbot 会伴随你的工作，保持图片的优化。 ImgBot 默认使用无损压缩（采用以下3种算法）。

安装 ImgBot

首先来到 GitHub Market，点击 Set up a free trial

然后选择 Open Source (也就是免费的那个方案)，然后点击 Install it for free

检查一下订单，点击 Complete order and begin installation

确认一下 ImgBot 可以访问的仓库 (默认 All)，以及授予给 ImgBot 的权限，点击 Install

看到这个页面就说明 ImgBot 服务已经成功的安装到你的 GitHub 账户上了

使用ImgBot压缩图片

将 ImgBot 服务安装到你的 GitHub 账户上后，ImgBot 就会自动递归寻找并压缩 Git 仓库中的图片文件 (如果图片比较多，这一步可能回花费几天的时间。我的库中约有七八百张图片，下面这个结果等待了10个小时左右)，压缩好后会向你提一个像这样的 PR。

确保你选的仓库有图片，不然不会收到PR。

你可以点开 Datails 查看压缩前后大小、压缩率等细节，确认无误后，点击 Merge pull request 开始合并

再输入 commit 信息，点击 Confirm merge

设置ImgBot

ImgBot 默认是无损压缩的，可以按需进行配置为有损压缩，对文件大小进一步压榨。配置方法是在根目录下添加 .imgbotconfig 文件

目前有三个配置项：

提交 PR 的频率：
1
"schedule"
- 选项：daily | weekly | monthly
排除的文件："ignoredFiles"
- 选项：被排除文件的路径，支持通配符*
是否使用有损压缩方式 (压缩率更高)："aggressiveCompression"
- 选项：true | false

以下是较为完整的例子：

{
    "schedule": "daily", // daily|weekly|monthly
    "ignoredFiles": [
        "*.jpg",                   // ignore by extension
        "image1.png",              // ignore by filename
        "public/special_images/*", // ignore by folderpath
    ],
    "aggressiveCompression": "true" // true|false
}

还有更多配置项，完整说明请见官方文档。

Github Actions自动合并ImgBot的pr

上传图片后，很快 ImgBot 就会对图片进行压缩，并在 github 的仓库中发起一个 pull request。手动点击合并按钮对我来说实在是太麻烦了，能不能自动搞呢。有了 actions 没啥不能的，

在 github actions 配置新增一个文件 .github/workflows/merge.yml。

name: Merge Imgbot

on:
  pull_request:
    types:
      - opened
      - ready_for_review
  pull_request_review:
    types:
      - submitted
  status: {}

jobs:
  automerge:
    runs-on: ubuntu-latest
    steps:
      - name: automerge
        uses: "pascalgn/automerge-action@v0.6.1"
        env:
          GITHUB_TOKEN: "${{ secrets.GIT_MERGE_TOKEN }}"
          MERGE_LABELS: ""
          MERGE_METHOD: "squash"
          MERGE_COMMIT_MESSAGE: "pull-request-description"
          MERGE_FORKS: "false"
          MERGE_RETRIES: "2"
          MERGE_RETRY_SLEEP: "10000"
          UPDATE_METHOD: "rebase"

这个 actions 配置中用到了 pascalgn/automerge-action，简化了对于 pull request 的操作。

这里用到了 secrets 保存 github access token，和上一步配置 PicGo 用到的 token 一样，没用过的话可在账号设置Setting–>Developersettings–>Personal access tokens 生成（注意不是项目的Settings）。

将这个token填到项目Settings–>Secrets，名称为GIT_MERGE_TOKEN。

一番折腾，总算成果圆满，也祝你能够成功！

PS：
Picgo还是不太稳定，费尽波折安装好的compress插件在第二天重启电脑后无故丢失，所有其他插件也都消失不见。又按本教程从头安装一遍恢复。又碰上Typora出现激活提示，于是升级 Typora 到最新版1.8.6（试过几种Crack，法海的无痛有效），在配置过程中发现除Picgo外，又有了PicList可选。仔细查对才知道后者是前者的增强升级版，解决了很多Picgo长期以来的痛点：自带compress，图片格式转换，图床种类增加，本地相册与云端协同图片删除……

所以，小伙伴们，Ai-china已换成 PicList 使用啦