picture标签本身不提升交互体验，只影响图片加载时机和资源选择；真正影响交互的是能否在正确时间、尺寸、格式送达图片，写错括号可能导致移动端白屏1秒或加载3mb大图。
picture 标签本身不提升交互体验，它只影响图片加载时机和资源选择；真正影响交互的，是它能否在正确时间、以正确尺寸、正确格式把图送到用户眼前——写错一个括号，就可能让移动端白屏 1 秒或加载 3MB 大图。
为什么移动端用 picture 容易白屏或卡顿
不是标签不行，而是配置链太脆弱：浏览器在 HTML 解析阶段就要决定加载哪张图，一旦某个环节失效，就静默 fallback 到 <img> 的 src，甚至直接留空。
-
media值写成"max-width: 768px"（缺括号）→ 浏览器忽略该<source></source>，继续往下找 -
<source></source>放了type="image/avif"但服务端返回Content-Type: image/jpeg→ Chrome 标记为(blocked:mime-type)，跳过不加载 - 没写
<img src="...">，只写了alt→ 整个区域渲染为空白，控制台无报错 - 断点重叠，比如
media="(max-width: 768px)"和media="(min-width: 768px)"同时存在 → 所有宽度为 768px 的设备（包括很多安卓折叠屏）命中第一个后停止，永远不加载大图
移动端优先的 <source></source> 顺序怎么排
顺序 = 匹配强度降序。移动端设备种类多、DPR 高、网络弱，必须把最窄、最具体、最高优先级的规则放最前，否则会被宽屏规则“劫持”。
- ✅ 推荐顺序：
media="(max-width: 479px)"→media="(min-width: 480px) and (max-width: 768px)"→media="(min-width: 769px)" - ❌ 错误顺序：
media="(min-width: 480px)"放第一 → 所有 ≥480px 宽度设备（含 iPhone SE、Pixel 4a）全走这条，小图被拉伸模糊 - 不要用
orientation: landscape做条件 —— iOS Safari 对横屏媒体查询支持不稳定，部分机型会始终返回portrait - 若需适配高 DPR，
srcset里用x描述符（如"hero@1x.jpg 1x, hero@2x.jpg 2x"），别混w和x，混用即整个srcset失效
<img> 不是可选项，是强制执行节点
<img> 是整个 <picture></picture> 渲染链上唯一强制渲染的元素，也是移动端首屏是否“立刻可见”的关键。
- 必须带
src，且路径要真实存在（404 不报错，只会静默 fallback，调试得靠 Network 面板清缓存确认） - 必须带
alt，否则无障碍体验断裂，搜索引擎也无法理解图意 - 建议加
decoding="async"，防止大图解码阻塞主线程，尤其在低端安卓机上明显改善滚动流畅度 - 首屏大图别加
loading="lazy"；非首屏轮播图可用loading="eager"+ IntersectionObserver 替换高清图，避免初始加载过大
真正难的不是写几行 <source></source>，而是每张图的 media 是否覆盖了你目标机型的真实视口宽度、srcset 是否匹配设备 DPR、type 是否和服务端响应头一致——三者缺一，移动端就退回“一张图打天下”的原始状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
