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

·  阅读 2406

什么是图片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格式,一般会判断以下的条件:

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

图片CDN分类

一般分为两类:自营和第三方托管

自营CDN

对于定制自己的技术架构的开发者而言,是个不错的选择。

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

第三方图片CDN

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

如何选择图片CDN?

看自身的情况,如果不需要那些高级功能,自营的CDN就可以了,如果钱足够,选择第三方是合适的,因为你没有那么多精力去维护这个。

总结

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

参考

分类:
前端
标签: