自适应图片

网页上的文字会在屏幕边缘自动换行，以免溢出。另一方面，图片具有固有的尺寸。如果图片比屏幕宽，则图片会溢出，用户必须水平滚动才能查看整个图片。

幸运的是，CSS 提供了一些工具来防止这种情况发生。

限制图片

在样式表中，您可以使用 max-inline-size 声明图片永远不会以比其包含元素更宽的尺寸进行渲染。

img {
  max-inline-size: 100%;
  block-size: auto;
}

您也可以将同一规则应用于其他类型的嵌入式内容，例如视频和 iframe。

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

有了这条规则，浏览器会自动缩小图片以适应屏幕。

添加 block-size 值为 auto 意味着浏览器在调整图片大小时会保留图片的宽高比。

有时，图片尺寸由内容管理系统 (CMS) 或其他内容分发系统设置。如果您的设计需要使用与 CMS 默认长宽比不同的长宽比，您可以使用 aspect-ratio 属性来保留网站的设计：

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

遗憾的是，这通常意味着浏览器必须压缩或拉伸图片，才能使其适应预期的空间。

如需防止挤压和拉伸，请使用 object-fit 属性。

object-fit 值为 contain 时，浏览器会保留图片的宽高比，并在必要时在图片周围留出空白空间。

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

object-fit 值为 cover 时，浏览器会保留图片的宽高比，并在需要时剪裁图片。

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

您可以使用 object-position 属性更改图片裁剪位置。这样可以调整剪裁的焦点，确保图片中最重要的部分仍然可见。

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

交付图片

这些 CSS 规则会告知浏览器您希望如何呈现图片。您还可以在 HTML 中提供提示，告知浏览器应如何处理这些图片。

尺码选择提示

如果您知道图片的尺寸，请务必添加 width 和 height 属性。即使图片因 max-inline-size 规则而以不同尺寸呈现，浏览器仍然知道宽高比，并可以预留合适的空间。这样可以防止图片加载时其他内容跳动。

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

加载提示

使用 loading 属性告知浏览器是否延迟加载图片，直到图片位于或接近视口时才加载。对于非首屏图片，请使用值 lazy。浏览器不会加载延迟加载的图片，直到用户向下滚动到图片即将进入视图为止。如果用户从不滚动，图片就永远不会加载。

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

对于首屏上方的主打图片，请勿使用 loading。如果您的网站会自动应用 loading="lazy" 属性，您通常可以将 loading 设置为默认值 eager，以防止图片被延迟加载：

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

提取优先级

对于重要图片（例如 LCP 图片），您可以通过将 fetchpriority 属性设置为 high，使用提取优先级进一步优先加载：

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

这会指示浏览器立即以高优先级提取图片，而不是等到浏览器完成布局并正常提取图片时才提取。

不过，当您要求浏览器优先下载某个资源（例如图片）时，浏览器必须降低另一个资源（例如脚本或字体文件）的优先级。只有在图片确实至关重要时，才应为图片设置 fetchpriority="high"。

预加载提示

最好尽可能避免预加载，方法是将所有图片都包含在初始 HTML 文件中。不过，某些图片可能无法使用，例如通过 JavaScript 或 CSS 背景图片添加的图片。

您可以使用预加载功能，让浏览器提前提取这些重要图片。对于非常重要的图片，您可以将此预加载与 fetchpriority 属性结合使用：

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

同样，请谨慎使用这些属性，以免过于频繁地替换浏览器的优先级启发式方法。过度使用它们可能会导致性能下降。

某些浏览器支持基于 srcset 使用 imagesrcset 和 imagesizes 属性预加载自适应图片。例如：

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

通过排除 href 回退，您可以确保不支持 srcset 的浏览器仍会预加载正确的图片。

您无法根据浏览器对特定格式的支持情况预加载不同格式的图片。尝试这样做可能会导致额外的下载，从而浪费用户的数据流量。

使用 srcset 的自适应图片

