使用图片 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 提供数十种（在某些情况下甚至数百种）不同的图片转换。这些转换在网址字符串中指定，同时使用多个转换不受限制。对于网站性能，最重要的图片转换是尺寸、像素密度、格式和压缩。正是由于这些转换，改用图片 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 图片元素使用 "high" 的 fetchpriority 属性值，以便浏览器可以尽快开始加载该图片。
  • 如果某张图片在初始 HTML 中无法立即发现，请考虑为 LCP 候选图片使用 rel=preload 提示，以便浏览器可以提前加载该图片。
  • 如果您无法通过源进行代理，并且浏览器在页面加载后期才知道要加载哪张图片，请尽早设置与跨源图片 CDN 的连接，以缩短潜在 LCP 候选图片的资源加载阶段。