当前位置：首页 > news >正文

smallpath Blog图片优化流水线：七牛上传+WebP自动转换，省流量只需3行配置

news 2026/8/24 8:25:51

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
上传方式	手动传到图床	编辑器内拖拽即传
格式转换	手动转、手动替换链接	服务端自动完成
旧浏览器兼容	—	自动降级为原图