从 Base64 到 Cloudflare R2：我如何优雅地解决 Logo 图片存储问题

前言

事情是这样的。我手头有一个品牌 Logo 的 PNG 图片，需要在网页中使用。一开始图省事，直接把图片转成了 Base64 格式嵌在 CSS 文件里。

然后我就崩溃了。

那个 Base64 字符串长得像一部中篇小说，几千个字符塞在代码里，整个文件瞬间臃肿不堪，每次编辑都要滚动半天。更要命的是，浏览器没法缓存，每次加载页面都要重新传输这段「天书」。

于是我开始寻找更好的方案。

需求清单

1. 免费的——个人项目不想花钱
2. 可绑定自有域名——URL 要用自己的，不能用 xxx.oss.com/logo.png 这种
3. 无需备案——用的是国外域名和服务器
4. 简单优雅——不想折腾半天配置

方案对比

简单调研了一圈：

方案	免费额度	绑定域名	备案	复杂度
阿里云OSS	❌ 收费	✅	✅ 需要	低
七牛云	10GB	✅	✅ 需要	低
Cloudflare R2	10GB	✅	❌ 不需要	极低
GitHub+jsDelivr	无限	需额外配置	❌ 不需要	中
ImgBB	无限	❌	❌	极低

Cloudflare R2 胜出。原因很简单：我的域名刚好就在 Cloudflare 管理，绑定域名是一键的事。

完整配置过程

第一步：开通 R2

登录 Cloudflare Dashboard → 左侧菜单点击 R2 → 点击「开始使用」。

注意

需要绑定信用卡，但只是用来防滥用。免费额度：10GB 存储 + 每月 100 万次写操作 + 1000 万次读操作。一个 Logo 图片用到关站也不会超额。

确认后点击订阅，费用显示 $0.00。

第二步：创建存储桶（Bucket）

点击「创建存储桶」，名称填 assets（随意，因为后面会用自定义域名，不会暴露这个名称），位置保持默认。

第三步：绑定自定义域名

这是最核心的一步，也是最优雅的一步。

进入刚创建的 Bucket → Settings → Custom Domains（描述写着：Expose the contents of this R2 bucket to the internet through a custom domain. Recommended for production use.）

点击「Connect Domain」，输入你想用的子域名，比如 image.greating.com，确认。

奇迹发生了：

• Cloudflare 自动为 image.greating.com 申请并配置了 SSL/TLS 证书
• 自动在 DNS 解析中添加了 CNAME 记录
• 自动开启了 CDN 加速
• Bucket 内容自动通过该域名公开访问

整个过程 不到 10 秒，不需要额外开启任何「公开访问」开关。我甚至没来得及喝口水，一切就已经就绪了。

💡 小提示

绑定自定义域名后，公开访问是自动生效的。不需要再去设置「Public Access」——那个选项是针对 R2 自带 r2.dev 域名的，和自定义域名无关。

第四步：上传 Logo 图片

点击「上传」，把 logo.png 拖进去，松手，完成。

第五步：使用

直接通过 https://image.greating.com/logo.png 访问你的图片。

最终效果

改造前（Base64 方案）

.logo {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...');
}

那个 Base64 字符串实际长度是 4600 多个字符，光这一行就占了 CSS 文件的一半。

改造后（R2 方案）

.logo {
    background-image: url('https://image.greating.com/logo.png');
}

46 个字符。清爽到想哭。

为什么说这是「优雅」的

1. 自动 TLS：不用自己折腾 Let's Encrypt，也不用操心三个月续期一次
2. 自动 DNS：不用去域名注册商手动加 CNAME 记录
3. 自动 CDN：Cloudflare 全球边缘网络自动生效
4. 零配置公开访问：绑定自定义域名后自动公开，无需额外设置
5. 零代码：不需要写任何 API 调用，不需要配置 SDK
6. 完全免费：至少对于 Logo 这种小文件来说是这样

意外收获

配置完成后发现，Cloudflare 还顺手做了这些事：

• 强制 HTTPS 跳转（不用自己写 Nginx 规则）
• HTTP/2 + HTTP/3 自动支持
• 全球边缘节点缓存（国内访问也很快）
• DDoS 防护自动生效

这些都是「买一送多」，属于那种你不需要配置就能享受的功能。

完整流程回顾

整个操作只需要四步：

开通 R2 → 创建 Bucket → 绑定自定义域名 → 上传文件 → 完成

从打开 Cloudflare 到拿到 https://image.greating.com/logo.png，实测 3 分钟 足够。

一些避坑提醒

1. Bucket 名称可以随意，因为最终用的是自定义域名，不会暴露 Bucket 名称
2. 绑定域名后等 1-2 分钟，DNS 生效需要一点点时间
3. 不需要额外设置公开访问——绑定自定义域名后自动生效，别像我之前那样到处找开关
4. 免费额度很充裕：10GB 存储 ≈ 20 万张 Logo 图片

还有什么不满足的？

说实话，这个方案对于「存储几张图片」的需求来说，几乎是完美的。

如果一定要挑刺的话：Cloudflare 的 Dashboard 稍微有点复杂，第一次用可能要花几分钟找功能入口。但考虑到它免费提供了这么多东西，这点学习成本完全可以接受。

总结

如果你满足以下条件：

• ✅ 域名在 Cloudflare 管理
• ✅ 需要存储少量静态图片/文件
• ✅ 希望绑定自己的域名
• ✅ 不想备案
• ✅ 预算为 0

直接开 Cloudflare R2 就行，别犹豫。

从 4000 多个字符的 Base64 到 46 个字符的 URL，这个迁移花了大概 3 分钟。其中 2 分钟在研究怎么开通 R2，真正操作不到 1 分钟。

这就是现代云服务的魅力：复杂的事情交给平台，简单的事情留给自己。