<picture>标签不能定制视觉体验，其核心作用是按media条件精准加载预裁切的多张图；真正决定体验的是人工裁图策略——手机图需人脸特写、平板图保留上半身与环境、桌面图展示全景与品牌关系，三者语义不同且须预先用设计工具导出并独立优化格式与压缩。
picture 标签不能“定制视觉体验”，它只负责按条件加载你提前准备好的图片——真正决定体验的是你裁什么、怎么裁、在哪裁。
为什么用 media 而不是 CSS 媒体查询切图
用 CSS 媒体查询 + 单张大图 + object-fit，浏览器仍会下载完整原图，浪费带宽且首屏慢；<picture> 则让浏览器只请求匹配断点的那张图，体积可降 60% 以上。关键点在于：media 必须写成合法 CSS 媒体查询，比如 (max-width: 768px)，写成 max-width: 768 或漏掉单位会直接失效。
- 断点值必须互斥：避免
(max-width: 768px)和(min-width: 768px)并存，768px 宽设备可能随机选一个或都不匹配 - 顺序必须从宽到窄或从窄到宽统一：浏览器按
<source>顺序匹配第一个满足的，乱序会导致平板加载了手机图 -
<img>不是可选项，是强制兜底项：没它，不支持<picture>的旧浏览器或 JS 关闭时页面就留白
艺术指导（Art Direction）要先裁图，再写标签
所谓“不同终端视觉体验”，本质是为手机、平板、桌面三端准备三张语义不同的图：手机图不是桌面图缩放，而是人脸特写；平板图保留上半身+环境；桌面图展示全景与品牌关系。这些图必须用 Photoshop、Figma 或 ImageMagick 预先导出，<picture> 不做任何实时裁剪。
- 每张图独立优化：WebP/AVIF 格式优先，压缩率比 JPG 高 30%+，但需配
type属性声明支持性 - 尺寸标注推荐写
width/height：防止布局偏移（CLS），尤其首页大图 - 不要依赖
sizes替代media：sizes 是为w描述符服务的，和艺术指导无关
srcset + media 混用时容易搞混 x 和 w
当你要在手机端既换构图又适配 Retina 屏，就得在同一个 <source> 里写 srcset。这时必须分清：用 x 描述符（如 hero-mobile@2x.jpg 2x）是告诉浏览器“这张图专供 2 倍像素密度设备”，而用 w 描述符（如 hero-mobile-400w.jpg 400w）则必须配 sizes，否则浏览器无法判断该加载哪张。
立即学习“前端免费学习笔记（深入）”；
- 同一
<source>内不要混用x和w：浏览器行为不可预测 - 高 DPR 设备下，
x匹配优先级高于media：比如 iPad Pro 在 1200px 宽度但 DPR=2，若<source media="(min-width: 1024px)" srcset="... 2x">存在，它会被选中 -
<img>的srcset仍需保留：它是所有<source>都不匹配时的最终 fallback，也要支持 2x
懒加载和占位处理不当会毁掉首屏体验
首页大图加 loading="lazy" 是反模式——它大概率导致首屏空白闪动。正确做法是首图设 loading="eager"，并用纯色背景 + SVG 模糊轮廓做骨架占位，等图片加载完成再 fade in。
- 不要对
<picture>外层加loading：属性只对<img>生效，<source>不响应 - 避免用 JS 动态替换
src：破坏浏览器原生预加载机制，CLS 更严重 - 深色模式适配靠
prefers-color-scheme：可新增<source media="(prefers-color-scheme: dark)">，但需额外准备暗色版图源
真正难的从来不是写对标签，而是三张图是否真的针对各自终端做了构图取舍——如果手机图只是把桌面图简单等比缩放，那 <picture> 再规范也换不来体验提升。
