为图片文件使用 CDN 以优化图片文件

为图片文件使用 CDN 以优化图片文件

为图片文件使用 CDN 以优化图片文件

为什么要使用图像 CDN?

图像内容传递网络(CDN)在优化图像方面非常出色。切换到图像 CDN 可以节省 40-80%的图像文件大小。从理论上讲,仅使用构建脚本就可以达到相同的结果,但是在实践中很少见。

什么是图像 CDN?

图像 CDN 专门从事图像的转换,优化和交付。你也可以将它们视为用于访问和操作网站上使用的图像的 API。对于从图像 CDN 加载的图像,图像 URL 不仅指示要加载的图像,还指示大小,格式和质量等参数。这样可以轻松为不同的用例创建图像的变体。

图像 CDN 可以根据图像 URL 中的参数执行转换示例
图像 CDN 可以根据图像 URL 中的参数执行转换示例

图像 CDN 与构建时图像优化脚本的不同之处在于它们会根据需要创建图像的新版本。结果,与构建脚本相比,CDN 通常更适合于为每个单独的客户端创建大量定制的图像。

如何使用 URL 参数来优化图像

图像 CDN 所使用的图像 URL 传达了有关图像的重要信息以及应应用于图像的转换和优化。URL 格式将根据图像 CDN 有所不同,但是从高级的角度来看,它们都具有相似的功能。让我们逐步了解一些最常见的功能。

图像 URL 地址后的一些参数
图像 URL 地址后的一些参数

图像 CDN 可以位于你自己的域或图像 CDN 的域中。第三方图像 CDN 通常提供收费使用自定义域的选项。使用你自己的域使以后更容易切换图像 CDN,因为不需要更改 URL。

上面的示例使用具有个性化子域而不是自定义域的图像 CDN 的域(“example-cdn.com”)。

图像

通常可以将图像 CDN 配置为在需要时从其现有位置自动检索图像。通常通过将现有图像的完整 URL 包含在图像 CDN 生成的图像的 URL 中来实现此功能。例如,你可能会看到如下网址:https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto。该网址将检索并优化存在于的图像https://flowers.com/daisy.jpg

将图像上传到图像 CDN 的另一种广受支持的方法是通过 HTTP POST 请求将图像发送到图像 CDN 的 API。

安全密钥

安全密钥可防止其他人创建图像的新版本。如果启用了此功能,则图像的每个新版本都需要一个唯一的安全密钥。如果有人尝试更改图像 URL 的参数但未提供有效的安全密钥,则他们将无法创建新版本。你的图像 CDN 将处理为你生成和跟踪安全密钥的细节。

优化参数

图像 CDN 提供数十种(有时甚至数百种)不同的图像转换。这些转换是通过 URL 字符串指定的,同时使用多个转换没有任何限制。在网络性能方面,最重要的图像转换是尺寸,像素密度,格式和压缩。这些转换是为什么切换到图像 CDN 通常会导致图像大小显着减小的原因。

客观上,性能转换往往是最佳设置,因此某些图像 CDN 支持这些转换的 “自动” 模式。例如,你可以允许 CDN 自动选择并提供最佳格式,而不是指定将图像转换为 WebP 格式。图像 CDN 可以用来确定转换图像的最佳方法的信息包括:

  • 客户端提示(例如,视口宽度,DPR 和图像宽度)
  • 该 Save-Data头
  • 用户代理请求头
  • 该网络信息 API

图像 CDN 的类型

图像 CDN 可以分为两类:自我管理和第三方管理。

自我管理的图像 CDN

对于拥有易于维护自己的基础架构的工程人员的站点,自我管理的 CDN 可能是一个不错的选择。

Thumbor 是当今唯一可用的自我管理图像 CDN。尽管它是开源的并且可以免费使用,但是它通常比大多数商业 CDN 拥有更少的功能,并且其文档有所限制。Wikipedia,Square 和 99designs 是使用 Thumbor 的三个站点。

第三方图像 CDN

第三方图像 CDN 将图像 CDN 作为服务提供。就像云提供商免费提供服务器和其他基础架构一样;图像 CDN 提供收费的图像优化和交付。由于第三方图像 CDN 保持底层技术,因此入门非常简单,通常可以在 10 到 15 分钟内完成,尽管大型站点的完整迁移可能需要更长的时间。第三方图像 CDN 通常按使用级别定价,大多数图像 CDN 提供免费级别或免费试用,以使你有机会试用其产品。

选择图像 CDN

图像 CDN 有很多不错的选择。有些功能会比其他功能更多,但是所有这些功能都可能会帮助你在图像上保存字节,从而更快地加载页面。除了功能集之外,选择图像 CDN 时要考虑的其他因素包括成本,支持,文档说明以及安装或迁移的便利性。