smallpath Blog图片优化流水线：七牛上传+WebP自动转换，省流量只需3行配置
【免费下载链接】blog前后端分离+服务端渲染的博客系统. 基于Vue2、Koa2、MongoDB、Redis项目地址: https://gitcode.com/gh_mirrors/blog205/blog
smallpath Blog 是一款基于 Vue2 + Koa2 + MongoDB + Redis 的前后端分离、支持服务端渲染的博客系统。它的图片优化流水线让写作变得极其轻松：在后台拖拽上传图片，七牛对象存储会在上传的同时自动转换 WebP 格式并另存一份——你什么都不用管，移动端读者打开文章时流量消耗直接减半。💾
为什么博客需要 WebP 图片优化
博客图片往往占据页面体积的 70% 以上。一张 500KB 的 PNG 截图，转成 WebP 后通常只剩 100~150KB，压缩率可达 60% 以上，而肉眼几乎看不出差别。对使用 4G/5G 流量的移动端读者来说，这意味着：
- 📱 单篇文章的加载流量大幅下降
- ⚡ 首屏渲染更快，跳出率更低
- 🚀 服务器带宽压力减小，低成本托管也能轻松扛住
流水线是如何工作的：上传即转码，全程自动
smallpath Blog 的图片优化分为三步，全部在后台自动完成：
第 1 步：获取签名上传凭证。在后台 Markdown 编辑器中点击"插入图片 → 上传图片"，前端会先向后端请求/admin/qiniu接口。服务端在 server/plugins/mountingRoute/qiniu.js 中用你的 AccessKey / SecretKey 签发一个临时 upToken，并返回supportWebp标志（是否已配置转码队列）。
第 2 步：浏览器直传七牛。前端拿到 Token 后，把图片直接上传到七牛存储节点，文件自动带上日期前缀归档（如20260823/143052_screenshot.png），无需经过你自己的服务器中转，速度更快。上传逻辑见 admin/src/components/containers/Markdown.vue。
第 3 步：转码队列自动转换 WebP。这是流水线的核心——只要配置了七牛"多媒体处理队列"，上传请求就会附带imageMogr2/format/webp的持久化处理指令，并自动将结果另存到webp/前缀路径下。也就是说：你上传一张 PNG，七牛会悄悄再给你生成一张 WebP。✅
最快启用方法：3 行配置搞定
启用图片优化只需在 server/conf/config.js 中补充七牛相关字段（后台启动时会校验配置）：
// server/conf/config.js 中补充以下配置 qiniuAccessKey: '你的公钥', qiniuSecretKey: '你的私钥', qiniuBucketName: '你的存储桶名称', qiniuBucketHost: '你的外链域名', qiniuPipeline: '你的多媒体处理队列名称'👉关键点只有一个：把qiniuPipeline填成七牛控制台里的"多媒体处理队列"名称。该值非空时，WebP 自动转换才生效；留空则只保留直传功能。完整字段说明可参考 README.md 中的"七牛设置"部分，服务端实现见 server/plugins/mountingRoute/qiniu.js。
前台展示：WebP 自动降级，老浏览器也能看
图片转成 WebP 后，怎么保证不支持 WebP 的老浏览器也能正常显示？smallpath Blog 在前台做了智能降级：
- front/src/mixin/image.js 提供
getValidImageUrl方法，根据supportWebp标志决定展示 WebP 还是原图； - 文章页与列表页（front/src/components/Post.vue、front/src/components/BlogSummary.vue）会在正文中自动把
/webp/前缀替换回原图路径。
整个过程对读者完全透明：新设备看 WebP 省流量，旧设备回退原图看个清楚。🎯
效果与注意事项
| 对比项 | 未启用 WebP | 启用流水线后 |
|---|---|---|
| 单张博客图片体积 | 约 400~800KB | 约 100~200KB |
| 上传方式 | 手动传到图床 | 编辑器内拖拽即传 |
| 格式转换 | 手动转、手动替换链接 | 服务端自动完成 |
| 旧浏览器兼容 | — | 自动降级为原图 |
⚠️ 使用小贴士：
- 队列名称必须与七牛控制台完全一致，这是最容易配错的地方；
- 后台提示"获取七牛 Token 失败"时，优先检查
server/conf/config.js的密钥是否填写正确； - WebP 副本与原图共存于同一存储桶，原图随时可用，转换零风险。
只需 3 行配置，一套"上传 → 转码 → 智能展示"的完整图片优化流水线就搭好了。对于希望读者打开更快、流量花得更少的博客主来说，这是 smallpath Blog 里性价比最高的一个功能。🚀
【免费下载链接】blog前后端分离+服务端渲染的博客系统. 基于Vue2、Koa2、MongoDB、Redis项目地址: https://gitcode.com/gh_mirrors/blog205/blog
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
