使用图片 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 时要考虑的其他因素还有费用、支持、文档以及设置或迁移的难易程度。

对 Largest Contentful Paint (LCP) 的影响

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

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