利用图片政策实现快速加载时间等

使用优化后的图片政策,确保您的网站使用的是效果最佳的图片。

Luna Lu
Luna Lu

图片通常占据大量的视觉空间,并且占据了网站上下载字节的大部分。优化图片可以提高加载性能并减少网络流量。

令人惊讶的是,网络上超过一半的网站提供的图片压缩质量不佳或过大。这样就只通过优化图片就为性能的提升留出了很多空间。

您可能会问,如何判断我的图片是否已优化,以及如何优化图片?我们正在实验一组用于图片优化的新特征政策:oversized-imagesunoptimized-lossy-imagesunoptimized-lossless-imagesunoptimized-lossless-images-strict。所有这些功能现已可用于源代码试用

权限政策针对映像引入了一组新的限制,这些限制可在开发时强制执行。违反任何限制的图片将渲染为占位符图片,易于识别和修正。这些政策可以在仅报告模式下指定,在这种模式下,系统会正常呈现图片,而不会强制执行政策,同时通过报告监控违规行为。(如需了解详情,请参阅下文中的实际使用中的“仅报告”模式。)

oversized-images

oversized-images 权限政策会限制图片的固有尺寸与其容器大小之间的关系。

当文档使用 oversized-images 政策时,如果任何 <img> 元素的固有分辨率大于容器大小的任一尺寸的 X 倍,则该元素将替换为占位符图片。

为什么?

向观看设备提供大于其可呈现的图片(例如,向移动设备上下文提供桌面图片,或向低像素密度设备提供高像素密度图片)会浪费网络流量和设备内存。如需了解如何优化图片,请参阅提供尺寸正确的图片提供自适应图片

示例

下面举几个例子来说明这一点。以下示例展示了将图片的显示大小减半时的默认行为。

默认的调整大小行为。
默认的大小调整行为。

如果我应用以下权限政策,则会看到占位图片。

Permissions-Policy: oversized-images *(2);

图片对于容器而言过大。
当映像对于容器而言过大时。

如果我只缩小宽度或高度,也会得到类似的结果。

调整后的宽度 调整后的高度
调整宽度和高度。

使用方法

总而言之,可以通过以下任一方式指定 oversized-images 政策:

  • Permissions-Policy HTTP 标头
  • <iframe> allow 属性

如需声明 oversized-images 政策,您需要提供:

  • 功能名称 oversized-images(必需)
  • 来源列表(可选)
  • 源站的阈值(即缩减比率 X),用括号指定(可选)

我们建议缩小比率为 2.0 或更低。请考虑使用不同分辨率的自适应图片,以便以最佳方式呈现各种屏幕尺寸、分辨率等的图片。

更多示例

Permissions-Policy: oversized-images *(2.0)

系统会在阈值为 2.0 的所有源上强制执行此政策。任何 <img> 元素都含有缩小比例大于 2.0 的图片,这些元素将替换为占位符图片。

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

系统会在网站源上强制执行此政策,并将阈值设为 1.5。 仅当缩小比率小于或等于 1.5 时,顶级浏览上下文和同源嵌套浏览上下文中的 <img> 元素才会正常渲染。其他位置的 <img> 元素将正常呈现。

unoptimized-{lossy,lossless}-images

unoptimized-lossy-imagesunoptimized-lossless-imagesunoptimized-lossless-images-strict 功能政策会根据图片的固有分辨率限制图片的文件大小:

unoptimized-lossy-images
有损格式每像素字节数不得超过 X,并允许固定的 1KB 开销。对于宽度为 W、高度为 H 的图片,文件大小阈值的计算方式为 W x H x X + 1024。
unoptimized-lossless-images
无损格式不应超过每像素比率 X,并且有固定的 10KB 开销限额。对于宽 x 高的图片,文件大小阈值的计算公式为:宽 x 高 x X + 10240。
unoptimized-lossless-images-strict
无损格式不应超过每像素比率 X,并且有固定的 1KB 开销限额。对于宽 x 高图片,文件大小阈值的计算方式为宽 x 高 x X + 1024。

