使用图片 CDN 优化图片

为什么要使用图片 CDN?

图片内容分发网络 (CDN) 在优化图片方面效果出众。改用图片 CDN 后,图片文件大小可节省 40–80%。从理论上讲,仅使用构建脚本也可以实现相同的结果,但在实践中很少见。

什么是图片 CDN?

图片 CDN 专精于图片的转换、优化和分发。您也可以将它们视为用于访问和操控网站上使用的图片的 API。对于从图片 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 中的图片。

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

安全密钥

安全密钥可防止他人创建您映像的新版本。如果启用了此功能,映像的每个新版本都需要唯一的安全密钥。如果有人尝试更改图片网址的参数,但没有提供有效的安全密钥,那么他们将无法创建新版本。您的映像 CDN 将负责为您生成和跟踪安全密钥的相关细节。

转换

图片 CDN 提供数十种(在某些情况下为数百种)不同的图片转换效果。这些转换通过网址字符串指定,同时使用多个转换不受限制。在网页性能的背景下,最重要的图像转换是大小、像素密度、格式和压缩。这些转换就是切换到图片 CDN 通常会使图片大小显著减小的原因所在。

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

例如,图片 CDN 可能会向 Chrome 浏览器提供 AVIF,向 Edge 浏览器提供 WebP,并向非常旧的浏览器提供 JPEG。自动设置非常受欢迎,因为设置此类设置后,您无需更改代码即可利用图片 CDN 在图片优化方面积累的深厚专业知识,以便在图片 CDN 支持新技术后采用新技术。

图片 CDN 的类型

图片 CDN 可分为两类:自行管理和第三方管理的。

自行管理的图片 CDN

对于拥有愿意维护自身基础架构的工程人员的网站来说,自行管理的 CDN 是一个不错的选择。

第三方图片 CDN

第三方图片 CDN 以服务的形式提供图片 CDN。就像云服务提供商提供服务器和其他基础架构是收费的一样;图片 CDN 提供图片优化和传送服务(收费)。由于第三方图片 CDN 维护着底层技术,因此入门非常简单,通常可在 10-15 分钟内完成,但对大型网站进行完整迁移可能需要更长的时间。第三方图片 CDN 的价格通常基于使用层级,大多数图片 CDN 都提供免费层级或免费试用,让您有机会试用其产品。

选择图片 CDN

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

不妨在做决定前先亲自尝试,这样做也会有所帮助。您可以在下方找到 Codelab,其中介绍了如何快速开始使用多个图片 CDN。

对 Largest Contentful Paint (LCP) 的影响

图片是许多网站上的用户体验的重要组成部分,因此会影响网站在使用 Largest Contentful Paint 时的表现。如果您决定使用图片 CDN,请注意以下几点:

  1. 通过 CDN 提供的图片可能来自跨源服务器,这需要额外的连接设置时间。请尽可能尝试使用通过主源进行代理的图片 CDN,这样就不会添加额外的浏览器连接源。这与在主源上托管图片的效果相同。
  2. 请考虑对 LCP 图片元素使用 fetchpriority 属性值 "high",以便浏览器可以尽快开始加载该图片。
  3. 如果某张图片无法在初始 HTML 中立即发现,请考虑为 LCP 候选图片使用 rel=preload 提示,以便浏览器可以提前加载该图片。
  4. 如果无法通过来源进行代理,并且要等到网页加载完毕后才能知道要加载的确切图片,则您应尽早设置与跨源图片 CDN 的连接,以缩短网页的 LCP 候选图片的资源加载阶段。

图片 CDN 是必不可少的工具,可以减少手动优化图片的工作量,因此值得考虑使用。不过,与往常一样,您需要做出权衡取舍,并且密切关注您网站的 LCP 候选图片,并酌情添加提示,这样可以减少这些关键请求因任何增加而增加的延迟时间。