password
category
网站图床
status
Published
date
Dec 6, 2025
slug
compress-image
icon
tags
热门文章
type
Post
summary
为什么要管了网站图片,图片格式的区别,图片修改,图床搭建,不同情况使用的的图片尺寸。
更新中!!!
小闻划重点
这是一套更适合小白使用的 免费图床 方案。相比传统的复杂配置,本方案利用 PicList 内置功能,实现图片 自动压缩、转 WebP 格式、加水印。非常适合个人网站/博客使用,既能提升网站加载速度,又能省去繁琐的修图时间。
前言
为什么我们需要图床?
直接把图片拖进文章会导致体积巨大、拖慢网速。为了避免手动压缩、转格式、加水印的重复劳动,我们需要一套自动化方案。
通过 PicList + Cloudflare R2,我们可以在上传瞬间自动完成所有优化。让复杂的图片处理,变成“截图 -> 粘贴”的 1 秒钟极速体验。
核心概念(小白必读)
为了防止大家听晕,我们先简单解释几个名词:
- 图床
就是一个专门存图片的地方,类似你的云相册。网站不直接存图片,而是引用图床里的图片链接。
- PicGo / PicList
PicGo 是老牌管理工具,但插件配置对新手不友好。
PicList 是 PicGo 的“魔改版”,强烈推荐小白使用。它内置了图片压缩、格式转换、水印、重命名等功能,不需要折腾插件,开箱即用。
- Cloudflare R2
这是国际大厂 Cloudflare 提供的云存储空间。
优势:送 10GB 免费空间(存几万张博客图都够了),且 流量费全免!完全能够覆盖个人博客的需求。
这套方案的“魔法”逻辑
我们的核心工作流非常简单:
PicList 处理 -> 上传至 R2 -> 网站直接调用
举个例子:
当你把一张 5MB 的高清截图拖入 PicList 时,它会根据我们预设的“魔法指令”自动完成以下动作:
- 格式转换:自动将图片转为 WebP 格式(体积更小,画质几乎不变)。
- 智能压缩:自动把图片质量压缩到 75%。
- 尺寸控制:普通文章配图自动限制宽度为 1200px。
- 版权保护:自动添加你的个人水印。
- 上传存储:处理好的图片自动飞到 Cloudflare R2 云端。
这一切都是 瞬间完成 的,你只需要复制粘贴出来的 Markdown、URL等 链接到文章里即可。
详细实战教程
要搞定这套系统,我们只需要两个步骤:云端设置 (Cloudflare) 和 本地设置 (PicList)。
第一步:Cloudflare R2 创建与设置
这是唯一稍有门槛的一步,因为 Cloudflare 需要验证支付方式(为了防止滥用),但放心,不会扣费。
你需要准备:
- 一个邮箱:推荐 Gmail,没有可以参看谷歌注册教程:【点击访问】
- 一张银行卡:Visa 或 MasterCard(招行全币种卡即可)。
1. 创建存储桶 (Bucket)
- 在左侧菜单点击 R2。
- 点击 “创建存储桶 (Create Bucket)”。
- 名称:起个名字,例如
my-blog-imgs。
- 位置:保持默认(自动)即可。
- 点击“创建”。
2. 开启公开访问 (重要)
创建好桶后,点击桶的名字进入详情页:
- 点击顶部的 “设置 (Settings)” 标签。
- 找到 “公开访问 (Public Access)” -> “自定义域 (Custom Domains)”。
- 点击“连接域”,输入你自己的二级域名,例如
img.xwsay.com。
- 按照提示去 DNS 那里点一下确认(Cloudflare 会自动帮你加解析)。
- 如果你没有域名,也可以点击“允许访问”开启 R2.dev 子域,但不推荐,因为速度慢且以后没法换。
3. 获取 API 密钥 (关键)
- 回到 R2 主界面,点击右侧的 “管理 R2 API 令牌 (Manage R2 API Tokens)”。
- 点击 “创建 API 令牌 (Create API Token)”。
- 权限 (Permissions):一定要选 “管理员读写 (Admin Read & Write)”!(选只读会导致无法上传)。
- 点击创建后,立刻复制以下三个东西保存到记事本(只显示一次):
- Access Key ID
- Secret Access Key
- Endpoint (端点)
第二步:PicList 下载与配置
1. 下载安装
- Windows 下载
.exe,Mac 下载.dmg。
2. 配置 R2 连接
打开 PicList,点击左侧 “图床设置” -> 选择 “Amazon S3” (因为 R2 兼容 S3 协议) -> 点击 “新建” 或 “编辑”。
请严格按下表填写参数:
选项 (Item) | 填写说明 (Description) | 示例 (Example) |
图床配置名 | 随便填,自己能认出来就行 | My-R2-Blog |
AccessKeyId | 刚才在 R2 后台复制的 ID | f83s... |
SecretAccessKey | 刚才在 R2 后台复制的 Secret | 8d9a... |
Bucket (桶名) | 你创建的存储桶名字 | my-blog-imgs |
Region (地区) | R2 固定填 auto | auto |
Endpoint | 注意:去掉 URL 最后的桶名! | https://<你的ID>.r2.cloudflarestorage.com |
自定义域名 | 必填! 你绑定的二级域名 | https://img.xwsay.com |
ForcePathStyle | 建议开启 | 是 (Yes) |
⚠️ 特别注意 Endpoint:R2 后台给你的 Endpoint 可能是https://xxx.r2.cloudflarestorage.com/my-blog-imgs。请务必删掉最后的/my-blog-imgs,只保留到.com结束!
点击 “确定” 并点击 “设为默认”。
第三步:让 PicList 自动干活 (核心魔法)
这一步是省时间的关键!点击 PicList 左侧的 “上传设置” -> “图片处理”。
参考我的设置作业:
- 水印 (Watermark)
- 开启:是
- 类型:文字水印 (推荐) 或 图片水印。
- 内容:
@小闻说 - 位置:右下角 (SouthEast)
- 透明度:30% (既防盗又不碍眼)
- 压缩与格式 (Compress & Format)
- 开启:是
- 输出格式:
WebP(强烈推荐!体积小画质好) - 压缩质量:
60(肉眼无损的黄金数值)
- 缩放 (Resize)
- 开启:是
- 模式:仅调整尺寸
- 宽度:
1800(适合大多数博客正文) - 进阶技巧:如果你要上传封面大图,可以在上传前临时改为 2000,或者单独创建一个配置。
总结
到这里,你的 自动化图片流水线 就搭建完成了!剩下的压缩、转码、上传、加速,统统交给 PicList 和 Cloudflare R2 在后台默默完成。
- 作者:小闻
- 链接:blog.xwsay.com/article/compress-image
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。




