srcset 必须与 src 配合使用，src 为必填兜底图，srcset 提供多分辨率候选（w 或 x 描述符不可混用），sizes 告知浏览器不同视口下图片渲染宽度以精准匹配源。
srcset 属性怎么写才生效
srcset 不是独立使用的，必须和 img 标签的 src 或 sizes 配合才能触发浏览器的响应式选择逻辑。只写 srcset 而不提供 src，部分旧浏览器（如 IE）会直接不加载图片；现代浏览器虽能 fallback 到第一个候选源，但不符合规范，也不利于可访问性。
正确写法要包含：src（必填兜底图）、srcset（多个分辨率/宽度候选）、可选的 sizes（告诉浏览器不同视口下图片占位宽）：
<img
src="photo-400w.jpg"
srcset="photo-400w.jpg 400w,
photo-800w.jpg 800w,
photo-1200w.jpg 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="示例图片">
-
src是降级必需项，建议设为最小尺寸图（如 400w），确保无 JS、低带宽或解析失败时仍能显示 -
srcset中每个候选用逗号分隔，格式为路径 宽度描述符（400w）或像素比描述符（2x），二者不能混用在同一属性中 -
sizes的值是媒体条件 + 宽度，浏览器据此估算图片渲染宽度，再匹配srcset中最接近的源；不写sizes时，浏览器默认按 100vw 计算，容易选错高分辨率图
用 w 描述符还是 x 描述符
选 w 还是 x 取决于你控制图片的维度目标：w 按布局宽度选源（推荐用于响应式布局），x 按设备像素比选源（适合固定宽高的头像、图标等）。
例如固定宽 200px 的用户头像：
立即学习“前端免费学习笔记（深入）”；
<img
src="avatar-200.jpg"
srcset="avatar-200.jpg 1x,
avatar-400.jpg 2x,
avatar-600.jpg 3x"
width="200" height="200"
alt="用户头像">
-
1x/2x/3x描述符仅表达设备像素密度，浏览器不关心布局，只要设备 DPR ≥ 对应值就可能选用——哪怕视口很窄，也可能加载3x图，浪费流量 -
w描述符配合sizes才能真正实现「按需加载」：浏览器先算出图片在页面中的渲染宽度（比如 320px），再从srcset中挑最接近且不小于该宽度的源（如400w） - 混合使用
w和x会导致整个srcset被忽略——浏览器只认一种描述符类型
为什么图片没按预期切换
常见原因不是语法错，而是浏览器决策逻辑被隐含因素干扰。打开 DevTools → Network 面板，刷新并查看实际加载的是哪个 img 请求，再对照以下检查点：
- 当前设备 DPR 和视口宽度是否与
sizes中的媒体条件匹配？比如(max-width: 768px)在桌面 Chrome 模拟器里可能不触发，因模拟器常报告设备宽度而非视口宽度 -
srcset中的w值是否真实反映图片文件的自然宽度？如果photo-800w.jpg实际是 1200px 宽，浏览器按 800w 匹配后可能拉伸失真 - CSS 是否强制设置了
width: 100%但父容器无明确宽度？此时浏览器无法准确计算渲染宽度，sizes失效，fallback 到src - 某些 CDN 或图片服务（如 Cloudflare Images）对 URL 加了签名或参数，导致
srcset中路径与实际资源不一致，返回 404 或低质图
要不要搭配 元素
单纯响应式尺寸切换用 srcset + sizes 就够了。<picture></picture> 的核心价值是艺术指导（art direction）：不同屏幕尺寸下需要完全不同的裁剪、构图甚至内容。
- 需要横屏展示全景、竖屏只展人脸？用
<source media="(orientation: landscape)" srcset="..."></source> - 想在小屏用 WebP、大屏用 AVIF，但格式兼容性不一致？
<source type="image/avif" srcset="..."></source>可按 MIME 类型降级 - 只是让同一张图在不同 DPR 下清晰显示？不需要
<picture></picture>，srcset更轻量、更易维护 -
<picture></picture>内部的<img alt="HTML中如何使用srcset实现响应式图片" >仍需带src和alt，否则无障碍阅读器无法识别
复杂点在于 sizes 的书写——它不像 CSS 那样支持 calc() 或变量，必须写死媒体条件，且浏览器不会动态重算；一旦布局逻辑变化（比如从 flex 改成 grid 导致图片占位变），sizes 就得同步改，否则 srcset 选源失效。这点容易被忽略。
