感谢您关注 Google I/O 大会！观看点播内容。

此页面由 Cloud Translation API 翻译。

图片效果

图片通常是网络中最重要、最普遍的资源。作为因此，优化图片可以显著改善您网站的效果。在大多数情况下，优化图片意味着可以通过发送但您也可以优化发送给用户的字节数提供适合用户设备大小的图片。

您可以使用 <img> 或 <picture> 元素将图片添加到网页中，或者 CSS background-image 属性。

图片大小

在使用图片资源时，您可以执行的第一项优化是以正确的尺寸显示图片，在这种情况下，尺寸指的是图片的尺寸。在不考虑其他变量的情况下，显示的图片 500x500 像素容器中的最佳尺寸为 500x500 500 像素。例如，使用 1000 像素的方形图片意味着该图片是所需大小的两倍

不过，选择合适的图片大小时，需要考虑很多因素，因此在每种情况下选择适合的图片大小的任务复杂。2010 年 iPhone 4 发布时，屏幕分辨率 (640x960) 是 iPhone 3 (320x480) 的两倍。但其物理尺寸 iPhone 4 的屏幕空间与 iPhone 3 大致相同

以更高的分辨率显示所有内容都会生成文字和图片明显变小了，确切地说，是其先前大小的一半而是将 1 像素变成了 2 个设备像素。这称为设备像素比 (DPR)。通过 iPhone 4（以及之后发布的许多 iPhone 型号）的 DPR 为 2。

我们回顾一下前面的示例，如果设备 DPR 为 2，且图片为显示在 500x500 像素的容器中，然后是 1000 像素的方形图片（称为固有尺寸）现在是最佳尺寸。同样，如果 DPR 为 3，则最佳尺寸为 1500 像素的方形图片。

`srcset`

<img> 元素支持 srcset 属性，该属性允许您指定浏览器可能使用的可能图片来源的列表。指定的每个图片来源必须包含图片网址以及宽度或像素密度描述符。

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

上述 HTML 代码段使用像素密度描述符来提示浏览器在 DPR 为 1 的设备上使用 image-500.png，在设备上使用 image-1000.jpg DPR 为 2，在 DPR 为 3 的设备上为 image-1500.jpg。

虽然这些都可能看起来干燥乏味，但屏幕的 DPR 并不是唯一的在为给定网页选择最佳图片时的考虑因素。网页的 layout 是另一个考虑因素。

`sizes`

上述解决方案仅适用于以同一 CSS 像素显示图片的情况所有视口上的尺寸在许多情况下，网页布局以及容器的其大小会随用户的设备而变化。

通过 sizes 属性，您可以指定一组来源大小，其中每个来源大小由媒体条件和值组成。sizes 属性表示图片的预期显示尺寸（以 CSS 像素为单位）。合并后借助 srcset 宽度描述符，浏览器可以选择使用哪个图片来源最适合用户的设备

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

在上述 HTML 代码段中，srcset 属性指定图片列表（用英文逗号分隔）。以下各候选人该列表包含图片的网址，后跟表示固定宽度。图片的固有尺寸即其尺寸。对于例如，1000w 描述符表示图片的固有宽度为宽度为 1000 像素。

利用这些信息，浏览器会评估 sizes 中的媒体条件属性，并且（在本例中）指示当设备的视口宽度超过 768 像素时，图片会以 500 像素的宽度显示。在较小的屏幕上设备，图片会以 100vw（即整个视口宽度）显示。

</ph> 注意：如果您不熟悉 vw CSS 请参阅大型、小型和动态视口单元数了解详情。

然后，浏览器可以将这些信息与 srcset 图片列表合并以找到最佳图片。例如，如果用户使用的是移动设备屏幕宽度为 320 像素，DPR 为 3 的设备，则显示图片时间：320 CSS pixels x 3 DPR = 960 device pixels。在本示例中，距离最近的大小为 image-1000.jpg 的图片，其固有宽度为 1000 像素 (1000w)。

</ph> 注意：srcset 宽度描述符不起作用没有 sizes 属性。同样，如果您省略 srcset 宽度描述符，sizes 属性什么都不会执行任何操作。

文件格式

浏览器支持多种不同的图片文件格式。现代图片格式 WebP 和 AVIF 的压缩效果可能优于 PNG 或 JPEG，因此从而减少下载时间。通过提供现代格式的图片，您可以减少资源的加载时间，从而可能会降低 Largest Contentful Paint (LCP) 性能。

WebP 是一种广泛支持的格式，适用于所有现代浏览器。WebP 通常比 JPEG、PNG 或 GIF 具有更好的压缩效果，兼具有损和无损压缩WebP 还支持 alpha 通道透明度，使用有损压缩 - JPEG 编解码器不提供的功能。

