用静态博客已经有了一段时间。经常会修改博客的界面,更换图片;写博文会用一些图片。
但是在加载这些图片的时候,由于图片大,而且是从github上读取(网络传输速率慢),
导致在浏览博客的时候会特别不友好,一些文字加载出来了,但是一些样式和图片并没有加载出来。
所以决定首先把加载最慢的图片放到七牛上面,大大加快加载速度。
为什么要使用七牛存储
- 数据的在线托管
七牛采用全分布式系统架构以及存储技术,主要存储图片、音视频等静态文件,并对数据实行多机房互备和跨IDC修复,从而保障数据存储的安全性。 - 数据的传输加速
七牛支持上传/下载双向加速,对于单个文件的上传没有大小限制,并且支持断点续传。七牛在全国部署了500多个加速节点,用户可以选择任意的IDC就近上传下载。 - 云端数据处理
七牛提供丰富的图片处理服务,例如缩略图、图文混排、水印、自定义裁剪区域、防盗链,原图保护等。七牛还支持常见的ffmpeg音视频格式转换,视频取帧以及流媒体传输协议(HLS)。 - 免费
提供了免费CDN配额:存储空间 10GB,每月下载流量 10GB,每月 PUT/DELETE 10万次请求,每月 GET 100万次请求。月流量在10GB以下的博客基本上可以一直免费使用七牛云存储CDN服务了。
所以像本站这类的静态博客,非常适合使用七牛作为静态资源的云存储 - 方便数据移植
在使用七牛之前,本站所有的图片都是放在项目源码当中的。因为项目放在github中,所以所有的图片有对应的外链,
但是一旦项目转移到其他地方,或者更换项目,图片的外链就会对应改变,非常不便于移植。存储在七牛的话,图片的外链一直都是那一个,就不会有这种麻烦。
图片转移
登陆七牛的网站,注册一个账号,新建一个存储空间即可以上传图片,获取外链,在博客中引用。
这张图片链接就是七牛的外链,可以右键查看源看看。
七牛图片处理APi
七牛还提供很多关于图片处理的api。
- 图片裁剪
- 分辨率调整
- 图片格式转换
如果你觉得图片加载速度还是慢,在不影响体验下,可以降到分辨率,转换图片格式为webp。
原图
降低分辨率的图
根据原图转换webp格式(一些浏览器不支持)
具体加载速度可以按f12看效果。
具体api文档
七牛图片处理api