必须用而非background-image当图片承载语义信息（如banner活动文案底图、产品主视觉），因其支持alt、可访问性及系统偏好查询，而background-image不参与无障碍树且在高对比度/缩放时可能消失。
什么时候必须用 <picture></picture> 而不是 background-image
当图片承载语义信息（比如 banner 上的活动文案底图、产品主视觉、数据图表背景）时，<picture></picture> 是唯一合规选择。CSS 的 background-image 无法提供 alt、不参与可访问性树、在高对比度模式或缩放时可能消失——这些不是“体验问题”，而是 WCAG 合规红线。
常见误判场景：
- 把轮播图首帧设为 background-image：用户用键盘导航时会跳过这张图，屏幕阅读器完全读不到；
- 用 background-image 显示带文字的宣传图：系统开启“减少动画”或“深色模式”时，图可能被强制过滤或颜色失真；
- 表格中商品图用 background-image：打印页面时该图默认不出现，而 <img> 可通过 @media print 控制显隐。
真正该用 <picture></picture> 的信号：
- 图片有明确业务含义，删掉它会影响信息完整性；
- 需要按视口宽度切换构图（art direction），比如桌面显示全景、手机只保留人脸特写；
- 必须支持 prefers-color-scheme 或 prefers-reduced-motion 等原生媒体查询。
什么时候 background-image 更合适
纯装饰性图片——比如页眉渐变纹理、卡片阴影叠加层、按钮 hover 状态的微动效贴图——直接用 background-image 更轻量、更可控。
优势很实际：
- 可以用 CSS background-size、background-position 精确控制铺满/居中/裁剪，<picture></picture> 对这些属性完全无效；
- 支持伪元素生成（::before / ::after），无需额外 DOM 节点；
- 多图合并成雪碧图后，一个 HTTP 请求加载全部小图标，比多个 <img> 标签省请求；
- 某些动效（如背景滚动、视差位移）用 transform + background-attachment 实现更平滑，且不触发重排。
注意陷阱：
- 必须给容器设置明确高度（min-height 或 height），否则背景不可见；
- background-image 不参与 HTML 加载顺序，首屏关键图若全靠它，可能造成 CLS（布局偏移）；
- 无法响应 loading="lazy"，懒加载需配合 IntersectionObserver 手动实现。
<picture></picture> 不能替代 background-image 的根本原因
<picture></picture> 是替换型内容容器，本质是为 <img> 提供多源策略，最终渲染结果仍是普通位图元素。它不接受任何 background- 前缀的 CSS 属性，z-index、background-position、background-blend-mode 全部失效。
典型错误操作：
- 在 <div style="background: url(...)"><picture></picture></div> 里试图让 <picture></picture> “成为背景”：它只是叠在背景上的一张图，层级、缩放、定位都失控；
- 给 <picture></picture> 设 position: absolute 并覆盖父容器：这属于前景遮罩，不是语义化背景，打印、截图、无障碍 API 都无法识别其背景意图；
- 期望用 <source media="(prefers-color-scheme: dark)"></source> 切换背景图：浏览器根本不解析该 media 查询在 <picture></picture> 内的语义，只认 <img> 的 srcset 逻辑。
想实现“响应式背景图”，唯一正解是用 CSS 媒体查询切换 background-image 的 URL：
@media (min-width: 1024px) {<br> .hero { background-image: url("hero-desktop.jpg"); }<br>}<br>@media (max-width: 767px) {<br> .hero { background-image: url("hero-mobile.jpg"); }<br>}
性能与加载行为的关键差异
<img> 和 <picture></picture> 的资源加载优先级高于 CSS background-image。浏览器把前者视为关键内容，会提前 fetch；后者被当作样式衍生资源，在 CSS 解析完成后才发起请求。
这意味着：
- 首屏大图若用 background-image，用户可能先看到空白区块再突然加载，尤其在弱网下；
- <picture></picture> 的 srcset + sizes 能让浏览器在 HTML 解析阶段就预判所需资源宽度，提前发起最匹配的请求；
- 但 <picture></picture> 体积大时会阻塞渲染，而 background-image 即使失败也不会影响 DOM 结构。
选型时盯住两个指标：
- 是否需要 alt 和语义？需要 → 强制用 <picture></picture>；
- 是否依赖 CSS 定位/混合模式/伪元素？依赖 → 只能用 background-image；
- 是否必须支持系统偏好（深色模式、减少动画）？支持 → <picture></picture> 的 media 更可靠，但仅限图片资源切换，不涉及样式层。
最易被忽略的细节：表格单元格、Flex/Grid 子项里的图片宽度由布局引擎决定，<picture></picture> 的 sizes 必须精准反映该容器的实际渲染宽度，写 "100vw" 在表格里基本等于乱猜——这会导致高清屏反而加载小图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
