前言

新建博客在写文章的时候，经常需要配图说明，而对于一个新人来讲，基本操作方式就是截图然后上传到博客里引用。
但是问题就在于一个小网站的个人服务器，基本不会有人花费较大的资金去购买大带宽的服务器(海外鸡除外)
这也就意味着国内博主的源服务器基本都是几Mbps的小带宽，俗称小水管。
这种服务器好处是价格相对实惠，但是通常一个正常的截图(这里以png,jpg举例)按分辨率不同可以达到100K-3M不等。
这就会导致一个访问者进入你的网站后，加载速度会被服务器的"小水管"拖累，导致等待加载图片的时间过于漫长影响体验！
为了解决这个问题，我开始寻找比较适合我的解决方案。

经过

首先，我想到的方案是CDN，但是由于用国外cdn属于是纯纯的加载减速，而国内的cdn都需要域名备案，我放弃了。

第二个我想到的便是用各个大厂的对象云存储来解决，这边我选择的是阿里云的OSS。
设置好后速度确实奇快，对于我这种浏览量很小的网站十分适用！但是缺点也十分致命：
1.价格稍贵，平常白天的公网费用是0.5元/G。这时有可能有人会说，这个价格浏览量小的话并不贵啊！但是衍生出来就是：
2.一旦有小白“学徒”拿你的网站来练手，甚至直接恶意刷你的流量，费用是只高不下！
这里又会有人问：设置防盗链不就好了？
但是问题就在于，防盗链的设置并不能做到万无一失，依旧可以通过技术手段来伪造referer获取你的文件(这里不细讲)。
这样一来你的头上每天都像悬着一把快刀，不知道什么时候就会落到自己的头上，造成高额的费用。
且目前各大厂均举着保证服务的大旗，即便你想通过少充钱来及时止损也是不可行的，因为欠费后仍会“被”保证服务24h。
更恶心的是，阿里云的oss并没有(其他厂不知)流量限额或者其他能有效及时停止服务的设置选项！
如果你用的是某云的对象存储，由于收费机制的缘故，你甚至可能一觉醒来送出一套房(的费用)。
虽然我对做出这种行为的人或群体本身表示强烈的不屑和鄙视，但小人常在，我们只能通过别的方法来解决这个问题。

既然对象存储和CDN均不适用，我还能想到的就两种方案了：
第一是将图片放到其他图床网站来分散风险。
第二是通过减小图片本身的大小来达到缓解网站贷款压力/价款网站加载速度的目的。

虽然图床对大部分人来说是很不错的折中方案，但是依旧有着图床跑路、不稳定、要会员等问题，且不方便个人管理。
所以在暂时没有找到可以满足我需求并且好用稳定的图床之前，我选择了后者，通过缩小图片大小的方式来试图解决问题~

压缩方案

常见的常规图片格式基本就是jpg(jpeg)、png、bmp等(动图暂时不在该片文章范畴)。
但这些图片想压缩到很小的大小比较困难，且通常有大量的图片信息损失。所以推荐另一种图片的格式:WEBP

WEBP

Webp 是由谷歌在 2010 年 9 月发布的一种用于 web 端支持有损和无损压缩的图片格式（同时也支持动态图片和透明度），设计这种图片格式的目的主要是为了创建出相对于 jpg, png 和 gif 更小或画质更好的图片。

以上是简书对WEBP格式的简介

格式名一看便知，是一种针对网页出现的格式，它相较于其他格式在体积更小的同时，也保证了图片的质量！
当下该格式在国内已有75%左右的浏览器支持，基本上主流浏览器均支持该格式。
且本人认为该格式应该是一种趋势，会在今后的网站中更为常见~

首先以一张风景图为例，来看以下效果~(左边为原图，右边为压缩后的Webp)
该图为原图(放在了图床网站)，你能明显看出左右的区别么？
范例

当然看到这里肯定有部分人不服，觉得再怎么说也是通过压缩画质来达到目的的，其他格式也能做到。
所以我们这边使用Lossless(无损压缩)模式来对图片进行处理。该图为原图(放在了图床网站)
范例2
这里可以看到，对该图片进行无损压缩后，体积缩小幅度达到82%！
由以上两张张图片可以看到，Webg格式面对不同的图片，均有很不错的压缩效果！

但是无损压缩这个选项并不适合所有类型的图片，部分风景图(斯认为是由于色彩信息较为丰富)使用无损会有反效果~
比如以下这张图，使用无损压缩后，文件体积反而大出去500%。这时，有损压缩反而更好用，找到合适的质量百分比即可~
该图为原图(放在了图床网站)
范例3

至此，我认为大家心中都有了自己的判断。
如果您认为该格式确实对您的网站或其他项目有一定帮助，接下来我将以下转换方式以及一些规律~

教程

此处内容需要评论回复后（审核通过）方可阅读。

最后

博主初次在博客加载速度上面下功夫，暂时的成效对自己而言还是比较满意的~
但是由于地区不同，可能体验也不尽相同，所以如果参观的大佬若有更好的优化博客速度的建议欢迎在评论区指出！~

End

本文标题：优化博客加载速度——图片压缩

本文链接：https://www.mchsfc.com/103.html

除非另有说明，本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。

声明：转载请注明文章来源。

最后修改：2022 年 04 月 19 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