应根据适配维度选择：需按设备像素比（如Retina屏切2x图）用x描述符；需按图片在页面中的渲染宽度（如不同断点下占300px/768px）则必须用w描述符并配sizes属性。
srcset里用x还是w描述符？看设备像素比还是视口宽度
选 x 还是 w 不是凭感觉，取决于你控制的维度：想按设备物理像素密度适配（比如 Retina 屏自动切 2x 图），用 x；想按页面中图片实际渲染宽度（比如在不同断点下占 300px/768px/1200px）来切图，必须用 w。
picture 标签本身不解析 srcset，真正起作用的是内部 source 元素的 srcset + media，或 img 自身的 srcset + sizes。单独写 img[srcset] 但没配 sizes，浏览器会按默认 100vw 算，结果常偏大、加载过重。
-
1x,2x只能用于img[srcset]，不能和media混用；100w,320w必须搭配sizes或source[media] - Chrome DevTools 的 Network 面板里看实际加载的资源，右键图片 → “Copy image src” 可验证是否命中预期分辨率
-
srcset中多个候选值之间用逗号分隔，空格只用于分隔“地址”和“描述符”，多一个空格就导致整个值失效
picture + source[media] + srcset[w] 是响应式布局的黄金组合
当图片在不同视口宽度下渲染尺寸变化明显（如移动端占满屏、桌面端固定 400px 宽），picture 套 source[media] 再配 srcset（单位 w）最可控。浏览器先匹配 media，再在匹配到的 source 的 srcset 中根据 sizes（或默认 100vw）选最接近的候选图。
<picture> <source media="(max-width: 768px)" srcset="hero-320w.jpg 320w, hero-640w.jpg 640w" sizes="100vw"> <source media="(min-width: 769px)" srcset="hero-800w.jpg 800w, hero-1600w.jpg 1600w" sizes="800px"> <img src="hero-800w.jpg" alt="hero"> </picture>
-
sizes值必须是有效长度（800px）或媒体条件（(min-width: 769px) 800px, 100vw），不能写width: 800px - 所有
source的srcset描述符单位要统一，混用x和w会导致该source被忽略 - 务必保留兜底的
img[src]，否则无匹配source时页面显示空白
高清图加载了但看起来还是模糊？检查 CSS width/height 是否覆盖了 intrinsic 尺寸
即使 srcset 正确加载了 2x 图，如果用 CSS 把 img 强制设为 width: 300px; height: 200px，而原图是 600×400，浏览器仍会拉伸渲染——模糊根源在此，不是 srcset 失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 优先用
max-width: 100%; height: auto保持宽高比，让浏览器按 intrinsic 尺寸缩放 - 若需固定容器尺寸，用
object-fit: cover替代直接设height，避免失真 - 用
devicePixelRatio在 JS 中 debug：console.log(window.devicePixelRatio)，确认当前环境是否真需要 2x 图
为什么 Chrome 显示加载了 1200w 图，但 Network 面板里 size 是 240KB 而不是 500KB？
这是压缩与编码的实际效果，不是 srcset 错误。同一张图存成 WebP（有损 80%）比 JPEG（质量 95%）体积可差 2–3 倍。浏览器选中的只是“最匹配尺寸”的源，最终输出体积还取决于格式、压缩率、是否支持 AVIF。
- 在
source中叠加type属性可进一步分流：<source type="image/webp" srcset="...">，老浏览器自动跳过不支持的type - 生成多版本图时，别只按宽度等比缩放，对小图（如 320w）应适当降低压缩质量（75%），对大图（1600w）保留更高质量（90%），平衡清晰度与体积
-
srcset不触发预加载（preload），关键首屏图建议额外加<link rel="preload" as="image" href="...">并指定imagesrcset和imagesizes
真正难的不是写对语法，而是搞清设计稿标注的「@2x」是指设备像素比，还是设计师随手写的「两倍宽」——前者用 x，后者得换算成 w 并配 sizes。很多模糊问题，源头都在这里没对齐。
