【图床】Picgo/Piclist图片上传之前转webp（pic2webp插件）

本文介绍了picgo、piclist的图片上传之前转webp的pic2webp插件，webp格式的压缩率优于截图常用的png格式，能降低站点图床运行压力，同时提升博客内图片加载体验。

1. 说明

慕雪在编写博客的时候，都是使用snipaste软件截图并粘贴在obsidain、typora中，粘贴过程中会自动使用picgo（目前使用的是piclist，二者功能基本一致）将图片上传至图床，并返回markdown格式的图片链接。

不过，诸如snipaste截图软件，返回的截图基本都是PNG格式的，在压缩率上并不是特别理想。将PNG格式转成webp格式，至少能减少图片30%的体积，同时图片的质量没有明显变化。

2. 安装pic2webp插件

插件开源地址：https://github.com/lemonsuo/picgo-plugin-pic2webp

在piclist的插件列表中搜索webp，安装pic2webp插件。安装了之后，无序任何配置，只要启用插件，所有经过piclist上传的图片，在上传之前都会转成webp格式。

2.1. 遇到的问题

既然那么无脑，为啥还要编写本文呢？那是因为我在安装插件的时候遇到了问题：无法安装插件，提示Please verify that the package.json has a valid “main” entry；

ERROR日志如下所示，picgo和piclist的插件其实都是使用npm安装的，在下面的报错中，提到了package.json的main entry可能无效，其实就是文件不存在。在插件源码中能找到package.json，其中main的定义为"main": "dist/index.js"，这里的问题就在于node_modules目录下的插件里面没有dist/index.js文件，导致插件安装失败。

2025-04-09 08:59:53 [PicList ERROR] 
------Error Stack Begin------
Error: Cannot find module '~/Library/Application Support/piclist/node_modules/picgo-plugin-pic2webp/dist/index.js'. Please verify that the package.json has a valid "main" entry
    at tryPackage (node:internal/modules/cjs/loader:371:19)
    at Module._findPath (node:internal/modules/cjs/loader:584:18)
    at Module._resolveFilename (node:internal/modules/cjs/loader:949:27)
    at n._resolveFilename (node:electron/js2c/browser_init:2:109827)
    at Module._load (node:internal/modules/cjs/loader:811:27)
    at f._load (node:electron/js2c/asar_bundle:2:13377)
    at Module.require (node:internal/modules/cjs/loader:1035:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Bt.getPlugin (/Applications/PicList.app/Contents/Resources/app.asar/node_modules/piclist/dist/index.cjs.js:1:38151)
    at Bt.registerPlugin (/Applications/PicList.app/Contents/Resources/app.asar/node_modules/piclist/dist/index.cjs.js:1:37274)
-------Error Stack End-------

既然直接通过GUI安装插件失败了，那就尝试一下手动安装，所以编写了本文，记录手动安装的步骤。

2.2. 本地手动安装

在github下载仓库zip压缩包，然后解压到本地某一个目录中（确保该目录不要变动也不要删除，否则插件也会失效），进入目录中，执行npm install和npm run build命令，构建插件。构建完毕之后，就会有dist/index.js文件了。

慕雪使用的是npm 10.8.2，构建插件的时候没有遇到任何报错，一切顺利。

~/data/code/other/picgo-plugin-pic2webp-1.0.0                                9s
❯ npm run build

> picgo-plugin-pic2webp@1.0.0 build
> tsc -p .


~/data/code/other/picgo-plugin-pic2webp-1.0.0                                  
❯ ls
License           logo.ico          package.json
README.md         node_modules      src
dist              package-lock.json tsconfig.json

然后，再在piclist的插件列表中，点击这个下箭头按钮，选择本地目录，安装插件即可。