当文档使用上述任何政策时,任何违反限制条件的 <img> 元素都将替换为占位符图片。

为什么?

下载大小越大,图片加载所需的时间就越长。优化图片时,应尽可能缩小文件大小:剥离元数据、选择合适的图片格式、使用图片压缩等。如需了解如何优化图片,请参阅使用 Imagemin 压缩图片使用 WebP 图片

示例

以下是默认的浏览器行为。如果没有权限政策,未优化的有损图片的显示效果与优化后的图片一样。

将优化后的图片与未优化的图片进行比较。
将优化后的图片与未优化的图片进行比较。

如果我应用以下权限政策,则会看到占位图片。

Permissions-Policy: unoptimized-lossy-images *(0.5);

图片未经过优化。
图片未经过优化时。

使用方法

如果您不熟悉权限政策,请参阅权限政策简介了解详情。

总而言之,unoptimized-{lossy,lossless}-images 政策可以通过以下方式指定:

  • Permissions-Policy HTTP 标头
  • <iframe> allow 属性

如需声明 unoptimized-{lossy,lossless}-images 政策,您需要提供以下信息:

  • 地图项名称,例如 unoptimized-lossy-images(必需)
  • 来源列表(可选)
  • 源的阈值(即每像素字节数 X),以括号指定(可选)

我们建议将 unoptimized-lossy-images 的每像素字节数比率设为 0.5 或更低,将 unoptimized-lossless-imagesunoptimized-lossless-images-strict 的每像素字节数比率设为 1 或更低。

WebP 格式的压缩比优于其他格式。请尽可能以 WebP 有损格式提供所有图片。如果这还不够,请尝试使用 WebP 无损格式。在不支持 WebP 格式的浏览器中使用 JPEG。如果上述格式均不起作用,请使用 PNG。

如果您使用的是 WebP 格式,请尝试使用更严格的阈值:

  • 0.2(适用于 WEBPV8)
  • WEBPL 为 0.5

更多示例

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

此政策对所有源站强制执行,阈值分别为 0.5(对于有损格式)和 1(对于无损格式)。任何 <img> 元素的图片如果每像素字节数比率超出限制,都将被禁止,并会被替换为占位符图片。

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

系统会对网站的来源强制执行此政策,阈值为 0.3(对于有损格式)和 0.8(对于无损格式)。只有当每像素字节数比率满足这些约束条件时,顶级浏览上下文和同源嵌套浏览上下文中的 <img> 元素才会正常呈现。其他位置的 <img> 元素将正常呈现。

实际环境中的“仅报告”模式

您可能并不希望发布包含占位符图片的网站。您可以在开发和预演期间使用强制执行模式(将未优化的图片呈现为占位符图片),并在生产环境中使用仅报告模式。(如需了解详情,请参阅权限政策报告。)与 Permissions-Policy HTTP 标头类似,Permissions-Policy-Report-Only 标头可让您实时观察违规报告,而无需采取任何违规处置措施。

限制

图片政策仅适用于 HTML 图片元素(<img><source> 等),尚不支持背景图片或生成的内容。如果您希望我们针对更多内容应用政策,请告诉我们。

优化图片

我已经说了很多关于优化图片的事,但还没有说到具体方法。该主题超出了本文的讨论范围,但您可以通过以下链接和本文末尾列出的 Codelab 了解详情。

请向我们提供反馈

希望本文能让您对图片政策有充分的了解,并激发您创作热情。我们诚挚欢迎您试用这些政策并提供反馈。

对于本文中提及的各项功能,您可以向我们的邮寄名单 (feature-control@chromium.org) 提供反馈。

我们希望了解您使用了哪些阈值值并认为有用的阈值。我们非常希望了解 unoptimized-lossless-imagesunoptimized-lossless-images-strict 哪个更直观、更易用,或者我们是否应改用差异开销余量。我们会在试用快结束时发送一份调查问卷。敬请期待!