<picture>标签本身不响应式显示图片，它只是容器，浏览器根据media条件从上到下匹配并只加载首个符合的源；需确保media互斥、提供<img>兜底、检查404与缓存，并按语义合理选用<picture>或CSS背景图。
为什么写了<picture>还是只加载一张图
这不是 bug，是预期行为：浏览器会从上到下遍历
-
media条件重叠，比如同时写了(max-width: 768px)和(max-width: 1024px)，后者永远不会触发 - 漏写
<img>标签，导致无兜底——某些浏览器直接不渲染，或只显示alt文本 -
srcset里某个路径返回 404，浏览器静默跳过，继续往下找；你得去 Network 面板看真实请求，而不是仅凭页面显示判断 - 缓存干扰：开发时没勾选 DevTools 的
Disable cache，看到的仍是旧资源
按屏幕宽度切换图源的正确写法
核心是<source>的media + srcset配合，且顺序必须由小到大（或由大到小，但必须互斥）：
<picture> <source media="(max-width: 480px)" srcset="hero-sm.jpg"> <source media="(max-width: 768px)" srcset="hero-md.jpg"> <source media="(min-width: 769px)" srcset="hero-lg.jpg"> <img src="hero-fallback.jpg" alt="首页主视觉图"> </picture>
注意：media值必须是完整媒体查询语法，不能简写成768px或small；srcset里可以放单个路径（适合纯宽度切换），也可以用w描述符（如hero-800w.jpg 800w）配合sizes做更精细控制。
适配高 DPR 屏幕（如 Retina）要不要加 x
要，但别和w混用在同一srcset里。比如下面两种写法可取，但不能混：
立即学习“前端免费学习笔记（深入）”；
- 用
x：srcset="logo@1x.png 1x, logo@2x.png 2x"—— 适用于固定尺寸图（如 logo） - 用
w+sizes：srcset="hero-400w.jpg 400w, hero-800w.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw"—— 适用于流体容器中的大图
sizes必须写在<img>上，且其值应与 CSS 中该图片容器的实际宽度逻辑一致，否则浏览器无法准确估算所需分辨率。
真正容易被忽略的点
不是语法对不对，而是语义和上下文是否合理：<picture>适合内容性图片（有信息量、需不同构图或裁剪）；纯装饰性大图用 CSS background-image + background-size: cover更轻量、更可控；而首屏关键图建议去掉loading="lazy"，并加上decoding="async"防解码阻塞。
