结论：srcset + sizes 无法按“移动端/PC端”切换路径，它只管分辨率和视口宽度；真要走不同路径（如不同构图、裁剪或CDN域名），必须用 <picture> + <source media>。
直接说结论：srcset + sizes 无法按“移动端/PC端”切换路径，它只管分辨率和视口宽度；真要走不同路径（比如完全不同的构图、裁剪或CDN域名），必须用 <picture> + <source media>。
为什么不能区分“移动端 vs PC端”路径
srcset 的设计目标是分辨率适配，不是设备类型判断。它只看两个东西：当前视口宽度（w 描述符）或设备像素比（2x），不识别“这是 iPhone 还是 Windows 笔记本”。浏览器在 HTML 解析阶段就发起请求，此时 CSS 还没生效，更没有 JS 可运行——所以你写 srcset="mobile.jpg 480w, desktop.jpg 1200w"，浏览器只会按 480w/1200w 和 sizes 算出的显示宽度去选，不会因为“用户在手机上”就强制选 mobile.jpg。
常见错误现象：
- 写了
srcset="m.jpg 375w, d.jpg 1440w"但没配sizes→ 浏览器默认按100vw算，375px 视口下仍可能加载d.jpg（因 DPR=3 时需 1125px 物理像素） - 混用
375w和2x在同一个srcset里 → 整个srcset被忽略，回退到src - 以为
max-width: 480px就是“移动端”，但很多平板也满足该条件，却加载了手机图
<picture> + media 才能真正按设备场景切路径
当你要的不是“同一张图的不同尺寸”，而是“完全不同构图、不同裁剪、甚至不同 CDN 域名的图”，<picture> 是唯一可靠方案。它的 <source> 支持标准媒体查询，可精准匹配真实布局断点。
立即学习“前端免费学习笔记（深入）”；
实操要点：
-
<source>必须放在<img>前面，顺序错（比如<img>在前）整个<picture>失效 -
media断点必须和你实际 CSS 布局一致，比如 CSS 用@media (min-width: 768px)，<source>就不能写(min-width: 769px) - 路径可以完全不同：CDN 域名、目录、文件名、甚至协议（
https://mobile-cdn.example.com/vshttps://desktop-cdn.example.com/） - 示例：
<picture> <source media="(max-width: 767px)" srcset="https://m.example.com/img-facecrop.webp"> <source media="(min-width: 768px)" srcset="https://d.example.com/img-pano.webp"> <img src="fallback.jpg" alt="描述"> </picture>
sizes 必须严格匹配 CSS 布局宽度，否则白配
sizes 不是“最大宽度”，也不是 CSS 单位，它是浏览器计算“这张图要占多少物理像素”的唯一依据。写错会导致小屏加载大图、大屏加载糊图。
关键细节：
- 如果图片在 Flex/Grid 容器中占 1/3 宽，且断点是 768px，则
sizes应为"(max-width: 767px) 100vw, 33.33vw"，不是"100vw"或"33rem" - 不要在
sizes里写空格：(max-width: 768px)可能被旧 Edge 当作无效值，写成(max-width:768px)更稳妥 - 漏掉某个视口范围（比如没覆盖
320px），浏览器会 fallback 到100vw，大概率选错图 - 配合
loading="lazy"时，sizes仍需覆盖全范围——懒加载只控制时机，不改变选图逻辑
最易被忽略的一点：所有 <source> 的 type 或 media 匹配失败时，浏览器会渲染末尾的 <img>，但它必须带 src 和 alt，否则就是空白。别以为写了 <source> 就万事大吉。
