<picture> 标签核心是让浏览器自主选图：按尺寸、格式、构图精准匹配，解决艺术指导、现代格式降级、多条件组合三类需求；必须含带 src 和 alt 的 <img> 作 fallback，<source> 的 media 需合法 CSS 媒体查询，type 仅筛选 MIME 类型，srcset 与 sizes 用法依场景区分。
img 标签做不到的三类硬需求：艺术指导（不同屏幕看不同裁剪）、现代格式降级（WebP/AVIF → JPEG）、多条件组合（比如“大屏 + 支持 AVIF”才用某张图）。
下面说清楚怎么用、为什么这么写、哪里最容易出错。
picture 里必须有 img，且必须带 src 和 alt
这是最常被忽略的硬性要求：<picture> 内最后一个子元素**必须是 <img>**，不能是空的，也不能只写 <img alt="..."> 而漏掉 src。
- 没
<img>或<img>没src：匹配失败时整个区域留白，控制台不报错，Network 面板也看不到请求 -
alt不是可选：无障碍强制要求，SEO 也依赖它描述图像语义 -
<img>的src是最终 fallback，路径必须真实存在（404 会静默失败）
source 的 media 必须是合法 CSS 媒体查询
media 不是随便写个数字或字符串就行。写成 media="768"、media="tablet" 或 media="(orientation: landscape)" 都会导致该 <source> 完全被跳过。
- 正确写法只有
media="(max-width: 768px)"、media="(min-width: 769px) and (max-width: 1200px)"这类标准语法 - 断点要互斥、无间隙：比如
max-width: 768px后，下一个应从min-width: 769px开始，避免 768px 处无匹配 - iOS Safari 对
orientation支持不稳定，别用它做主判断条件
type 属性只起格式筛选作用，不触发自动转换
type="image/webp" 的作用非常明确：**仅当浏览器声明支持该 MIME 类型时，才考虑这个 <source>**。它不会把 JPEG 转成 WebP，也不会降级到其他格式。
- 顺序很重要：把 WebP/AVIF 的
<source>放前面，JPEG 放最后，浏览器自然优先选新格式 -
type和media可同时用：<source media="(min-width: 1200px)" type="image/avif" srcset="hero.avif"> - 不要在
srcset里混用w和x描述符（如"a.jpg 800w, b.jpg 2x"），整条srcset会被浏览器忽略
art direction 和响应式缩放别混着写
“手机裁人脸、桌面展全景”是 art direction；“小屏加载 400px 宽图、大屏加载 1600px 宽图”是响应式缩放。两者目标不同，写法重点也不同。
立即学习“前端免费学习笔记（深入）”；
- art direction 场景下：
srcset里通常只放一个路径（如"hero-mobile.jpg"），不用w/x；sizes必须写在<img>上，防止小屏误加载大图 - 响应式缩放场景下：用
<img>自身的srcset+sizes就够了，不一定需要<picture> - 真要混用（比如“大屏 + WebP + 全景图”），就把所有条件写进
<source>，按优先级从上到下排列
src，少一个单位 px，或者多一个非法 media，整个逻辑就停摆——而且不会告诉你哪里错了。
