我的博客是基于Moonglade这个开源系统搭建的，由于贫穷没有用上Azure，目前是部署在腾讯云的一台服务器上运行的，数据库使用的是SQLServer Express，图片也是在本地以文件的形式存储。

▲ 寒酸的机器😂

    因为是非盈利，并且只是写写文章，我也没有动力去升级，但目前发现，一旦文章里的图片过多，如果有些地方放了.gif图片的话，文章加载完成就会很慢。

    比如上面这篇文章，总共文字字符只有3.8M，但是这个文章完全加载完成竟然耗时25.78秒，其中最耗时的地方在于加载一张2.7M的.gif动图，花了24秒。理论上来说如果只加载文字，带宽1M的话，只需要3秒就能加载完，时间全部消耗在了从服务器本地加载图片，然后传输到客户端上了。

    于是显而易见的优化就是，把图片放到云上。

图片上云

    把静态内容放到CDN上是优化站点访问速度的一个最简单粗暴的方式，CDN会根据用户所处的地理位置，将静态内容从离用户最近的节点加载。有的网站在将内容静态化之后，全部丢到CDN上，这是全站CDN。我这里只是把图片放到了CDN上，毕竟这是大头。

   一旦选择CDN，那么就需要寻找供应商，我对比了又拍云和七牛云存储。发现又拍云它提供的存储空间自带有CDN功能，七牛云的存储和CDN是分开的。另外又拍云初次注册后会赠送一个月的券，如果参加联盟活动，把logo放在站点底部，也会赠送1年的使用券，大概价值60多元吧，挺便宜，尤其是对于我这种访问量不大的站点来说。

▲ 参加了又拍云的活动，又一次出卖了我自己😂

    初次注册和参加活动之后，会收到赠送的两张券，这两张券会抵扣又拍云在使用过程中产生的费用：

▲ 由于站点访问量不大，所以基本够用

    下面讲解一下如何将站点的图片上传到又拍云上。

    首先第一步就是选择“云存储”->创建服务：

▲ 在云存储里创建一个服务，我这里起名为image-yycoding，应用场景为“网页图片”，存储类型为“标准类型”

    这里的授权操作员，默认当前的又拍云账户是可以管理的，也可以新建用户，比如可以新建一个通过ftp管理的用户，一个通过api管理的用户，这个也可以在后面管理。

    新建完成之后，可以进一步管理内容了：

     这里，可以直接点“文件管理”，往里面上传图片。

    ▲ 可以在这里简单的管理内容，后面会讲解如何通过ftp管理

添加域名和证书

    上面这个是最基础的内容，一般地，有了服务之后，我们会给它绑定一个自己的域名，有了域名之后还需要添加证书。

     域名的话我这里选择的是二级域名，比如我的站点是yycoding.xyz，那么用来浏览图片的二级域名我自然选为image.yycoding.xyz。绑定二级域名的方法在服务管理->“域名管理”里面设置。

    点击“域名绑定”，然后在里面输入二级域名，这里绑定完成之后，还要去域名供应商那里，将image.yycoding.xyz解析到这里提供的CNAME上。

▲ 到域名供应商那里，把自定义二级域名解析到CDN提供的CNAME上。

    我是在新网购买的域名，在域名管理那里，新增一条CNAME解析，这样当访问image.yycoding.xyz的时候，就能把内容指到又拍云的cdn地址了。

    完成了这一步之后，我们就可以把本地的图片比如 “https://www.yycoding.xyz/image/xxx-image.png”改为访问通过"http://image.yycoding.xyz/xxx-image.png"访问CDN上的图片了。

    最后一步就是给域名绑定证书，我的主站点绑定了免费的SSL证书，这种免费的证书不支持二级域名，所以必须给image.yycoding.xyz额外再申请一个证书，证书的申请可以去腾讯云或者其他云供应商那里申请，免费证书可以申请多个。申请完成之后，来到“功能配置”->“HTTPS”这里，点击管理，就可以在里面输入申请的证书里面的信息。

   我这里不展开了，可以参看又拍云提供的教程。

   经过这一步，可以使得对图片的访问可以从"http://image.yycoding.xyz/xxx-image.png"改为"https://image.yycoding.xyz/xxx-image.png"的方式访问了。

图片的批量上传

    上面可以通过网页上传内容，但这种方式对于大量的图片管理来说不方便。又拍云提供了FTP的方式来上传图片。我之前的站点图片都是放在服务器本地的UploadedImages文件夹下的：

▲ mooglade本地存储图片文件

     现在需要把这个文件夹下的所有不带-origin的图片上传到上面又拍云创建好的空间里。

     要通过FTP的方式上传文件，在操作之前，需要获取一下账户密码等信息，这些信息在“功能配置”->"存储管理"里设置：

     有了这些信息之后，就可以登录FTP进行管理了：

▲ FTP批量往又拍云上上传文件

   至此，将站点的所有图片上传至又拍云并管理的内容全部完成了，接下来需要在Moonglade里面设置图片CDN。

图片CDN设置

     这个步骤很简单，只需要在后台的系统设置->“图片”->“CDN”里面启动图片CDN，然后设置CND的EndPoint设置为二级域名即可。

 

▲ 在Mooglade里面设置图片CDN

    它的原理很简单，在Moonglade中，图片的存储方式都是以image标签然后source的内容为“/image/{guid}.png”的方式来存储的，当页面加载的时候，就会调用ImageController，在这里面根据图片名称，如果启动了CDN，就在图片名称前面拼接CDN地址，这会产生一次跳转。

   Moonglade的作者倾听用户呼声，在最新的代码中对这一次跳转进行了优化，思路是存储的时候还是存储"/image/{guid}.png"，但在前端页面显示内容的时候，动态的将image标签里的“/image/“替换为了CDN的Endpoint，这样，就不用进入到ImageController里面去进行处理了。

   最后需要改动的是，Moonglade后台在编辑文章上传图片的时候，要添加上传到又拍云的Provider。目前我想的是，本地依然存储图片作为备份，然后同时上传一份到又拍云上，目前要实现这一功能需要自己开发相应的功能，临时操作的话，可以在编辑的时候关闭CDN，在本地存储图片编辑，完成之后，将文件手动上传到又拍云，然后再开启CDN即可。

效果

    经过把图片上传到第三方云平台，并启动CDN之后，网页的访问速度得到了极大提升，以开头那张图片里的文章为例，优化之后，只需要3秒多，这基本上就是在当前带宽下，文章纯文本的传输速度。

    ▲ 图片上云并启用CDN之后，整篇文章的加载从25秒降为3秒

参考