AVIF 是一种较新的图片格式，虽然其支持范围不如 WebP，在各浏览器中都获得相当不错的支持。AVIF 同时支持有损和无损压缩，测试表明，使用无损压缩算法与 JPEG 相比AVIF 还提供广色域 (WCG) 和高动态范围 (HDR) 功能。

压缩

就图片而言，有两种压缩类型：

有损压缩通过量化降低图片准确率，使用色度下采样舍弃其他颜色信息。有损压缩对噪声较多的高密度图像最为有效和颜色，通常是内容相似的照片或图像。这是因为有损压缩产生的伪像不太可能被注意到如此详细的图像。不过，有损压缩在包含尖锐边缘（例如线条艺术）、同样明显细节的图像，或文本。有损压缩可应用于 JPEG、WebP 和 AVIF 图片。

无损压缩压缩不含数据的图片，从而减小文件大小损失。无损压缩根据像素与相邻像素。无损压缩用于 GIF、PNG、WebP 和 AVIF 图片格式。

您可以使用 Squoosh、ImageOptim 或图片优化服务。进行压缩时，没有合适的通用设置。建议的方法是尝试使用不同的直到在图像质量和文件大小。一些高级图片优化服务可为您完成这项工作但并非所有用户都有经济能力。

`<picture>` 元素

<picture> 元素可让您更灵活地指定多个候选图片：

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg"
  >
</picture>

在 <picture> 元素中使用 <source> 元素时，您可以添加支持 AVIF 和 WebP 图片，但会回退到使用更兼容的旧版图片如果浏览器不支持新型格式，则选择“.”格式。通过这种方法，浏览器会选择指定的第一个匹配的 <source> 元素。如果可以以该格式呈现图片时，它会使用该图片。否则移至下一个指定的 <source> 元素。在上述 HTML 中因此 AVIF 格式的优先级高于 WebP 格式，会回退到 JPEG 格式（如果既不支持 AVIF 也不支持 WebP）。

<picture> 元素需要嵌套在其中的 <img> 元素。通过 alt、width 和 height 属性在 <img> 上定义，并使用无论选择哪个 <source>。

<source> 元素还支持 media、srcset 和 sizes 属性。与前面的 <img> 示例类似，这些标记指示让浏览器知道要在不同视口上选择哪张图片。

</ph> 注意：虽然 srcset 属性提供浏览器会提示使用哪张图片、网页上的媒体查询 <source> 元素是一个命令，后跟。

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

media 属性接受媒体条件。在前面的示例中，设备的 DPR 用作媒体条件。DPR 高于或等于 1.5 的值将使用第一个 <source> 元素。<source> 元素用于告知浏览器，在视口宽度大于 768 像素的设备上，以 500 像素宽度显示选定的候选图片。在小型设备上这样会占据整个视口宽度通过结合使用 media 和 srcset 因此您可以更精细地控制要使用的图片。

下表对此进行了说明，其中包括多个视口宽度和评估设备像素比：

视口宽度（像素）	1 个 DPR	1.5 DPR	2 DPR	3 DPR
320	500.jpg	500.jpg	500.jpg	1000.jpg
480	500.jpg	500.jpg	1000.jpg	1500.jpg
560	500.jpg	1000.jpg	1000.jpg	1500.jpg
1024	500.jpg	1000.jpg	1000.jpg	1500.jpg
1920	500.jpg	1000.jpg	1000.jpg	1500.jpg

DPR 为 1 的设备会下载 image-500.jpg 映像，包括大多数桌面设备用户 - 以 500 像素宽的外部尺寸查看图片的用户。已开启另一方面，DPR 为 3 的移动用户可能会下载 image-1500.jpg - 在桌面设备上使用的图片相同，DPR 为 3。

<picture>
  <source
    media="(min-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

在此示例中，调整了 <picture> 元素以包含一个额外的 <source> 元素，为具有高 DPR 的宽幅设备使用不同的图片：

视口宽度（像素）	1 个 DPR	1.5 DPR	2 DPR	3 DPR
320	500.jpg	500.jpg	500.jpg	1000-sm.jpg
480	500.jpg	500.jpg	1000-sm.jpg	1500-sm.jpg
560	500.jpg	1000-sm.jpg	1000-sm.jpg	1500-sm.jpg
1024	500.jpg	1000.jpg	1000.jpg	1500.jpg
1920	500.jpg	1000.jpg	1000.jpg	1500.jpg

通过这个额外的查询，您可以看到 image-1000-sm.jpg 和 image-1500-sm.jpg：在小型视口上显示。这些额外信息可以进一步压缩图片同时又不会影响图片质量。

或者，通过调整 srcset 和 media 属性，您可以避免在小视口上提供大图片：

<picture>
  <source
    media="(min-width: 560px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
  >
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

在前面的 HTML 代码段中，宽度描述符遭到移除，取而代之的是其中列出了许多设备像素比描述符在移动设备上投放的图片受到限制设置为 /image-500.jpg 或 /image-1000.jpg，即使在 DPR 为 3 的设备上也是如此。

