绝大多数响应式场景下，srcset 必须用 w 单位（如 400w），而非 2x；因 x 仅表设备像素比且隐含“图片占满视口”假设，而现代布局中图片常被 CSS 限制宽度，易致选图错误。
srcset 里该用 w 还是 x 描述符
绝大多数响应式场景下，srcset 必须用 w 单位（如 400w），而不是 2x。因为 x 只表达设备像素比（DPR），它隐含假设“图片占满视口宽度”——但现代布局中，图片常被 CSS 限制为固定宽、栅格列宽或百分比宽，2x 就会误导浏览器选错图。
常见错误现象：
- 混写
srcset="logo-400w.jpg 400w, logo-2x.jpg 2x"→ 整个srcset被忽略，退化到只加载src - 只写
srcset="img@2x.jpg 2x"且没配sizes→ 所有设备（包括小屏手机）都加载 2x 图，浪费带宽 -
src指向一张 1920w 的大图 → 不支持srcset的老浏览器直接卡顿，且无降级缓冲
sizes 属性必须和真实 CSS 布局完全一致
sizes 不是“建议”，而是浏览器选择哪张图的唯一依据。它声明的是“这张图在当前视口下**实际渲染多宽**”，不是“我想让它多宽”。一旦写错，浏览器就会选错尺寸的图源。
使用场景举例：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 如果图片在 CSS 中设为
width: 300px，而sizes="(max-width: 768px) 100vw"，浏览器会按 375px 视口算出需 750w 图，但它其实只占 300px，根本用不上 —— 白下 750w - 栅格中占 1/3 宽，断点从 768px 开始 → 正确
sizes是"(max-width: 768px) 100vw, 33.33vw"，不是硬写100vw - 旧版 Edge 对
sizes中媒体查询里的空格敏感：(max-width: 768px)会失效，必须写成(max-width:768px)
picture 元素不是可选项，是艺术方向切换的刚需
当不同屏幕需要**完全不同构图**（比如手机裁人脸、桌面展全景）或**强制格式降级**（WebP → JPEG）时，<picture> 是唯一解法。仅靠 srcset + sizes 无法实现内容级适配。
实操要点：
-
<source>的media属性断点必须和真实 CSS 断点一致，比如布局用768px，就别写成767px或769px -
<picture>必须包裹<img>，顺序不能错；<img>是 fallback，必须存在且带alt - 格式适配示例：
<source type="image/webp" srcset="banner.webp"><source type="image/jpeg" srcset="banner.jpg"><img src="banner.jpg" alt="横幅图">
基础 CSS 规则不能省：max-width 和 height auto
即使配了完整的 srcset + sizes，如果没写 max-width: 100% 和 height: auto，图片仍可能溢出容器或变形。
关键细节：
- 不要写
width: 100%—— 大屏下会强制拉伸失真 - Flex 容器中图片缩不进去？加
min-width: 0解决（这是隐藏开关） -
display: block可避免图片下方默认的空白间隙（由 inline 元素基线引起） - viewport 标签必须放在
<head>最顶部：<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则所有响应式行为都会失效
真正难的不是写对语法，而是让 sizes 字符串和 CSS 布局宽度、视口断点、图片固有尺寸三者严丝合缝。一个像素的偏差，就可能导致加载体积翻倍或清晰度掉档。
