使用经过优化的图片政策,确保您的网站使用效果最佳的图片。
图片通常会占用大量的视觉空间,占据网站上下载的大多数字节。优化图片可以提高加载性能并减少网络流量。
令人惊讶的是,网络上有超过一半的网站都提供了压缩不当或不必要的大型图片。因此,只需优化图片,效果就有很大的提升空间。
您可能会问,如何知道我的图片是否已优化,应如何优化?我们正在实验一组新的图片优化功能政策:oversized-images
、unoptimized-lossy-images
、unoptimized-lossless-images
和 unoptimized-lossless-images-strict
。所有这一切现已可用于源试用。
经过优化的图片政策
权限政策针对映像引入了一组新的限制,这些限制可在开发时强制执行。违反任何限制的图片将呈现为占位图片,易于识别和修复。这些政策可以在“仅限报告”模式下指定,在“仅限报告”模式下,图片将正常呈现,无需强制执行,同时可通过报告观察到违规行为。(如需了解详情,请参阅下文的实际使用中的仅限报告模式。)
超大图片
oversized-images
权限政策会根据图片的容器大小来限制映像的固有尺寸。
如果文档使用 oversized-images
政策,则任一维度的固有分辨率比容器大小大 X 倍的任何 <img>
元素都将被替换为占位图片。
这是为什么?
如果传送大于查看设备可以渲染的图片大小(例如,将桌面设备图片提供给移动设备上下文,或者向低像素密度设备提供高像素密度图片),则会在浪费网络流量和设备内存。如需了解如何优化图片,请参阅提供具有正确尺寸的图片和提供自适应图片。
示例
举几个例子来说明这一点。下图显示了将图片的显示大小减半时的默认行为。
如果我应用以下权限政策,则会获得一张占位图片。
Permissions-Policy: oversized-images *(2);
如果我仅降低宽度或高度,也会获得类似的效果。
How to use
总而言之,您可以通过以下任一方式指定 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-images
、unoptimized-lossless-images
、unoptimized-lossless-images-strict
功能政策会根据图片的固有分辨率限制图片的文件大小:
unoptimized-lossy-images
- 有损格式不应超过 X 的每像素比,并且有固定的 1KB 开销限额。对于宽 x 高的图片,文件大小阈值的计算方式为:宽 x 高 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);
How to use
如果您不熟悉权限政策,请参阅权限政策简介了解详情。
总而言之,您可以通过以下任一方式指定 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)
- 0.5(对于 WEBPL)
更多示例
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
是否更直观且更易于使用,或者我们是否应该使用不同的开销限额。我们将在试验快结束时发送一份调查问卷。敬请期待!