图床
# 13.图床
我们的博客难免少不了图片，图片管理是一个不小的难题。如果我们将图片全部放到我们自己的服务器上，那么带宽就基本上会被图片所占满了，这会导致网站加载很慢（特别是图片加载很慢）。
# 什么是图床
为了解决图片的问题，市面出现了很多公司，提供图床服务：就是将图片上传到他们的服务器，然后返回一个图片链接给你，这样我们就可以在博客中引用这个图片，我们自己的服务器只需返回前端 HTML 和 JS 等小文件，加载速度很快。并且，图床服务的背后使用了一些 CDN 等技术，可以使得图片的访问速度很快
我们在选择图床的时候，请慎重选择免费图床，毕竟众多免费图床网站注册条款里有禁止商用这一条，哪天关闭了图片外链或者商用，势必给用户带来很大的麻烦，比如我们博客的所有图片突然都看不到了！很多免费图床总是好景不长，因为做图床是要投入的，比如服务器、带宽、人员、技术投资、市场宣传等，完全免费了，这些小站可能自己都难存活，所以总是不能长久使用！
也有人使用 Gitee 作为图床，但 Gitee 突然加上了防盗链功能，导致很多人的博客的图片都失效了：突发，Gitee 图床废了_程序员鱼皮的博客-CSDN 博客 (opens new window)
# 图床的基本术语和常见图床
对于数字和文本类型的数据，比方说名字和电话号码相关的信息，我们通常会用数据库去存储（例如 MySQL、Oracle 等）。
但对于图片这样的文件对象，存储层不太可能再用数据库，应该改用专业的对象存储，比如亚马逊的 S3（Amazon Simple Storage Service，简单存储服务，因为是三个 S 开头的单词，所以叫 S3），或者阿里云的 OSS（Object Storage Service）。
在对象存储中，有几个概念需要了解（看不懂就算了...）：
桶：可以理解为一个现实生活中的桶，里面存放的就是文件了。可以有多个桶，例如这个桶用来存放图片当作图床用，另一个桶用来存放视频当网盘用等等……
对象：就是一个个文件对象了，这个对象包括三个部分：Key、Data、Metadata。Key： 可以理解文件名，是该对象的全局唯一标识符（UID）。Data 也就是用户数据本体。这个不用解释了。
Metadata 叫做 元数据 ，它是对象存储一个非常独特的概念。元数据有点类似数据的标签，标签的条目类型和数量是没有限制的，可以是对象的各种描述信息。
举个例子，如果对象是一张人物照片，那么元数据可以是姓名、性别、国籍、年龄、拍摄地点、拍摄时间等。
在传统的文件存储里，这类信息属于文件本身，和文件一起封装存储。而对象存储中，元数据是独立出来的，并不在数据内部封装。
元数据的好处非常明显，可以大大加快对象的排序，还有分类和查找。 目前提供图床服务的有很多：
................
对象存储这个技术，不同的云厂商有不同的英文缩写命名。例如阿里云把自家的对象存储服务叫做 OSS，华为云叫 OBS，腾讯云叫 COS，七牛叫 Kodo，百度叫 BOS，网易叫 NOS……五花八门，反正都是一个技术。
在机缘巧合之下，我用过一段时间的七牛云，因此后续也是使用的七牛云了，这里也是以七牛云为例（其他图床的使用方法是类似的）。
# 七牛云入门
先去官网 (opens new window)注册一个账号，然后去， 对象存储 (opens new window) 里，添加对象存储功能，新建空间的意思就是新建一个存储空间：
例如这里我新建了一个空间 vuepresslearn 用来当测试：
注意，新建的空间只有一个临时域名，如果要长久使用得有一个正式的域名，例如我图床的域名是 image.peterjxl.com：
然后我们点击文件：
就可以上传文件了：
然后点击选择文件，就会弹出选择文件的对话框。是否要上传覆盖按需选择
例如我上传了一张图片，上传文件后，就可以获得其访问链接：
然后访问该链接，就可以看到图片了
博主本人新建了一个 blog 目录，专门用来存放博客的图片；还创建了其他目录，用来存放其他项目的图片。是否要在空间里创建目录看自己的需求。
# 绑定域名
七牛云默认提供的测试域名是会过期的，要想长久使用，得绑定一个域名：
这里我随意输入了一个域名：
然后就能获取到一个 CNAME：
然后去到我的域名解析商控制台里（我用的是阿里云），配置这个 cname，参考 如何配置域名的 CNAME - 七牛开发者中心 (opens new window)：
这样用户访问的我图片 image.peterjxl.com/1.jpg，就会通过 CNAME 重定向到七牛云的链接上去，然后获取图片。
配置完后，DNS 生效后就可以在域名管理里看到状态是成功的：
需要注意的是，如果你的存储空间是私有的，那么图片的外链会有很多的参数；例如：
如果去掉 jpg 后面的参数，是访问不了的，这是七牛云的规则。设置成公有的，图片才不会有这么多参数：
设置完后：
# 使用 HTTPS
由于我的博客使用了 HTTPS，如果图床没有使用的话，会不安全，因此也得加上 HTTPS。
为此，我们需要先购买一个域名证书。由于我之前已经购买过证书了，因此后续有些步骤我仅仅是演示用，没有实际购买等，具体可以参考：博客图床最佳解决方案_隔壁郑同学的博客-CSDN 博客 (opens new window)，这里简单提提怎么买。
打开证书管理：七牛云 - 证书管理 (opens new window)，点击购买证书
一般来说选个最便宜即可，我们不是企业型，用不上那么贵的：
然后就可以配置 HTTPS 了：由于我之前已经购买了证书，这里就不继续往下演示了
# 图片上传工具
我的博客是基于 Markdown 的，如果我们每次上传图片都需要登录到七牛云控制台并上传，就太慢了。因此市面上出现了很多图片上传工具，能实现的效果是这样的：将图片拖拽到工具里，就能自动上传到对象存储里，并且获取图片链接，极大简化了我们的操作。
目前常见的工具有：
- PicGo (opens new window)：支持 Windows，Mac 和 Linux，基于 Electron 开发，支持多种图床上传
- iPic (opens new window)：只支持 Mac 博主使用的是 PicGo，我们先下载，然后打开配置：
Bucket 就是存储桶的意思，一般就是你新建的空间的名字
访问地址就是绑定的域名
设定存储路径：比如在存储桶里，我还分了几个目录，专门用一个 blog 目录用来存放博客的图床，如果你没有设置，可以不写存储路径 至于怎么配置，可以参考文档：配置手册 | PicGo (opens new window)。至于怎么获取 AK 和 SK（AccessKey 和 SecretKey），要去七牛云 - 密钥管理 (opens new window) 里获取，或者在右上角--密钥管理：
获取 AK 和 SK：
配置完 PicGo 后，就可以实现将图片拖拽上传到图床的效果了，方便了不少：
# Typora + PicGo
由于经常需要上传图片到图床，为了方便我们写文档，Typora（一款 Markdown 编辑器）也在 2022 年集成了 PicGo，可以实现在 Typora 里，对着图片右键，就可以上传图片
还可以批量上传：
配置方法：打开 Typora 的设置，进入图像选项卡部分：然后设置上传服务即可
更多可以参考 Typora 官方文档：Upload Images - Typora Support (opens new window) （需科学上网）
# 上传图片并修改 Markdown 文件
对于我来说，我通常是在一个思源笔记（一个支持 Markdown 语法的笔记软件）里写好文章，然后导出为 Markdown，再上传到博客的，如果博客的图片比较多，那么打开一个个然后逐个上传图片也是很麻烦的……为此博主曾打算自己写一个软件，可以一键将 Markdown 文件里的所有图片都上传到图床，并且自动修改 Markdown 文件里的图片链接，这样 Markdown 文件就可以直接发布到博客上了，非常方便。
但是在动手造轮子之前，先在 GitHub 上搜索了有没人造好了轮子，还真发现了不少… 还好没有自己动手。以下是我搜到的：
- github.com/NothingMeaning/foureggs (opens new window)：博主目前在用的，直接在 Markdown 文件上右键即可上传，并自动替换原始文件里的图片链接，非常方便。
- github.com/icexmoon/markdown-img (opens new window)：文档很详细，支持多个图床，压缩，从图床恢复等功能。
- github.com/free-free/iclouder (opens new window)：额外支持水印，有丰富的配置。
- github.com/lhui/qiniuClient (opens new window)：云存储管理客户端，仿文件夹式管理图床上的图片、支持预览、拖拽上传、文件夹上传、同步、批量导出 URL 等功能。
- gitee.com/InCerryGit/img-go (opens new window) ：将 Markdown 文件中的图片提取、加水印、压缩和上传到指定的图床，另外也支持对图片文件及文件夹处理。
如果你觉得上述的项目都不符合自己的需求，想自己写，也不难，七牛云官方文档里提供了各种编程语言上传文件的接口：直传文件_API 文档 (opens new window)
网上也有不少人自己写的：node+express 简单的实现文件上传 到 七牛云存储中 - 掘金 (opens new window)
# 防盗链和白名单
互联网并非一片净土，只有是网站就有被攻击的风险，而被攻击最直接的损失就是金钱和时间上的损失，例如图床是有流量限制的，如果一直有人盗刷，就会造成流量耗尽，图床用不了，可以参考小林 coding 的博客：我的网站第一次被攻击了 (opens new window)
为此，我开启了防盗链功能，博客里的图片只能在博客里看到，如果你复制到其他网站上，是看不到的。当然这也有缺点，就是不方便了，比如博主在本地运行博客，也是看不到图片的；并且也不方便其他人转载；
但如果实在想要在其他网站显示你的图床上的图片，可以加白名单，这样就可以显示了（注意白名单还得加上七牛云，不然在七牛云里也看不到图片，为此我还特地提了个工单咨询过 😅，就离谱）
接下来说下七牛云里如何开启防盗链和配置白名单：打开存储空间，然后进入域名管理，然后点击域名管理：
然后在访问控制里就可以配置是否开启防盗链和白名单了：
开启白名单：
# 七牛云日志下载
可以将访问的日志下载下来分析，较少用（我是用来分析防盗链的时候才用到）：
下载日志地址：https://portal.qiniu.com/cdn/log (opens new window)
或者通过 API 来下载日志，参考文档：https://developer.qiniu.com/fusion/api/1226/download-the-log (opens new window)
CDN 日志的下载方式，以及日志中字段的含义参考文档：https://developer.qiniu.com/fusion/manual/3847/cdn-log-fusion (opens new window)
# GitHub 防盗链的问题
博主曾尝试在 GitHub 上显示七牛云的图片，即使加了白名单也不行；后续经过咨询一些朋友和分析日志，GitHub 获取图片的方式可能是后台直接通过 curl 等工具获取的，因此 refer 是空的，无法通过白名单的方式获取，而 Gitee 的话则加上 Gitee.com 即可，CDN 的日志对比如下：
116.21.31.192 MISS 104 [20/Feb/2023:21:51:50 +0800] "GET https://image.peterjxl.com/TimeRecorder/TimeRecorder-summary.jpg HTTP/2.0" 200 43824 "https://gitee.com/peterjxl/TimeRecorder" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
140.82.115.62 MISS 1 [20/Feb/2023:21:04:54 +0800] "GET https://image.peterjxl.com/TimeRecorder/TimeRecorder-label.jpg HTTP/1.1" 403 351 "-" "github-camo (325d2008)"
2
3
可以看到 GitHub 的 refer 是空的，因此无法在 GitHub 上显示加了防盗链的图床图片。Gitee 没有这样的问题。
解决办法：将图片上传到 Git 项目里，然后 Markdown 文件里引用相对路径即可。
# CDN 刷新
七牛云使用了 CDN，也就是缓存，因此如果将旧的图片删除，上传一个新的图片的话，由于缓存没更新，访问的时候还是旧的图片，因此得刷新 CDN 缓存，才能看到新图片。
缓存是有时间期限的，即使不刷新，过一段时间也会自动更新（具体多久得咨询七牛云了）。
刷新方法：打开七牛云 - 刷新预取 (opens new window)，然后输入要刷新的文件路径：
直接刷新整个目录也可以，这样即使目录里的图片超过 500 个，也会全部刷新。
如果刷新后还是看到旧图片，可以尝试更换浏览器看看是否因为缓存问题。 参考：刷新预取_使用指南_CDN - 七牛开发者中心 (opens new window)
# 图片压缩
太大的图片，不仅会影响加载速度，也会使得网站流量变大。
为此，有必要在上传图片之前，先自行确认下图片的大小，我的建议是：超过 1M 的图片都压缩一次。
此外，还可以在七牛云后台看到最耗费流量的图片：CDN → 统计分析 → 日志分析 → TOP URL/IP
通过这个步骤，可以看到最耗费流量的前几个图片，然后进行压缩，重新上传，能极大地缓解网站压力，提高用户体验。
注意，上传图片后得刷新 CDN 缓存，否则还是会用到旧图片的。具体步骤：去到文件管理，搜索该图片，然后右键 → 更多 → 刷新 CDN 缓存
那么，如何压缩图片呢？这个就各显神通了。我个人用的工具是一个在线网站：tinypng.com (opens new window)，完全免费，可以批量压缩 20 张图片，最大 5MB。
该网站还提供了：
- API ，开发者可以调用它来为自己的产品提供图片压缩服务，但每月只能调用 500 次。
- Mac 的桌面端工具 TinyPNG4Mac，开源在 GitHub (opens new window)，可以压缩超过 5M 的图片。
也试过很多国内的工具，但基本都是收费的。收费也有收费的好处，功能更多，支持更大的图片。
- pdf365压缩：pdf365.cn/img-compress (opens new window)
- 福昕压缩大师：www.foxitsoftware.cn/shipinyasuo (opens new window)
- docsmall：docsmall.com/image-compress (opens new window)
- .......
对我来说，免费的够用了。
# 使用 webp / avif 格式
webp 和 avif 格式比起传统的 jpg 格式体积更小，也是目前非常主流的图片格式。
WebP 使用了更优的图像数据压缩算法，能带来更小的图片体积。例如微信文章里的很多图片都是 webp 格式，例如我随机保存一张图片：
avif 格式压缩的更厉害，体积更小。我们在访问 B 站的时候就可以看到它用的图片都是 avif 格式了：
但是这两种格式得考虑兼容性问题，读者可以去 caniuse.com (opens new window) 搜索各大浏览器的兼容情况。
感兴趣的同学可以看看这几篇博客：
- WebP 相对于 PNG、JPG 有什么优势？ | 张洪Heo (opens new window)
- 实现全站图片使用avif格式，替代臃肿的webp教程 | 张洪Heo (opens new window)
# 小结
如果遇到什么使用上的问题，可以电话咨询七牛云；如果是什么技术上的问题，可以发工单：
如果你使用 GitHub Pages 或者 Gitee Pages，那么直接使用 Git 项目作为图床也是可以的。