借助该 max-inline-size: 100% 声明，图片不会超出其容器。不过，如果用户使用的是小屏幕和低带宽网络，那么让他们下载与大屏幕用户相同大小的图片会浪费数据。

如需解决此问题，请添加同一图片的不同尺寸版本，并使用 srcset 属性告知浏览器这些尺寸的存在以及何时使用它们。

宽度描述符

您可以使用逗号分隔列表的值来定义 srcset。每个值都是图片的网址，后跟一个空格，再后跟一些关于图片的元数据（称为描述符）。

在此示例中，元数据使用 w 单位描述了每张图片的宽度。一个 w 是一个像素的宽度。

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

srcset 属性是对 src 属性的补充，而不是取代。您仍然需要提供有效的 src 属性，但浏览器可以将其值替换为 srcset 中列出的选项之一。为了节省带宽，浏览器仅在需要时下载较大的图片。

尺寸

如果您使用宽度描述符，还必须使用 sizes 属性为浏览器提供更多信息。这会告知浏览器您希望图片在不同条件下以何种尺寸显示。这些条件在媒体查询中指定。

sizes 属性接受以逗号分隔列表形式提供的媒体查询和图片宽度。

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

在此示例中，您是在告知浏览器，在宽度超过 66em 的视口中，图片显示宽度不应超过屏幕的三分之一（例如，在三列布局中）。

对于介于 44em 和 66em 之间的视口宽度，以屏幕宽度的一半显示图片（如在双列布局中）。

对于宽度小于 44em 的任何内容，请以屏幕的全宽度显示图片。

这意味着，最大的图片不一定用于最宽的屏幕。如果浏览器窗口较宽，可以显示多列布局，则会使用适合一列的图片，该图片可能比在较窄的屏幕上用于单列布局的图片小。

像素密度描述符

您还可以使用描述符来提供要在高密度显示屏上显示的图片替代版本，以确保图片在高分辨率下仍能保持清晰。

使用密度描述符来描述图片相对于 src 属性中图片的像素密度。密度描述符是一个数字，后跟字母 x，例如 1x 或 2x。

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

如果 small-image.png 的尺寸为 300x200 像素，而 medium-image.png 的尺寸为 600x400 像素，则 medium-image.png 可以在 srcset 列表中包含 2x。

您不必使用整数。如果图片的另一个版本的大小为 450x300 像素，您可以使用 1.5x 对其进行描述。

演示图片

HTML 中的图片属于内容。因此，您需要添加 alt 属性，其中包含供屏幕阅读器和搜索引擎使用的图片说明。

如果您嵌入的图片仅用于装饰，不包含任何有意义的内容，可以使用空的 alt 属性。

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

您必须始终添加 alt 属性，即使该属性为空也是如此。 空的 alt 属性会告知屏幕阅读器相应图片是展示性图片。如果缺少 alt 属性，则无法提供相应信息。

理想情况下，展示性图片或装饰性图片应通过 CSS 而非 HTML 包含在网页中。HTML 用于结构。CSS 用于演示。

背景图片

使用 CSS 中的 background-image 属性加载展示图片。

element {
  background-image: url(flourish.png);
}

您可以使用 background-image 的 image-set 函数指定多个候选图片。

CSS 中的 image-set 函数与 HTML 中的 srcset 属性非常相似。提供一个图片列表，其中包含每张图片的像素密度描述符。

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

浏览器会选择最适合设备像素密度的图片。

向网站添加图片时，您需要考虑多种因素，包括：

• 为每张图片预留适当的空间。
• 确定您需要多少个尺寸。
• 确定图片是内容还是装饰性元素。

花时间确保图片效果良好是值得的。糟糕的图片策略可能会让用户感到恼火和沮丧。无论用户使用何种设备或网络连接，良好的图片策略都能让您的网站看起来流畅清晰。

您的工具箱中还有另一个 HTML 元素，可让您更好地控制图片：picture 元素。

检查掌握情况

测试您对图片相关知识的掌握情况。