本文翻译自:https://web.dev/image-cdns
作者:Katie Hempenius
图片内容分发网络(CDNs)在优化图片方面有着出色的表现。切换到一个图片 CDN 上可以在图片文件大小方面降低 40% - 80% 。理论上,可以只使用构建脚本(build scripts)达到相同的作用,但是这在实践中很少使用。
什么是图片 CDN?
图片 CDN 专注于图片的转化、优化和传输。你可以将它们认为是用于访问和操作网站上图片的 API。对于从图片 CDN 加载出来的图片,一个图片 URL不仅代加载哪个图片,也代表了图片大小、格式和质量,这样就可以轻松地为不同的使用场景创造不同的图像。
图像 CDN 可以基于图像URL中的参数来执行转化。
构建时图像优化脚本(build-time image optimization scripts )在需要时会创建新版本的图片;因此,在如今个人客户端高度定制化、差异化的场景下,图片 CDN通常会表现的更好。
图片 CDN 使用的图片 URLs 中包含图片的转化、优化重要的信息。不同的图片 CDN 的URL 格式可能也会不一样,但是也大同小异。我们来看一下他们最常见的特点。
图片 CDN 可以使用你自己域名或直接适用图片 CDN 的域名。第三方的图片 CDNs 通常提供使用自定义域名的选项,但是通常需要付费。使用自己的域名可以让后续转化图片更加方便,因为不需要更改 URL。
在上面使用图片 CDN域名("example-cdn.com") 的例子中,我们使用了个人的二级域名,而不是直接自定义域名。
图片 CDN 通常可以配置自动从已经存在的地址上获取图片。这个能力通常通过需要将已经存在完整图片的 URL 包含在在由图片 CDN生成的 URL中。例如,你可以看到一个长得像这样的 URL :https://my-site.example-cdn.com/<https://flowers.com/daisy.jpg/quality=auto
>. 这个 URL 通常会获取和优化存在于https://flowers.com/daisy.jpg
的图片。
另一种广泛支持的将图像上传到图像CDN的方法是,通过HTTP POST请求将它们发送到图像CDN的API。
安全密钥可以防止其他人使用你的图片创建新版本。如果启用该功能,每一个图片都需要一个唯一的安全密钥。如果没有提供可用的安全密钥,其他人是无法通过改变图片 URL 来创建新的图片版本;图片 CDN 将负责处理生成和跟踪安全密钥的细节问题。
图像CDN提供上百种不同的图像变换, 这些转换是通过 URL 字符串指定的,并且不限制同时使用多个转换。 在考虑 Web 性能的时候,最重要的图像转换是大小、像素密度、格式和压缩。 由于有了这些转化,所以切换到图像 CDN 以后通常通常会明显降低图片文件大小。
由于通常会有最佳的性能转化设置,所以一些图片CDN会支持“自动”模式。例如,您可以允许 CDN 自动选择自动选择提供最佳格式,而不是制定将图像转化为 WebP 格式。以下的信息会帮助图片 CDN 选择图片的最佳转化方式:
- 客户端特点(例如,视口宽度,DPR和图像宽度)
- User Agent 请求标头
- 网络信息API
例如,对于 Edge 浏览器,图片 CDN 会提供 JPEG XR 格式;对于Chrome浏览器,图片CDN 会提供 WebP 格式;而对于非常旧的浏览器会提供JPEG 格式。由于图片CDN在优化图片方面有着很强的优势和经验积累,所以自动设置很受欢迎,你无需为了适应最新的技术而改变你代码。
图片 CDN 的种类
图像CDN可以分为两类:自我管理和第三方管理。
对于那些能够轻松维护自己的基础架构的工程人员而言,自我管理的CDN可能是一个不错的选择。
Thumbor 是目前唯一各一个可用的自我管理的图片CDN。虽然它是开源的并且可以免费使用,但它通常比大多数商业CDN的功能更少,并且其文档有限。 Wikipedia, Square, 和 99designs,如果想使用 Thumbor,可以参阅 How to install the Thumbor image CDN
第三方图像CDN以服务的形式提供图像服务。 正如云提供商提供服务器和其他基础设施并且收取一定费用,图像CDN提供图像优化和传输,并且收取服务费用。 由于第三方映像CDN维护了底层技术,因此入门非常简单,通常可以在10-15分钟内完成,大型站点的完整迁移可能需要更长时间。
第三方图像CDN通常根据使用级别定价,大多数图像 CDN 提供免费套餐或免费试用,以便您有机会试用他们的产品。 众所周知的第三方图像 CDN 的示例包括Akamai图像管理器,Cloudinary和imgix。
图片 CDN 有很多选择,有的功能多一些,有的功能少一些,但所有功能都可能会帮助您节省图片流量,从而加快页面加载速度。 除功能之外,选择图像CDN时需要考虑的其他因素包括成本、技术支持、文档以及易于设置或迁移。
在做出决定之前,自己也应该试用一些。 您可以在下面找到有关如何快速开始使用多个图像CDN的说明的代码。