使用图片 CDN 优化图片

Jeremy Wagner
Katie Hempenius
Katie Hempenius
X
Barry Pollard

图片内容分发网络 (CDN) 非常擅长针对 Web 优化图片。将网站切换到图片 CDN 可节省 40-80% 的图片文件大小，并且在大多数情况下，它们比构建时图片优化脚本更好地优化图片。

什么是图片 CDN？

图片 CDN 专门用于转换、优化和传送图片。您也可以将其视为用于访问和处理网站上所用图片的 API。对于从图片 CDN 加载的图片，图片网址不仅会指明要加载的图片，还会指明尺寸、格式和质量等参数。 这样，您就可以针对不同的应用场景创建图片的变体。

显示图片 CDN 与客户端之间的请求/响应流。尺寸和格式等参数用于请求同一图片的不同变体。
图片 CDN 可根据图片网址中的参数执行的转换示例。

图片 CDN 与构建时图片优化脚本的不同之处在于，它们会根据需要创建新版本的图片。因此，与构建脚本相比，CDN 通常更适合创建针对个别客户端进行高度自定义的映像。

图片 CDN 如何使用网址来指明优化选项

图片 CDN 使用的图片网址会传达有关图片的重要信息，以及应应用于该图片的转换和优化。网址格式因您使用的图片 CDN 而异，但从宏观角度来看，它们都具有类似的功能。下面是一些最常见的功能。

图片网址通常由以下部分组成：源、图片、安全密钥和转换。
图片 CDN 中图片网址的基本组成部分。

来源

图片 CDN 可以位于您自己的网域或图片 CDN 的网域中。第三方图片 CDN 通常会提供付费使用自定义域名的选项。使用您自己的网域可以更轻松地在以后切换图片 CDN，因为无需更改网址。

上述示例使用的是图片 CDN 的网域（“example-cdn.com”）和个性化子网域，而不是自定义网域。

映像

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

请求的文件格式（示例中为 JPG）可能与返回的图片文件格式（示例中为 WebP）不同。content-type HTTP 标头会告知浏览器网址采用哪种格式，以便浏览器可以适当地处理网址。如果文件保存到磁盘并由另一个程序使用，而该程序要求格式与文件扩展名匹配，则可能会导致混淆。

另一种广泛支持的图片 CDN 上传方式是在 HTTP POST 请求中将图片发送到图片 CDN 的 API。

安全密钥

安全密钥可防止他人创建新版本的映像。 启用此功能后，映像的每个新版本都需要一个唯一的安全密钥。

如果有人尝试更改图片网址的参数，但未提供有效的安全密钥，则无法创建新版本。图片 CDN 会为您处理生成和跟踪安全密钥的细节。

转换

图片 CDN 提供数十种（在某些情况下为数百种）不同的图片转换。这些转换在网址字符串中指定，并且可以同时使用多个转换，没有任何限制。对于 Web 性能，最重要的图片转换是大小、像素密度、格式和压缩。这些转换就是改用图片 CDN 通常会使网站图片文件变小的原因。

由于通常存在客观上最佳的性能转换设置，因此一些图片 CDN 支持这些转换的“自动”模式。例如，您可以让 CDN 自动选择并提供最佳格式，而不是指定将图片转换为 WebP 格式。图片 CDN 可以使用以下信号等来确定转换图片的最佳方式：

例如，图片 CDN 可能会向 Chrome 浏览器提供 AVIF，向 Edge 浏览器提供 WebP，向非常旧的浏览器提供 JPEG。自动设置很受欢迎，因为它们让您能够利用图片 CDN 在优化图片方面的专业知识，而无需在图片 CDN 开始支持新技术时更改代码以采用这些技术。

图片 CDN 的类型

图片 CDN 主要分为两大类：自行管理的 CDN 和第三方管理的 CDN。

自行管理的图片 CDN

对于拥有能够轻松维护自己的基础设施的工程人员的网站，自行管理的 CDN 是一个不错的选择。

第三方图片 CDN

第三方图片 CDN 以服务的形式提供图片 CDN。就像云服务提供商提供服务器和其他基础设施需要收费一样，图片 CDN 提供图片优化和传送服务也需要收费。由于第三方图片 CDN 维护底层技术，因此您通常可以很快开始使用，但大型网站的完整迁移可能需要更长时间。第三方图片 CDN 通常根据使用层级定价，大多数图片 CDN 都提供免费层级或免费试用，以便您试用其产品。

选择图片 CDN

图片 CDN 有许多不错的选择。有些工具的功能比其他工具多，但它们都可以帮助您节省图片字节，从而加快网页加载速度。除了功能集之外，选择图片 CDN 时要考虑的其他因素还包括费用、支持、文档以及设置或迁移的难易程度。

对 Largest Contentful Paint (LCP) 的影响

图片是许多网站用户体验的重要组成部分，因此也是网站 Largest Contentful Paint 的重要因素。如果您决定使用图片 CDN，请注意以下几点：

  • 从 CDN 传送的图片可能来自跨域服务器，这可能会增加网站的连接设置时间。尽可能尝试使用通过主源代理的图片 CDN，这样您就不会添加额外的源供浏览器连接。这与在主源上自行托管图片的效果相同。
  • 考虑在 LCP 图片元素上使用 fetchpriority 属性值 "high"，以便浏览器可以尽快开始加载该图片。
  • 如果图片无法在初始 HTML 中立即被发现，请考虑为 LCP 候选图片使用 rel=preload 提示，以便浏览器可以提前加载该图片。
  • 如果您无法通过源站进行代理，并且浏览器在网页加载后期才能知道要加载哪张图片，请尽早设置与跨域图片 CDN 的连接，以缩短潜在 LCP 候选图片的资源加载阶段。