MyBlog-关于图床

凛ww

图床

GitHub图床

首先你要有自己的 GitHub 账号,这里不再赘述。

创建一个仓库,用来存放上传的图片,注意类型要选择public公共访问,否则无法使用,这也是GitHub图床不好的地方,任何人都可以访问你的图床并一键打包带走所有图片

然后进入个人设置的中的开发者设置,选择个人访问令牌,创建一个访问token

懒人直接访问这里

最后会得到类似ghp_Z7EBbuzoFrVavVEDovTMFoka9YC5tP0TKg4d样式的token

进入piclist,按以下规则填写:

Cloudflare图床

相关项目:https://github.com/zhuima/awesome-cloudflare

R2 是 Cloudflare 自家的对象存储服务,和其他对象存储相比,R2 不计算流量,只计算访问,因此对于大文件和小文件来说,访问一次的消耗都是一样的。

R2 免费有每月 10G 存储,100 万次 A 类操作,1000 万次 B 类操作,对于个人用户来说完全足够了

登录Cloudflare账号,点击R2对象存储,这里需要添加一个付款方式才能使用,支持信用卡或PayPal,添加完成后,点击 将R2订阅添加到我的帐户 即可。

实测支持国内银联信用卡,没有信用卡也可以用PayPal账户(可绑定普通银行卡)
只有当你使用量超过每月限额时,超额部分才会向收费。

兰空图床

Lsky Pro(也称:兰空图床),是一个基于PHP 8.0+和Laravel框架开发的云端相册程序。它允许用户上传、管理和分享图片,并提供了多种强大的功能。Lsky Pro支持多种第三方云储存服务,如AWS S3、阿里云OSS、腾讯云COS等,还提供了图片审核、水印、分享、商业化等多种功能。

兰空图床开源版(v2 版本)的最后一次重大代码提交主要集中在 2022 年至 2023 年初

  • GitHub 状态:目前 GitHub 上的开源仓库已处于 Maintenance Mode (维护模式)
  • 更新频率:目前官方基本不再更新新功能,仅偶尔针对严重的系统漏洞或 PHP 版本兼容性问题进行极小规模的补丁推送。

付费版:商业化运作,提供更强的功能和技术支持


开源版的token获取极其逆天,大多数人一进去根本不知道在说什么,网上搜的教程也极其繁琐,本文提供一个解题思路,使用Windows自带的powershell(win+x选择即可)

填写下面的内容,粘贴回车

1
2
3
4
5
6
7
8
9
$postParams = @{
email = "你的登录邮箱"
password = "你的登录密码"
}