如何管理复杂性

使用自适应图片时，您会发现自己会发现许多不同的尺寸变体和格式。在前面的示例中，变体版本但不包括 AVIF 和 WebP。您应该制作多少个变体有哪些？和许多工程问题一样，答案往往是“视情况而定”。

虽然您可能忍不住想使用很多款式来找到最适合的款式，每个额外的图片变体都会产生费用浏览器缓存。只使用一种变体时，每位用户都会收到相同的图片，因此可以非常高效地缓存数据

另一方面，如果有多个变体，则每个变体都需要缓存条目。在以下情况下，服务器费用可能会增加，并可能会降低性能：变体的缓存条目已过期，需要重新从以下位置提取图片：源服务器。

除此之外，您的 HTML 文档的大小会随版本的不同而变大。您您可能发现自己为每张图片传送了几千字节的 HTML。

根据 `Accept` 请求标头提供图片

Accept HTTP 请求标头会告知服务器用户的浏览器所能理解的内容。您的服务器可以使用此信息最佳图片格式，而无需在 HTML 响应中增加额外的字节。

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

重要提示：Accept 请求标头通常只用于指明 HTML 请求支持哪些图片类型资源。如果您选择根据此标头的值传送资源，请务必在附加说明中 Vary 响应标头，以便共享缓存，例如内容分发网络。 (CDN) - 可解释对同一网址的不同响应。

上述 HTML 代码段是您可以添加到服务器 JavaScript 后端，以选择并提供最佳图片格式。如果请求 Accept 标头包含 image/avif，则 AVIF 图片。否则，如果 Accept 标头包含 image/webp，系统就会显示 WebP 图片。。如果这两个条件都不满足，则 JPEG 图片。

您可以根据 Accept 请求标头的内容修改响应例如，您可以在几乎所有类型的网络服务器中重写图片请求，（使用 mod_rewrite，基于 Accept 标头）。

这与图片内容传送网络 (CDN)。图片 CDN 是优化图片以及将根据用户的设备和浏览器确定最合适的格式。

关键是要找到平衡点、生成合理数量的候选图像，并衡量对用户体验的影响。不同的图片结果不同，而对每张图片应用的优化则取决于其页面大小以及用户使用的设备例如，全宽主打图片可能需要比缩略图更多电子商务商品详情页面。

延迟加载

可以指示浏览器延迟加载使用 loading 属性指定视口大小。属性值 lazy 会告知除非图片位于（或靠近）视口中，否则浏览器不会下载该图片。这个节省带宽，使浏览器能够优先处理渲染视口中已有的关键内容。

`decoding`

decoding 属性用于告知浏览器应如何对图片进行解码。答值 async 可告知浏览器可异步解码图片；从而缩短呈现其他内容所需的时间值sync表示该图片应与其他内容同时呈现。 auto 的默认值允许浏览器决定最适合用户。

</ph> 注意：decoding 属性的效果在超大、高分辨率图像上可能比较明显，解码时间更长。您还可以使用 decode 方法（针对 JavaScript 中的 HTMLImageElement 实例）。如需详细了解 decode 属性和 decode 的相关信息方法，读取内容图像解码属性实际上起到了什么作用？

图片演示

知识测验

哪些图片格式支持无损压缩？

GIF。

正确！

JPEG。

请重试。

.PNG。

正确！

WebP。

正确！

AVIF。

正确！

哪些图片格式支持有损压缩？

GIF。

请重试。尽管 GIF 格式仅支持有限的调色板 256 种颜色，则必须在转换为 GIF 之前完成有损编码。

JPEG。

正确！

.PNG。

请重试。

WebP。

正确！

AVIF。

正确！

宽度描述符（例如 1000w）说明了什么浏览 srcset 中指定的候选图片属性？

图片的外在宽度，即将样式应用到页面后布局中的图片

请重试。

图片的固有宽度，即图片的尺寸，图片本身。

正确！

sizes 属性向浏览器提供哪些信息应用到 <img> 元素？

表示在应加载 <img> 元素的 srcset，指定用户当前视口的尺寸

正确！

要从此处加载的图片的 <img> 元素的 srcset 属性。

请重试。

后续内容：视频效果

虽然图片可能是网络上最普遍的媒体类型，但。视频是网络上另一种常见的媒体类型，性能考虑因素在本课程的下一个单元中，您将了解一些了解有关优化视频以及如何高效加载视频的技巧。

图片效果

图片大小

srcset

sizes

文件格式

压缩

<picture> 元素

如何管理复杂性

根据 Accept 请求标头提供图片

延迟加载

decoding

图片演示

知识测验

后续内容：视频效果

`srcset`

`sizes`

`<picture>` 元素

根据 `Accept` 请求标头提供图片

`decoding`