页面加载性能之使用图片CDN

什么是图片CDN？

与传统CDN的区别在于，它是专门为图片作优化的，一般包含缩放、格式转换等。你能够把它当作是一个API，经过传入尺寸、质量、格式等参数，获取到对应的图片内容。这也使得咱们在使用上很是方便，适用于多种不一样的场景。

图片CDN不一样于构建脚本，它不须要提早建立出多种不一样格式的图片。和构建脚本相比，图片CDN更适合大量的图片场景，而非固定数量的图片，好比你的站点是为摄影爱好者服务，用户上传的图片，就可使用图片CDN了。

图片CDN的通用URL格式

不一样的图片CDN会有不一样的URL格式，但其基本功能基本一致，大体能够用下图来描述：

源（Origin）

图片CDN能够用你本身的域名，固然通常也会提供免费的通用域名。最好仍是使用本身的域名，这样从此若是要更换CDN服务商，也不用去修改URL地址了。

图片名（Image）

一般也会使用完整的URL地址做为图片名称，如：https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto，这个URL地址会去获取并优化原地址的图片 https://flowers.com/daisy.jpg。

固然你也能够经过调用API直接将图片上传到CDN服务器。

安全码（Security key）

主要为了防止恶意用户任意修改参数，保证连接的惟一性。图片CDN也会帮你去跟踪这些恶意用户。

转换（Transformations）

图片CDN会提供十种、甚至百种不一样的图片转换方式，这些转换条件都定义在URL的GET参数里，多种方式同时使用也是能够的。通用的有大小、尺寸、格式和压缩比。

有些图片CDN会提供自动模式，能够自动选择最优的转换，好比这个浏览器支持WebP，则自动转换成WebP格式，通常会判断如下的条件：

• 客户端指标（viewport宽度、DPR、图片宽）
• Save-Data 请求头
• User-Agent 请求头
• Network Information API

若是你的网络不是很流畅，图片CDN会自动调整返回的图片大小。

图片CDN分类

通常分为两类：自营和第三方托管

自营CDN

对于定制本身的技术架构的开发者而言，是个不错的选择。

Thumbor 是目前惟一一个自营的图片CDN，开源并且免费，但功能相比于一些商业化的图片CDN要少一些，文档也有限。 Wikipedia、Square 和 99designs这三个网站目前使用的是 Thumbor。详细安装过程能够参考：https://web.dev/install-thumbor 。

第三方图片CDN

通常都是云服务，收费，但功能强大，这些也都是商业机密，非开源，对接也很方便。通常都是明码标价，也会提供免费试用。

如何选择图片CDN？

看自身的状况，若是不须要那些高级功能，自营的CDN就能够了，若是钱足够，选择第三方是合适的，由于你没有那么多精力去维护这个。

总结

图片CDN功能强大，能够帮咱们更好的管理图片和展现，相比于构建脚本，它能够服务于用户上传的图片，适用于后台对图片的管理。对开发者而言，存储成本、带宽成本都能节省一大笔。对用户而言，体验也是定制化的，很是不错的性能提高。

参考

• https://web.dev/image-cdns/
• https://developer.mozilla.org...
• https://developer.mozilla.org...