页面加载性能之使用图片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/en-US/docs/Web/API/Network_Information_API
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data