webp是一种更加适合网页展示的图片格式。七牛云是直接输出webp格式的，只需要简单添加几个代码即可。可以说，使用webp也是一种SEO手段。
什么是webp格式？
WebP 是谷歌推出的适合于 Web 使用的图像格式。
首次提出的时候是在2010年，谷歌表示，webp这种格式的主要优势在于高效率。他们发现，“在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。
一开始，对于这个新的格式，很多浏览器并不支持。但是现在都已经2022年了，基本所有的浏览器都是支持的。我测试了搜狗浏览器、360极速浏览器、Edge浏览器、火狐浏览器、谷歌浏览器等，都是没有问题的。
可以得出结论：
- PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩
- 转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）
- 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题
七牛云设置webp格式输出
博主目前上传到七牛云的图片都是png的。但是七牛云支持对图片进行格式转换的。
这里如何设置转换代码是一个坑。你不要去看帮助文档，不要去看帮助文档，不要去看帮助文档！我建议直接去存储空间里设置图片样式即可。帮助文档会把你绕晕，并且设置不对，导致图片显示不正确。
这里我设置的有两个项目。分别是图像的格式，以及图片质量。图片质量我设置的是50%。这样会有点糊，但是并不影响我的博客。
通过点一点的方式，就能获得到生成的代码！
最后应用到图片上就可以了。格式举例：myexample.png?imageView2/0/format/webp/q/50。注意要这个？不要弄丢了。
由于前期没有做，我是直接在数据库进行操作的，也就是批量替换字符。当然，我建议操作之前进行备份。关于批量修改数据库的操作，百度一下有一大堆。这里我只是提醒：一定要提前备份数据库，一定要提前备份数据库。
为了以后的方便，直接在PicGo里面加入图像处理的后缀操作：
最终效果
不知道是不是心理作用，感觉网站确实要快不少。
流程图如下：
graph TD
A[开始] --> B[上传PNG图片到七牛云]
B --> C[七牛云控制台操作]
C --> D{设置图片样式}
D --> E[格式转换：format/webp]
D --> F[质量压缩：q/50]
E --> G[获取处理代码]
F --> G
G --> H[生成URL后缀：?imageView2/0/format/webp/q/50]
subgraph 新图片处理
H --> I[配置PicGo客户端]
I --> J[自动添加URL后缀到新图片]
end
subgraph 存量图片处理
H --> K[批量修改数据库]
K --> L[备份数据库]
L --> M[替换图片URL]
end
J --> N[浏览器请求图片]
M --> N
N --> O[七牛云返回WebP格式图片]
O --> P[网页加载优化]
P --> Q[结束]
classDef highlight fill:#