Invoke-RestMethod -Uri "https://图床域名/api/v1/tokens" `
-Method Post `
-Headers @{"Accept"="application/json"} `
-Body $postParams

稍等片刻就会得到类似格式的内容:

status message data

-—– ——- —-

True success @{token=1|QJ9JPyLfghvjbkjlkytresxcvbuooeaq3}

如何使用?

设定主机:你的图床域名

token填写:Bearer 1|QJ9JPyLfghvjbkjlkytresxcvbuooeaq3

注意:如果显示的是token=2或者其他数字,Bearer 1要改成Bearer 2或者其他数字

如何清空token?

输入任意token,你可以在powershell中输入下面的内容来清空所有token,为啥不能删除单个?因为没有这个功能

小知识:

在数据库(如 MySQL/PostgreSQL)中,每一个表通常都有一个叫 ID 的列。

  • 自增逻辑: 当你创建第 1 个 Token 时,ID 是 1;创建第 2 个时,ID 是 2。
  • 不可逆性: 当你删除了 ID 为 1 和 2 的记录后,数据库的计数器不会重置。它会记住“上一次最大的 ID 是 2”,因此新创建的记录必然从 3 开始。
  • 目的: 这样做是为了保证 ID 的唯一性,防止旧的数据关联(比如日志文件里记录了 ID 2)错误地指向新的数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# --- 配置区 ---
$baseUrl = "你的图床域名"
$apiToken = "这里填入任意同账户Token"

# --- 执行区 ---
$headers = @{
"Authorization" = "Bearer $apiToken"
"Accept" = "application/json"
}

try {
$response = Invoke-RestMethod -Uri "$baseUrl/api/v1/tokens" -Method Delete -Headers $headers
if ($response.status) {
Write-Host "成功:当前 Token 已被清空!" -ForegroundColor Green
} else {
Write-Host "失败:$($response.message)" -ForegroundColor Red
}
} catch {
Write-Host "请求出错,请检查域名或 Token 是否正确。" -ForegroundColor Red
$_.Exception.Message
}

WEBP

WebP是一种同时提供了有损压缩与无损压缩的图片文件格式。 WebP最初在2010年9月发布,其支持库于2018年4月发布1.0版本。截至2021年5月,已有94%浏览器支持此格式。 WebP的设计目标是在减少文件容量同时,达到和JPEG、PNG、GIF格式相同的图片质量,并希望借此能够减少图片档在网络上的发送时间。

上传图片请优先考虑转换为webp再上传返回图链,或者通过 WebP Cloud 加速 (在线代理)


webp的优势

  • 极高的压缩率:在同等画质下,WebP 的体积比 JPEG 小 25%~34%,比 PNG 小 26%。这意味着同样的图片,WebP 能让你的页面加载速度提升一大截。
  • “全能型”选手
    • 支持透明度:它像 PNG 一样支持透明背景,但体积远小于 PNG。
    • 支持动图:它像 GIF 一样支持动画,但压缩效率比 GIF 高得多,且支持全彩(GIF 仅支持 256 色)。
  • SEO 友好:Google 非常看重页面加载速度。使用 WebP 能显著提升 Google PageSpeed Insights 的评分,从而间接提升搜索排名。
  • 节省带宽/流量:如果你的博客访问量很大,或者托管在按流量计费的云服务(如阿里云、腾讯云对象存储)上,WebP 能帮你省下不少真金白银。

维度 PicList 本地转换 (上传前转 WebP) WebP Cloud 加速 (在线代理)
工作原理 上传前通过本地插件(如 pic2webp)压缩,存入图床的就是 WebP 原始图床存原图(JPG/PNG),通过 WebP Cloud 中转并实时转换
原图保留 困难。上传后图床只有 WebP,想找原图得翻本地。 完美保留。图床存高清原图,访客看的是压缩后的 WebP。
灵活性 固定。一旦转换,质量、尺寸就定死了。 动态控制。可以通过 URL 参数实时加水印、改尺寸、加滤镜。
迁移成本 极低。图片直接在自己图床。 较高。依赖 WebP Cloud 服务,若停用需改回原图链接。
加载速度 取决于你图床的 CDN 速度。 通常更快,它自带边缘计算和全球 CDN 加速。

WebP Cloud 提供了一些 PicList 无法做到的动态功能:

  • 智能回源: 它能根据访客的浏览器自动决定发 WebP 还是 AVIF(比 WebP 更高效)。如果访客是用上古浏览器,它会自动回退到 JPG。
  • 即时处理: 比如你有一张 5MB 的原图,你可以在 URL 后面加个参数 ?image_process=resize,w_500,它会立即在云端帮你生成一张 500 宽的小图。
  • 保护原图: 你的图床链接可以不对外公开,只公开 WebP Cloud 提供的代理链接,有效防止原图被盗。

WebP Cloud 免费吗?

是的,它有免费额度,但有限制。

截至目前,WebP Cloud 的 Always Free 计划包含:

  • 日循环额度: 3,000 次(对于普通博客绝对够用)。(通过签到可以获取一些永久的免费额度)
  • 缓存限制: 200 MiB 缓存空间。
  • 代理数量: 最多支持 3 个代理(即关联 3 个图床/源站)。
  • 费用: $0。
  • 注意: 如果你的日流量非常大,超过 3,000 次请求后,你可以设置“回退到原图”或者“显示占位图”。

适合用 PicList 转换的情况:

  • 你对图片没有二次修改需求(不需要动态缩放)。
  • 你希望图床文件越小越好(节省存储空间)。
  • 你不想依赖第三方中间服务,追求极致的简洁。

适合用 WebP Cloud 的情况:

  • 你想在博客里保留高清原图供下载,但展示时用压缩图。
  • 你需要为不同设备(手机/电脑)提供不同尺寸的图片。
  • 你的图床本身速度一般(如放在 GitHub 或 Backblaze 上),想白嫖它的全球加速。

那如果两个我都要呢?

一. 这种方案的实际效果

如果你先用 PicList 把 PNG/JPG 转成了 WebP 上传,再用 WebP Cloud 代理,会发生以下过程:

  1. 存储阶段: 你的图床里存的是已经压缩过的 WebP(体积已经变小,省了图床流量/空间)。
  2. 回源阶段: WebP Cloud 去你的图床抓取时,抓到的是 WebP。
  3. 二次处理: WebP Cloud 会发现这已经是 WebP 了,它通常不会再次进行有损压缩(除非你设置了更低的质量参数),但它会:
    • 转化为 AVIF: 如果访客浏览器支持 AVIF(压缩率比 WebP 更高),WebP Cloud 会把你的 WebP 转成 AVIF 发给用户。
    • 全球 CDN 缓存: 利用它的边缘节点加速图片加载。

二. 这么做的优缺点

优点 ✅

  • 极致省流量: 你的图床回源给 WebP Cloud 时消耗的流量最小(因为回源的就是 WebP)。
  • 兼容性无忧: 即使你本地转的 WebP 编码有问题,WebP Cloud 也会作为“中间人”确保输出最兼容的格式。
  • 保留动态处理能力: 你依然可以通过在 URL 后面加参数(如 ?image_process=resize,w_300)来实时生成缩略图,而不需要自己手动去切图。

缺点 ❌

  • 画质潜在损耗: 虽然 WebP 是现代格式,但“本地压一次 + 云端处理一次”理论上存在极微小的画质劣化(通常肉眼不可见)。
  • 失去了“后悔药”: 如果你先转成 WebP 上传,你就彻底丢掉了原图。万一未来出现了比 WebP/AVIF 更牛的格式,你无法再从高质量原图转换过去。

三. 性能与成本对比

方案 原始图床流量 WebP Cloud 压力 终端用户体验
原图 + WebP Cloud 较高 (回源大文件) 转换压力大 (需处理大图) 极好 (自动最优格式)
WebP + WebP Cloud 极低 (回源小文件) 转换压力小 极好 (自动转 AVIF)

webp cloud的使用

首先通过 GitHub 或者谷歌授权登录 WebP Cloud 平台。

点击右下角创建代理

然后你会获得一个地址,piclist填写到自定义域名即可使用

套娃

是的,你依旧可以考虑套娃

所谓的套娃逻辑是: GitHub (存储) -> jsDelivr (CDN 分发) -> WebP Cloud (格式转换/处理)

为什么要这么做?

  1. 减轻 WebP Cloud 的回源压力:如果你直接让 WebP Cloud 去 GitHub 取图,由于 GitHub 官网在海外且有时不稳定,可能会导致 WebP Cloud 转换超时。如果让它去 jsDelivr 取图(jsDelivr 有全球缓存),WebP Cloud 获取原图的速度会极快,渲染也就更快。
  2. 双重加速:利用了 jsDelivr 的分发能力和 WebP Cloud 的压缩能力。

如何配置套娃?

在 WebP Cloud 后台创建 Proxy 时:

  • Origin URL: 填你的 jsDelivr 地址,例如: https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名/master
  • WebP Cloud 会给你一个新地址https://xxxx.webp.ee/

自动替换图链

1. 使用 Typora

Typora 完美支持 PicList,可以实现:粘贴图片即上传,或者一键转换整篇文章的图片

  • 配置步骤:

    1. 打开 Typora 的 偏好设置 (Preferences) -> 图像 (Image)
    2. 在“插入图片时…”下拉框选择 上传图片 (Upload image)
    3. 勾选 “对本地位置的图片应用上述规则”“插入时自动转义特殊字符”
    4. 上传服务选择 PicGo(app)PicGo-Core
    5. 点击“验证图片上传选项”,如果显示成功,以后直接把图粘贴进 Typora,它就会自动变成图床链接。

  • 批量转换: 如果已经写好了一篇带本地图片的文章,点击菜单栏 格式 -> 图像 -> 上传所有本地图片,它会一次性全部替换。

    (注:要完成上面的配置才行!!!否则只是把你的图片传到图床上,你还是要手动替换)


2. 使用 VS Code

VS Code 需要安装插件来对接 PicGo。

  • 推荐插件: vscode-picgoVS-MDAllInPicGo
  • 操作方式:
    • 自动上传: 安装插件后,在设置里关联你的 PicGo 配置。之后在编辑 Markdown 时,直接使用快捷键(通常是 Ctrl + Alt + U)就可以将剪贴板的图片上传并生成链接。
    • 一键转换:VS-MDAllInPicGo 这类插件支持右键点击 Markdown 文件,选择 “Upload and replace local images”,它会自动扫描文中所有本地路径并替换为图床链接。

3. 使用 Obsidian

Obsidian 用户可以使用社区插件实现自动化。

  • 推荐插件: Image Auto Upload Plugin
  • 配置步骤:
    1. 在 Obsidian 插件市场搜索并安装 Image Auto Upload Plugin
    2. 确保电脑上 PicGo 处于运行状态。
    3. 在插件设置中开启“自动上传”。
    4. 之后无论是拖拽图片还是粘贴图片进入 Obsidian,它都会通过 PicGo 上传并自动替换链接。
  • 标题: MyBlog-关于图床
  • 作者: 凛ww
  • 创建于 : 2026-01-07 12:00:00
  • 更新于 : 2026-02-01 09:31:49
  • 链接: https://lrwy.de5.net/posts/67b5d75b/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论