使用经过优化的图片政策，确保您的网站使用效果最佳的图片。
图片通常会占用大量的视觉空间，占据网站上下载的大多数字节。优化图片可以提高加载性能并减少网络流量。
令人惊讶的是，网络上有超过一半的网站都提供了压缩不当或不必要的大型图片。因此，只需优化图片，效果就有很大的提升空间。
您可能会问，如何知道我的图片是否已优化，应如何优化？我们正在实验一组新的图片优化功能政策：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-PolicyHTTP 标头<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-PolicyHTTP 标头<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 是否更直观且更易于使用，或者我们是否应该使用不同的开销限额。我们将在试验快结束时发送一份调查问卷。敬请期待！