srcset 不能只写分辨率描述符，因浏览器需配合 sizes 或媒体条件才识别，否则忽略而加载 src；w 描述符更可控但需预知显示宽度；sizes 必须含 fallback，css 宽高需匹配 dpr 避免模糊。
srcset 为什么不能只写分辨率描述符
因为浏览器不认单个 x 描述符（比如 2x）就自动切换——它需要配合 sizes 或明确的媒体条件，否则多数情况会忽略 srcset，直接加载 src 的图。
- 只写
<img src="a.jpg" srcset="a@2x.jpg 2x">：iOS Safari 和部分安卓 WebView 会当没写 - 必须补上
sizes（哪怕只是sizes="100vw"），或改用w描述符 + 媒体查询 -
w描述符更可控，但要求你提前知道图片在页面中的显示宽度（比如卡片宽 375px，则需提供a-375w.jpg 375w）
media 查询和 sizes 怎么配才不翻车
media 是 <picture></picture> 里用的，sizes 是 <img> 的属性，两者不能混用；选错会导致高清图根本不出现在匹配列表里。
- 用
<picture></picture>时：<source media="(min-width: 768px)" srcset="big.jpg 2x"></source>—— 这里的2x仅对匹配该 media 的设备生效 - 用
<img>时：sizes="(max-width: 767px) 100vw, 50vw"告诉浏览器“小屏下图占满 viewport，大屏下占一半”，浏览器才据此从srcset里挑最接近的w项 - 常见错误：
sizes="(min-width: 768px) 50vw"缺少 fallback（没匹配到时默认按 100px 算），导致高清图被跳过
高清图加载后模糊？检查 DPR 和 CSS width 是否打架
即使 srcset 正确加载了 @2x 图，如果用 CSS 把图片设成固定 width: 200px; height: 100px，而原图是 400×200，那浏览器仍会缩放拉伸，模糊感照旧。
- 优先用
max-width: 100%; height: auto，让图片按容器自然缩放 - 若必须固定尺寸，确保 CSS 宽高 = 物理像素 / 当前设备 DPR（例如 DPR=2 时，200px 容器应配 400px 图，并设
width: 200px; image-rendering: -webkit-optimize-contrast） - 不要依赖
device-pixel-ratio媒体查询做 JS 动态换图——CSS 已加载完，JS 换图会闪一下，且无法触发浏览器内置的 srcset 预加载逻辑
WebP + srcset 在 iOS 上的兼容性雷区
iOS 14.5 之前不支持 WebP，但更隐蔽的问题是：Safari 对 srcset 中混合格式（如 jpg 和 webp）的解析行为不一致，可能全链路降级。
- 别写：
srcset="a.webp 1x, a@2x.webp 2x, a.jpg 1x, a@2x.jpg 2x"—— Safari 可能因第一个是 webp 就整条忽略 - 稳妥做法：用
<picture></picture>分格式：<source type="image/webp" srcset="a.webp 1x, a@2x.webp 2x"></source>+<img src="a.jpg" srcset="a@2x.jpg 2x" sizes="100vw"> - 构建时注意：Webpack/Vite 的 image-minimizer 插件若没开
webp输出，srcset里写的.webp路径会 404，但控制台未必报错
sizes 的 fallback 值和 CSS 的 image-rendering 微调——这两处不填，其他都对也白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
