直接用的srcset+sizes就能解决90%的图片模糊问题；仅在需换构图或叠加多维条件（如断点+dpr+格式）时必要，滥用易导致加载失败而回退到模糊1x图。
直接用 <img> 的 srcset + sizes 就能解决 90% 的图片模糊问题；<picture></picture> 只在需要「换构图」或「多维条件叠加」时才必要，滥用反而导致加载失败、回退到模糊的 1x 图。
为什么图片在 Retina 屏上还是模糊
根本原因不是没切 2x 图，而是浏览器没选中它——它不知道该按什么逻辑选。常见失效点：
-
srcset单独写但漏了sizes：浏览器默认按 1x DPR 计算所需宽度，2x 屏就去加载本该给 1x 屏的图 -
<source></source>的media值缺括号，比如写成media="max-width: 768px"→ 浏览器直接忽略整条<source></source>，静默走<img>fallback - 服务器返回的
Content-Type错了，比如.webp文件返回text/plain，Chrome 会标记为(blocked:mime-type)，跳过加载 - 所有 @2x 图和 @1x 图的 CSS 渲染尺寸不一致，比如 @1x 是 200px 宽，@2x 被设成 100px 宽，结果高分图被压缩失真
什么时候必须用 <picture></picture> 而不是 <img>
只在同时满足以下任一组合时才值得上 <picture></picture>：
- 不同屏幕宽度下要**不同构图**（art direction）：比如手机端裁掉背景只留人脸，桌面端展示全景
- 同一断点内还要**叠加格式 + DPR 适配**：比如平板（
min-width: 768px）下，优先用type="image/avif"，不支持则降级 webp，再不行才用 jpg，且每种格式都要提供 1x/2x 版本 - 需要对不同 DPR 设备做**独立断点控制**：比如小屏 2x 用 400w 图，大屏 2x 却要用 1200w 图，这时每个
<source></source>的srcset必须单独配sizes
如果只是“手机 1x/2x、桌面 1x/2x”，用 <img src="a.jpg" srcset="a.jpg 1x, a@2x.jpg 2x" sizes="100vw"> 更轻量、更可靠。
<source></source> 的 media 和 srcset 怎么协同不翻车
顺序和语法比内容更重要：
-
media必须是合法 CSS 媒体查询，且**带括号**：media="(max-width: 479px)"✅，media="max-width: 479px"❌ - 多个
<source></source>的断点**不能重叠**：推荐开区间写法 ——(max-width: 479px)→(min-width: 480px) and (max-width: 1023px)→(min-width: 1024px) -
srcset里**别混用w和x**：比如"a-400w.jpg 400w, a@2x.jpg 2x"是无效的，Chrome 可能整个忽略 - 每个
<source></source>的srcset应只服务自己断点内的 DPR 适配，不要指望它跨断点生效 - 末尾的
<img>**必须有src**，否则不支持<picture></picture>的环境（如旧版 IE 或某些 WebView）会留白
验证到底加载了哪张图，而不是“以为加载了”
Network 面板看到的请求名 ≠ 实际渲染用的图。关键看三处：
- 在 Elements 面板右键图片 → “Open in new tab”，检查 URL 是否含
@2x或宽尺寸后缀（如-800w.jpg） - 选中
<img>元素，在 Properties 面板展开currentSrc，这是浏览器最终选定的资源地址 - DevTools → Rendering → 勾选 “Emulate CSS media features”，手动设
device-pixel-ratio为 2 或 3，刷新后观察currentSrc是否切换
真正容易被忽略的是：所有 @2x 图必须和 @1x 图保持完全相同的 CSS 渲染尺寸与构图，仅分辨率不同；否则高倍图一加载，就会因拉伸/缩放而模糊——这不是加载问题，是设计问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
