网页上的文字会自动在屏幕边缘自动换行,以免溢出。图片则有所不同。图片具有固有尺寸。如果图片宽度超过屏幕,图片将溢出,导致系统显示水平滚动条。
幸运的是,您可以在 CSS 中采取措施来防止发生这种情况。
固定图片
在样式表中,您可以使用 max-inline-size
声明渲染的图片尺寸不得大于其包含元素的尺寸。
img {
max-inline-size: 100%;
block-size: auto;
}
您也可以将同一规则应用于其他类型的嵌入内容,如视频和 iframe。
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
实施该规则后,浏览器会自动将图片缩小以适应屏幕。
添加 auto
的 block-size
值意味着图片的宽高比将保持不变。
有时,图片的尺寸可能会无法控制,例如通过内容管理系统添加图片。如果您的设计要求图片的宽高比与图片实际尺寸不同,请在 CSS 中使用 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 CSS 属性调整剪裁的焦点。
您可以确保最重要的图片内容仍然可见。
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: 100%
规则),浏览器仍然知道宽高比,可以留出适量的空间。这样一来,当图片加载时,您的其他内容不会出现跳动。
<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"
属性,您通常可以设置 eager
属性(这是默认值),以防止应用此属性:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
>
提取优先级
对于重要图片(例如 LCP 图片),您可以将 fetchpriority
属性设置为 high
,从而使用 Fetch Priority(提取优先级)进一步确定加载的优先级:
<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">
同样,应谨慎使用此属性,以避免过度替换浏览器优先级启发式方法,这可能会导致性能下降。
通过 imagesrcset
和 imagesizes
属性预加载基于 srcset(详见下文)的自适应图片更高级,并且在某些浏览器(而非全部)中受支持:
通过排除 href
后备图片,您可以确保不支持此功能的浏览器不会预加载不正确的图片。
我们目前不支持基于不同图片格式(根据浏览器对这些图片的支持情况)进行预加载,这可能会导致额外下载。
理想情况是尽可能避免预加载,并在初始 HTML 中提供图片,避免重复编写代码,并允许访问浏览器支持的所有选项。
图像解码
您还可以向 img
元素中添加 decoding
属性。您可以告知浏览器,图像可以异步解码。然后,浏览器可以优先处理其他内容。
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
>
如果图片本身是需要优先处理的最重要的内容,您可以使用 sync
值。
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
decoding="sync"
>
decoding
属性不会更改图片解码的速度,而只是更改浏览器是否会等待图片解码完成,然后再呈现其他内容。
在大多数情况下,这不会造成什么影响,但在某些情况下,可能会让图片或内容的显示速度稍快一些。例如,对于包含大量元素的大型文档,以及需要花费一定时间解码的大型图片,针对重要图片设置 sync
会让浏览器等待并同时渲染两张。或者,设置 async
可以更快地显示内容,而无需等待图像解码。
不过,通常最好尝试避免过多的 DOM 大小,并确保使用响应式图片以缩短解码时间,这意味着解码属性几乎不受影响。
srcset
的自适应图片
得益于 max-inline-size: 100%
声明,您的图片永远不会脱离其容器。但是,即使大图片缩小到合适大小看起来没问题,也会感觉不舒服。如果用户在低带宽网络上使用小屏幕设备,则会下载不必要的大图片。
如果您针对同一图片制作了不同尺寸的多个版本,则可以使用 srcset
属性告知浏览器这些版本。
宽度描述符
您可以传入以英文逗号分隔的值列表。每个值都应该是图片的网址,后跟一个空格,然后是关于图片的一些元数据。这些元数据称为描述符。
在此示例中,元数据使用 w
单位描述每张图片的宽度。一个 w
对应 1 个像素。
<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
属性。不过,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
的大小为 300 x 200 像素,而 medium-image.png
的大小为 600 x 400 像素,则 medium-image.png
在 srcset
列表中的名称后面可以有 2x
。
您无需使用整数。如果图片的其他版本的大小为 450x300 像素,您可以使用 1.5x
来描述它。
演示性图片
HTML 中的图片是内容。因此,您始终需要为屏幕阅读器和搜索引擎提供包含图片说明的 alt
属性。
如果您嵌入的图片纯粹是生机勃勃的图片,而没有任何有意义的内容,请使用空的 alt
属性。
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
您仍必须添加 alt
属性。缺少的 alt
属性与空的 alt
属性不同。空的 alt
属性可向屏幕阅读器传达此图片是演示图片。
理想情况下,展示性或装饰性图片不应位于 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
元素,以帮助您对图片进行更多控制。
检查您的掌握程度
测试您对图片知识的掌握情况
您必须添加样式,使图片适合视口。
当图片的高度和宽度被迫使宽高比不自然时,哪些样式有助于调整图片以适合这些比例的方式?
object-fit
contain
和 cover
等关键字的匹配程度。image-fit
fit-image
aspect-ratio
在图片上添加 height
和 width
会导致 CSS 无法采用不同的样式。
srcset
属性不会_______ src
属性,而是_______。
srcset
绝对不会替换 src
属性。图片上缺少 alt
与空 alt
相同。
alt
属性可告知屏幕阅读器此图片是演示图片alt
不会向屏幕阅读器发送任何信号。