sizes属性配合srcset，让浏览器根据图片在不同屏幕下的实际布局宽度选择最合适的图像版本。srcset提供多张不同分辨率的图片，sizes则通过媒体查询指定每种条件下图片的渲染宽度，如“(max-width: 600px) 100vw”表示小屏下占满视口。浏览器先匹配sizes中的条件，计算出所需宽度，再结合设备像素密度从srcset中选出最优图片，避免过度加载或模糊显示。它解决了仅靠srcset时浏览器无法判断布局尺寸的问题，提升性能与用户体验。sizes常用于响应式布局，支持vw、px等单位，需注意顺序、默认值及复杂布局中的手动计算。结合picture元素时，可先由picture按条件选择不同图片源（如WebP或裁剪图），再在每个source内用sizes和srcset进行精细分辨率控制，实现艺术方向与性能优化的双重目标。
sizes
属性是
srcset
的得力搭档，它告诉浏览器在不同屏幕尺寸或布局条件下，图片将占据多少实际的显示空间。这样一来，浏览器就能在
srcset
提供的多个图片版本中，智能地选择最适合当前渲染环境的那一张，既保证了视觉清晰度，又避免了不必要的带宽浪费。说白了，
srcset
提供了“有哪些图片可用”，而
sizes
则提供了“我需要多大的图片”。
解决方案
要搞清楚
sizes
属性如何配合
srcset
，我们得先理解它们各自的角色。
srcset
属性允许你提供同一张图片的不同分辨率版本，通常会搭配宽度描述符（
w
）来指示每张图片的固有宽度，比如
image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w
。它给浏览器提供了一个选择池，但却没有直接告诉浏览器“什么时候该选哪一张”。
这时候，
sizes
属性就出场了。它通过一系列媒体条件（media condition）和对应的图片宽度值（css Length value）来弥补这个信息空白。它的基本语法是：
<img srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px" src="image-fallback.jpg" alt="A descriptive alt text">
我们来剖析一下这个
sizes
值：
-
(max-width: 600px) 100vw
: 这表示“当视口宽度小于或等于600px时，图片将占据视口宽度的100%”。
-
(max-width: 1200px) 50vw
: 这表示“当视口宽度小于或等于1200px，且大于600px时（因为条件是从左到右匹配的），图片将占据视口宽度的50%”。
-
800px
: 这是一个默认值。如果前面的媒体条件都不匹配，图片将占据800px的固定宽度。
浏览器在解析这段代码时，会执行以下步骤：
- 它首先评估
sizes
属性中的媒体条件，从左到右，找到第一个匹配当前视口宽度的条件。
- 一旦找到匹配的条件，它就会使用该条件对应的宽度值（比如
100vw
或
50vw
）来确定图片在布局中实际会渲染的宽度。
- 接着，浏览器会结合这个计算出的布局宽度，以及设备的像素密度（DPR），从
srcset
中选择最接近且不小于所需宽度的图片资源。例如，如果计算出图片需要显示为400px宽，且设备DPR为2，那么浏览器会寻找一个固有宽度约为800px的图片。它会从
srcset
中找到
image-medium.jpg 800w
，因为这是最合适的选项。
这个过程是自动且高效的。作为开发者，我们需要做的是准确地告诉浏览器图片在不同布局下的“真实”尺寸预期，而不是猜测用户的设备分辨率。这听起来有点像在玩一个谜题，但一旦你掌握了布局和媒体查询的逻辑，它就变得非常直观。
为什么
sizes
sizes
属性对响应式图片至关重要？
很多时候，我们初次接触响应式图片，会觉得
srcset
加上
w
描述符就已经足够了。提供不同宽度的图片版本，让浏览器自己去选，听起来很美好。但实际上，如果没有
sizes
，浏览器是不知道图片在页面布局中最终会渲染成多大的。它只能根据设备的像素密度（Device Pixel Ratio, DPR）和屏幕宽度来“猜测”一个合适的图片，这往往会导致两种情况：
一种是“过度加载”：在小屏幕设备上，图片可能只占据很小一部分宽度，但浏览器却因为不知道这个布局信息，下载了为大屏幕准备的高分辨率图片。这白白浪费了用户的流量，拖慢了页面加载速度，尤其是在移动网络环境下，用户体验会大打折扣。
另一种是“加载不足”：在大屏幕或者高DPR设备上，如果浏览器选择了分辨率过低的图片，图片就会显得模糊不清，影响视觉效果。
sizes
属性的出现，就是为了解决这个核心痛点。它为浏览器提供了一个关键的“布局上下文”信息。通过精确地声明图片在不同视口或媒体查询下的渲染宽度，我们等于是在告诉浏览器：“嘿，别瞎猜了，这张图在当前情况下会显示这么大！”这样，浏览器就能做出最明智的决策，在
srcset
提供的众多选项中，精准地挑选出既能保证清晰度，又能兼顾性能的最佳图片。它将图片选择的决策权从开发者手中部分转移到浏览器，而浏览器拥有实时的视口大小、设备像素密度和网络状况等信息，能做出比任何静态代码都更优的判断。这不仅是性能优化，更是用户体验的基石。
如何编写高效且准确的
sizes
sizes
属性值？
编写高效且准确的
sizes
属性值，是响应式图片优化的一个关键环节，但它也常常是让开发者感到头疼的地方。我的经验告诉我，这需要对css布局有深入的理解，并且要进行反复测试。
-
从最窄或最宽的媒体查询开始：通常，我会建议从
max-width
（从小到大）或
min-width
（从大到小）的媒体查询顺序来编写
sizes
。比如，先定义移动端全屏的尺寸，然后是平板，最后是桌面端。这样可以避免媒体查询的逻辑冲突，让浏览器更容易匹配。
sizes="(max-width: 600px) 100vw, (max-width: 900px) 75vw, 50vw"
这里，
100vw
是手机端，
75vw
是平板，
50vw
是桌面端（如果都没有匹配，就默认50vw）。
-
理解
vw
和
px
的使用场景：
-
vw
(viewport width) 是你的好朋友，尤其当图片是流体布局，宽度随着视口大小变化时。例如，一张图片始终占据视口宽度的三分之一，那就可以用
33.3vw
。
-
px
(pixels) 则适用于图片被放置在固定宽度的容器中，或者在某个断点后图片宽度不再随视口变化，而是保持一个固定值。比如，
sizes="(min-width: 1200px) 800px, 100vw"
，意味着在大屏幕上图片最大800px，但在小屏幕上则占满视口。
-
-
考虑CSS布局的影响：这是最容易出错的地方。如果你的图片在一个复杂的CSS Grid、Flexbox布局中，或者有边距、内边距，那么它的实际渲染宽度可能不是简单的
100vw
。你可能需要进行一些计算。例如，如果图片在一个占据
50vw
的容器内，并且容器有
20px
的左右内边距，那么图片实际占据的宽度可能是
calc(50vw - 40px)
。然而，需要注意的是，
sizes
属性本身不支持
calc()
表达式，它期望的是一个直接的CSS长度值。这意味着你需要根据布局，手动计算出大致的
vw
或
px
值。例如，如果一个图片在桌面端占据了主内容区
960px
宽度的三分之一，你可以写
sizes="(min-width: 1200px) 320px, 100vw"
。
-
不要忘记默认值：
sizes
属性的最后一个值不应该有媒体条件，它作为所有前面条件都不匹配时的“兜底”选项。
-
调试和验证：这是不可或缺的一步。在浏览器开发者工具中，选中你的
<img>
标签，查看“Computed”选项卡，找到
currentSrc
属性。它会告诉你浏览器实际加载了哪一张图片。同时，你也可以在不同视口宽度下调整浏览器窗口，观察
currentSrc
的变化，确保浏览器选择了你预期的图片。这能帮助你发现
sizes
值中可能存在的逻辑错误或计算偏差。
-
迭代和优化：
sizes
属性的编写不是一蹴而就的。它往往需要根据实际的页面布局和性能测试结果进行微调。有时候，过于复杂的
sizes
值反而会增加维护成本，而一个稍微简化但仍然高效的值可能更实用。
sizes
sizes
与
picture
元素有什么不同，又如何协同工作？
sizes
属性和
picture
元素都是为了实现响应式图片，但它们解决的问题层面有所不同，并且可以协同工作，提供更强大的控制力。
sizes
属性，正如我们前面讨论的，主要用于分辨率切换（Resolution switching）。它配合
<img>
标签的
srcset
属性，让浏览器根据图片在布局中将占据的实际宽度和设备的像素密度，来选择加载同一张图片的不同分辨率版本。核心思想是：图片内容不变，只是根据需要提供不同大小的“副本”。
picture
元素则主要用于艺术方向（Art Direction）和格式切换（format Switching）。它允许你根据不同的媒体条件（如视口宽度、屏幕方向、设备像素密度等），提供完全不同的图片源。这意味着你可以：
- 改变图片内容或裁剪方式：在小屏幕上显示图片的一个局部特写，在大屏幕上显示完整场景。
- 切换图片格式：为支持WebP的浏览器提供WebP格式的图片（通常文件更小），为不支持的浏览器提供JPEG或PNG格式作为回退。
picture
元素内部包含一个或多个
<source>
元素，以及一个必需的
<img>
元素作为回退。浏览器会从上到下评估
<source>
元素的
media
属性，选择第一个匹配的
<source>
。如果所有
<source>
都不匹配，或者浏览器不支持
picture
元素，就会使用
<img>
元素。
它们如何协同工作？
picture
元素和
sizes
属性可以完美地结合起来，提供极致的响应式图片解决方案。当你在
picture
元素内部使用
<source>
标签时，每个
<source>
标签都可以拥有自己的
srcset
和
sizes
属性。
流程大致是这样的：
- 浏览器首先评估
picture
元素内的
<source>
标签。
- 它会根据每个
<source>
标签的
media
属性，找到第一个匹配当前环境的
<source>
。这决定了“用哪一组图片”。
- 一旦确定了要使用的
<source>
，浏览器就会查看该
<source>
标签内部的
srcset
和
sizes
属性。
- 然后，就像处理普通
<img>
标签一样，它会根据该
<source>
的
sizes
属性来判断图片将占据的布局宽度，并从该
<source>
的
srcset
中选择最合适的图片版本。
- 如果没有任何
<source>
匹配，或者浏览器不支持
picture
，它会退回到
<img>
标签，并使用
<img>
标签自己的
srcset
和
sizes
属性来选择图片。
一个结合的例子：
<picture> <!-- 大屏幕，特定艺术方向的WebP图片 --> <source media="(min-width: 1200px)" srcset="hero-desktop-art-dir.webp 1200w, hero-desktop-art-dir-2x.webp 2400w" sizes="900px"> <!-- 中等屏幕，不同裁剪的WebP图片 --> <source media="(min-width: 600px)" srcset="hero-tablet-art-dir.webp 800w, hero-tablet-art-dir-2x.webp 1600w" sizes="100vw"> <!-- 默认回退，为所有浏览器提供JPEG，并进行分辨率切换 --> <img src="hero-mobile.jpg" alt="A beautiful landscape" srcset="hero-mobile.jpg 400w, hero-tablet.jpg 800w, hero-desktop.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw"> </picture>
在这个例子中：
- 当视口宽度大于1200px时，浏览器会选择第一个
<source>
，然后根据其
srcset
和
sizes="900px"
来选择
hero-desktop-art-dir.webp
或
hero-desktop-art-dir-2x.webp
。
- 当视口宽度在600px到1199px之间时，浏览器会选择第二个
<source>
，然后根据其
srcset
和
sizes="100vw"
来选择
hero-tablet-art-dir.webp
或
hero-tablet-art-dir-2x.webp
。
- 如果视口宽度小于600px，或者浏览器不支持WebP格式，它会退回到
<img>
标签，并根据
<img>
标签自己的
srcset
和
sizes
属性来选择最合适的JPEG图片。
简单来说，
picture
元素决定了“用哪套图”（艺术方向/格式），而每套图内部的
srcset
和
sizes
则决定了“这套图里具体用哪张”（分辨率优化）。它们是响应式图片策略中不可或缺的两个工具，共同为用户提供最佳的视觉体验和性能表现。
评论（已关闭）
评论已关闭