浏览器根据设备像素比（dpr）匹配srcset中x描述符，选择最接近且不小于当前dpr的源；若无完全匹配则向上取整，但旧版safari可能向下匹配，故建议覆盖1x、2x、3x，且不可混用w与x。
srcset 里写 x 单位时，浏览器怎么判断该选哪张图
浏览器会把当前设备的像素密度（devicePixelRatio）和 srcset 中每个选项的 x 值对比，选最接近且不小于当前密度的那个。比如设备 dpr=1.5，srcset="img@1x.jpg 1x, img@2x.jpg 2x"，它会选 img@2x.jpg；但如果写成 img@1x.jpg 1x, img@1.5x.jpg 1.5x, img@2x.jpg 2x，就会精准匹配到 img@1.5x.jpg。
注意：没有完全匹配时，浏览器倾向选“向上取整”，但不是绝对——某些旧版 Safari 会向下找，所以建议至少覆盖 1x、2x，再加一个 3x 保底。
-
1x对应 dpr=1（普通屏），2x对应 dpr≥2（多数 Retina 屏） - 不要混用
x和w单位在同一srcset中，否则浏览器忽略整个属性 - Chrome 和 Firefox 对
x解析较宽松，Safari 更严格，缺失1x项时可能回退到src
用 w 描述符做响应式图像选择，关键看 viewport 宽度而非设备像素比
w 描述符配合 sizes 属性使用，告诉浏览器：“在不同视口宽度下，这张图会渲染多宽”，然后浏览器根据实际布局宽度 + 图片固有尺寸，算出需要的物理像素数，再从 srcset 中挑最匹配的源。
例如：<img src="fallback.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw">。当 viewport 宽 400px，sizes 算出图宽为 400px，浏览器就选 small.jpg（480w 最接近）；若 viewport 宽 800px，sizes 给出 400px 宽，就会选 medium.jpg（768w 更接近所需像素）。
-
sizes必须写，否则浏览器按100vw猜测，容易选大图 -
w值是图片原始宽度（px），不是文件大小，也不是 CSS 宽度 - 用
calc()写sizes没问题，比如sizes="calc(100vw - 2rem)"，但 IE 不支持，需 fallback
srcset 和 src 之间是什么关系，src 还要不要留
src 是兜底，当浏览器不支持 srcset（如 IE11 及更老版本）或所有 srcset 条目都因格式/网络策略被禁用时，才加载 src。它不会被优先跳过，也不会参与像素密度或宽度计算。
- 必须保留
src，否则不支持srcset的环境会显示空白 -
src文件可以是最小可用图（如 1x 或 480w 版本），不用和srcset中某一项重复 - 如果用了
picture元素，src放在<img>里仍有效，作为所有<source></source>都不匹配时的 fallback
常见错误：srcset 加了却没生效，可能卡在哪几个点
最常被忽略的是服务器没正确返回图片的 Content-Type（比如 .webp 返回 text/plain），或者 CDN 缓存了旧的 Content-Type，导致浏览器拒绝解码。其次是 sizes 写错单位（写了 px 而不是 vw 或 rem），或 srcset 中路径拼错但控制台没报 404（静默失败）。
- 检查 Network 面板里图片请求的响应头，确认
Content-Type正确（image/webp、image/jpeg等） - 用
chrome://flags/#enable-jpeg-xl-encoding测试新格式支持，但生产环境别依赖未稳定特性 - 在 DevTools 的 Rendering 面板勾选 “Emulate high DPR” 或 “Device Mode”，手动切 dpr/sizes 看切换效果
像素密度感知不是黑盒逻辑，它依赖浏览器对设备能力的真实读取和对 HTML 属性的字面解析——写错一个单位、漏一个 src、或者服务器头不对，都会让整套机制静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
