七牛静态资源存储

用静态博客已经有了一段时间。经常会修改博客的界面,更换图片;写博文会用一些图片。
但是在加载这些图片的时候,由于图片大,而且是从github上读取(网络传输速率慢),
导致在浏览博客的时候会特别不友好,一些文字加载出来了,但是一些样式和图片并没有加载出来。
所以决定首先把加载最慢的图片放到七牛上面,大大加快加载速度。

为什么要使用七牛存储

  • 数据的在线托管
    七牛采用全分布式系统架构以及存储技术,主要存储图片、音视频等静态文件,并对数据实行多机房互备和跨IDC修复,从而保障数据存储的安全性。
  • 数据的传输加速
    七牛支持上传/下载双向加速,对于单个文件的上传没有大小限制,并且支持断点续传。七牛在全国部署了500多个加速节点,用户可以选择任意的IDC就近上传下载。
  • 云端数据处理
    七牛提供丰富的图片处理服务,例如缩略图、图文混排、水印、自定义裁剪区域、防盗链,原图保护等。七牛还支持常见的ffmpeg音视频格式转换,视频取帧以及流媒体传输协议(HLS)。
  • 免费
    提供了免费CDN配额:存储空间 10GB,每月下载流量 10GB,每月 PUT/DELETE 10万次请求,每月 GET 100万次请求。月流量在10GB以下的博客基本上可以一直免费使用七牛云存储CDN服务了。
    所以像本站这类的静态博客,非常适合使用七牛作为静态资源的云存储
  • 方便数据移植
    在使用七牛之前,本站所有的图片都是放在项目源码当中的。因为项目放在github中,所以所有的图片有对应的外链,
    但是一旦项目转移到其他地方,或者更换项目,图片的外链就会对应改变,非常不便于移植。存储在七牛的话,图片的外链一直都是那一个,就不会有这种麻烦。

图片转移

登陆七牛的网站,注册一个账号,新建一个存储空间即可以上传图片,获取外链,在博客中引用。
七牛存储
这张图片链接就是七牛的外链,可以右键查看源看看。


七牛图片处理APi

七牛还提供很多关于图片处理的api。

  • 图片裁剪
  • 分辨率调整
  • 图片格式转换

如果你觉得图片加载速度还是慢,在不影响体验下,可以降到分辨率,转换图片格式为webp。
原图
原图

降低分辨率的图
降低分辨率的图

根据原图转换webp格式(一些浏览器不支持)
webp图

具体加载速度可以按f12看效果。

具体api文档
七牛图片处理api

听说你想请我喝下午茶?~