响应式图片需组合<picture>、<source media>和sizes三者才能按需加载；srcset中x适配设备像素比，w需配合sizes用于流体布局；缺失sizes或media不匹配将导致加载失败。
用 <picture> + srcset + sizes 控制响应式图片加载
浏览器不会自动“猜”你想要哪张图，必须明确告诉它：在什么视口宽度下加载哪张资源、对应什么分辨率。核心不是只写 srcset，而是组合 <picture>、media、sizes 三者才能真正按需加载。
-
<source>的media属性决定“何时用这张图”，比如media="(max-width: 768px)" -
srcset列出同一张逻辑图的多个物理尺寸（如"small.jpg 1x, small@2x.jpg 2x"）或宽度描述（如"medium.jpg 768w, large.jpg 1200w"） -
sizes告诉浏览器“这张图在当前布局中大概占多宽”，比如sizes="(max-width: 768px) 100vw, 50vw"，否则浏览器无法从w单位中算出该选哪个srcset项 - 最后的
<img>是降级兜底，必须保留src和alt，否则无 JS 时图片不显示，且影响可访问性
srcset 里用 x 还是 w？看场景
两者不能混用在同一组 srcset 中，选错会导致浏览器忽略整个属性。
- 用
x：适合固定宽高的容器，比如头像、图标，只适配设备像素比（1x/2x/3x）。浏览器根据window.devicePixelRatio自动选 - 用
w：适合流体布局中的大图（如 banner、文章配图），需配合sizes使用。浏览器根据视口宽度 +sizes计算出目标渲染宽度，再匹配最接近的w值 - 错误示例：
srcset="a.jpg 400w, b.jpg 2x"—— 浏览器直接跳过这个srcset
常见加载失败原因：浏览器根本没发请求
你以为写了 srcset 就会加载多张图？其实浏览器只下载它最终选定的那一张。但如果你发现连“应该加载的那张”都没发请求，多半是以下问题：
- 忘记写
sizes，而用了w单位的srcset→ 浏览器无法计算目标尺寸，默认 fallback 到100vw，可能误选过大/过小图 -
<source>的media条件没命中，比如写了(min-width: 769px)却在 768px 宽度下测试 → 所有<source>被跳过，只加载<img src> - 图片路径 404 或跨域未配
CORS→ 控制台报Failed to load resource，但控制台 Network 面板里看不到请求发出（因为解析阶段就失败了） - 使用了
object-fit: cover但容器高度为0或未设高 → 图片渲染区域为 0，部分浏览器会延迟加载甚至跳过
一个可靠的工作示例
适配移动（375w）、平板（768w）、桌面（1200w），同时兼顾高清屏：
立即学习“前端免费学习笔记（深入）”；
<picture>
<source
media="(max-width: 375px)"
srcset="hero-375.jpg 1x, hero-375@2x.jpg 2x"
sizes="100vw" />
<source
media="(max-width: 768px)"
srcset="hero-768.jpg 1x, hero-768@2x.jpg 2x"
sizes="100vw" />
<source
media="(min-width: 769px)"
srcset="hero-1200.jpg 1x, hero-1200@2x.jpg 2x"
sizes="50vw" />
<img
src="hero-fallback.jpg"
alt="活动主视觉"
width="1200"
height="600" />
</picture>注意：每个 <source> 都带 sizes，且 media 区间无空隙；<img> 的 width/height 是为了防止布局偏移（layout shift），不是强制尺寸。
真正容易被忽略的是 sizes 的动态性——它不是 CSS，不能写 calc(100% - 20px)，只能是媒体查询 + 固定值或 vw 单位。如果布局复杂（比如侧边栏收起时图片变宽），就得靠 JS 动态改 sizes 属性，而不是指望 CSS 控制。
