<picture>比单个<img>更适合高DPI场景，因其支持<source>分层声明media（断点）、type（格式兼容）和srcset+sizes（DPR与布局协同适配），而单<img>仅能通过srcset="... 2x"做简单DPR切换，无法兼顾多维度条件。
视网膜屏幕用户看到模糊图，不是因为图片“不够大”，而是浏览器没选对 srcset 中匹配其设备像素比（dpr）的资源。
为什么 <picture> 比单个 <img> 更适合高 DPR 场景
单靠 <img src="logo.png" srcset="logo@2x.png 2x"> 只能按 dpr 切换，但无法同时适配不同视口宽度 + 不同像素密度 + 不同格式支持（如 WebP）。<picture> 允许用 <source> 分层声明条件，浏览器按顺序匹配第一个满足条件的源。
-
media属性控制视口宽度（如(min-width: 768px)），影响布局级响应 -
srcset+sizes控制 DPR 和视口相关尺寸计算，决定加载哪份物理图 -
type属性让浏览器跳过不支持的格式（如 Safari 旧版不支持 WebP）
<source> 的 srcset 里写 2x 还是 w 单位？
二者用途不同，混用会失效。对视网膜屏优化，2x 更直接可靠；w 单位需配合 sizes 才能触发 DPR 感知加载，容易因计算偏差导致错载。
- 用
2x：适用于固定宽高比组件（如头像、图标），写法简洁：srcset="icon.png 1x, icon@2x.png 2x" - 用
w：适用于流体容器（如 banner 图），必须同步写sizes，例如：sizes="(max-width: 768px) 100vw, 800px"，否则浏览器按 100vw 计算，可能在 DPR=2 的小屏上仍加载 800w 图 - 实际项目中，多数高 DPR 优化场景建议优先用
2x，避免sizes逻辑出错后反而加载更小图
Chrome DevTools 里看到加载了 @2x 图，但画面还是糊？
常见于 CSS 覆盖了原始尺寸，或图像被缩放渲染。浏览器虽加载了高分图，但若最终渲染宽度被设为 100px，而图本身是 200×200 像素，又没设置 image-rendering: -webkit-optimize-contrast 或 pixelated，就会插值模糊。
立即学习“前端免费学习笔记（深入）”；
- 检查元素 computed 样式中的
width/height是否与图的自然尺寸成整数比（如 200px 宽图设为 100px 宽 → DPR=2 下刚好） - 避免用
%或rem直接约束<img>尺寸而不考虑父容器 DPR 表现 - 对图标类图像，可加
style="image-rendering: crisp-edges;"强制禁用平滑插值（注意兼容性：Firefox 支持crisp-edges，Chrome 需用-webkit-optimize-contrast）
真正难的不是写出 <picture> 结构，而是让每张 srcset 里的图都恰好对齐目标设备的渲染像素 —— 这要求构建流程生成多倍图时，命名、尺寸、压缩参数全部可控，且不能依赖设计稿标注的“@2x”字样自动推导。
