使用优化后的图片政策,确保您的网站使用的是效果最佳的图片。
图片通常占据大量的视觉空间,并且占据了网站上下载字节的大部分。优化图片可以提高加载性能并减少网络流量。
令人惊讶的是,网络上超过一半的网站提供的图片压缩质量不佳或过大。这样就只通过优化图片就为性能的提升留出了很多空间。
您可能会问,如何判断我的图片是否已优化,以及如何优化图片?我们正在实验一组用于图片优化的新特征政策:oversized-images
、unoptimized-lossy-images
、unoptimized-lossless-images
和 unoptimized-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-images
、unoptimized-lossless-images
和 unoptimized-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-images
和 unoptimized-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-images
或 unoptimized-lossless-images-strict
哪个更直观、更易用,或者我们是否应改用差异开销余量。我们会在试用快结束时发送一份调查问卷。敬请期待!