Lazy loaded image
网站图床
网站免费图床
字数 1592阅读时长 4 分钟
2025-12-6
2026-4-8
password
category
网站图床
status
Published
date
Dec 6, 2025
slug
compress-image
icon
tags
热门文章
type
Post
summary
为什么要管了网站图片,图片格式的区别,图片修改,图床搭建,不同情况使用的的图片尺寸。

更新中!!!

💡
小闻划重点
这是一套更适合小白使用的 免费图床 方案。相比传统的复杂配置,本方案利用 PicList 内置功能,实现图片 自动压缩、转 WebP 格式、加水印。非常适合个人网站/博客使用,既能提升网站加载速度,又能省去繁琐的修图时间。

前言

为什么我们需要图床?

直接把图片拖进文章会导致体积巨大、拖慢网速。为了避免手动压缩、转格式、加水印的重复劳动,我们需要一套自动化方案。
通过 PicList + Cloudflare R2,我们可以在上传瞬间自动完成所有优化。让复杂的图片处理,变成“截图 -> 粘贴”的 1 秒钟极速体验。

核心概念(小白必读)

为了防止大家听晕,我们先简单解释几个名词:
  1. 图床
    1. 就是一个专门存图片的地方,类似你的云相册。网站不直接存图片,而是引用图床里的图片链接。
  1. PicGo / PicList
    1. PicGo 是老牌管理工具,但插件配置对新手不友好。 PicList 是 PicGo 的“魔改版”,强烈推荐小白使用。它内置了图片压缩、格式转换、水印、重命名等功能,不需要折腾插件,开箱即用。
  1. Cloudflare R2
    1. 这是国际大厂 Cloudflare 提供的云存储空间。
      优势:送 10GB 免费空间(存几万张博客图都够了),且 流量费全免!完全能够覆盖个人博客的需求。

这套方案的“魔法”逻辑

我们的核心工作流非常简单:
PicList 处理 -> 上传至 R2 -> 网站直接调用
举个例子:
当你把一张 5MB 的高清截图拖入 PicList 时,它会根据我们预设的“魔法指令”自动完成以下动作:
  1. 格式转换:自动将图片转为 WebP 格式(体积更小,画质几乎不变)。
  1. 智能压缩:自动把图片质量压缩到 75%。
  1. 尺寸控制:普通文章配图自动限制宽度为 1200px
  1. 版权保护:自动添加你的个人水印。
  1. 上传存储:处理好的图片自动飞到 Cloudflare R2 云端。
这一切都是 瞬间完成 的,你只需要复制粘贴出来的 Markdown、URL等 链接到文章里即可。

详细实战教程

要搞定这套系统,我们只需要两个步骤:云端设置 (Cloudflare)本地设置 (PicList)

第一步:Cloudflare R2 创建与设置

这是唯一稍有门槛的一步,因为 Cloudflare 需要验证支付方式(为了防止滥用),但放心,不会扣费
你需要准备:
  1. 一个邮箱:推荐 Gmail,没有可以参看谷歌注册教程:【点击访问
  1. 一张银行卡:Visa 或 MasterCard(招行全币种卡即可)。

1. 创建存储桶 (Bucket)

  1. 登录 Cloudflare Dashboard
  1. 在左侧菜单点击 R2
  1. 点击 “创建存储桶 (Create Bucket)”
  1. 名称:起个名字,例如 my-blog-imgs
  1. 位置:保持默认(自动)即可。
  1. 点击“创建”。

2. 开启公开访问 (重要)

创建好桶后,点击桶的名字进入详情页:
  1. 点击顶部的 “设置 (Settings)” 标签。
  1. 找到 “公开访问 (Public Access)” -> “自定义域 (Custom Domains)”
  1. 点击“连接域”,输入你自己的二级域名,例如 img.xwsay.com
  1. 按照提示去 DNS 那里点一下确认(Cloudflare 会自动帮你加解析)。
  1. 如果你没有域名,也可以点击“允许访问”开启 R2.dev 子域,但不推荐,因为速度慢且以后没法换。

3. 获取 API 密钥 (关键)

  1. 回到 R2 主界面,点击右侧的 “管理 R2 API 令牌 (Manage R2 API Tokens)”
  1. 点击 “创建 API 令牌 (Create API Token)”
  1. 权限 (Permissions):一定要选 “管理员读写 (Admin Read & Write)”!(选只读会导致无法上传)。
  1. 点击创建后,立刻复制以下三个东西保存到记事本(只显示一次):
      • 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 左侧的 “上传设置” -> “图片处理”
参考我的设置作业:
  1. 水印 (Watermark)
      • 开启:是
      • 类型:文字水印 (推荐) 或 图片水印。
      • 内容@小闻说
      • 位置:右下角 (SouthEast)
      • 透明度:30% (既防盗又不碍眼)
  1. 压缩与格式 (Compress & Format)
      • 开启:是
      • 输出格式WebP (强烈推荐!体积小画质好)
      • 压缩质量60 (肉眼无损的黄金数值)
  1. 缩放 (Resize)
      • 开启:是
      • 模式:仅调整尺寸
      • 宽度1800 (适合大多数博客正文)
      • 进阶技巧:如果你要上传封面大图,可以在上传前临时改为 2000,或者单独创建一个配置。

总结

到这里,你的 自动化图片流水线 就搭建完成了!剩下的压缩、转码、上传、加速,统统交给 PicList 和 Cloudflare R2 在后台默默完成。
上一篇
0 基础建站-更新中… …
下一篇
Namesilo|域名购买教程

评论
Loading...