不是响应式图片的魔法标签，它仅将资源选择权交给浏览器；若的media语法错误（如缺括号）、type不匹配服务器content-type或未提供带src的兜底，浏览器便静默忽略所有而仅加载。

标签本身不实现响应式，它只是把选择权交给浏览器——你写错一条 media、漏一个 type、或者忘了 <img src>，图片就直接空白或只加载兜底图。

为什么写了 却始终只加载

这是最常见也最容易被忽略的问题：浏览器根本没进任何 <source></source> 分支，而是静默 fallback 到 <img>。原因通常有三个：

• media 属性语法错误，比如写成 media="max-width: 768px"（缺括号），浏览器直接跳过整条 <source></source>
• <source></source> 没写 media 也没写 type，它就被当成无效节点忽略
• 所有 <source></source> 的 media 条件都不匹配当前视口，例如只写了 (min-width: 1200px)，但你在手机上测试

验证方法：打开 Chrome DevTools → Network 面板，刷新页面，看有没有任何 <source></source> 对应的请求发出。如果没有，说明它们全被跳过了。

如何用 实现 art direction（艺术方向裁剪）

art direction 不是“让图变小”，而是换一张构图不同的图——比如移动端用竖版特写，桌面端用横版全景。这必须靠 <source></source> 的 media + srcset 组合，不能只靠 CSS 缩放。

• 每个 <source></source> 应对应一个明确的视口区间，且区间不要重叠（重叠时只取第一个匹配）
• srcset 推荐用 w 描述符（如 "small-portrait.jpg 480w, large-portrait.jpg 960w"），再配 sizes 告诉浏览器“这张图在该 media 下大概占多宽”
• sizes 必须和实际 CSS 渲染宽度一致，比如 CSS 写了 max-width: 600px，sizes 就别硬写 "100vw"，否则浏览器可能选错资源

示例结构：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<picture><source media="(max-width: 768px)" srcset="hero-mobile-small.jpg 480w, hero-mobile-large.jpg 960w" sizes="90vw"><source media="(min-width: 769px)" srcset="hero-desktop-small.jpg 1200w, hero-desktop-large.jpg 2400w" sizes="80vw">
  @@##@@
</source></source></picture>

WebP/AVIF 格式降级为什么总失败

不是文件后缀名决定是否加载，而是 type 属性 + 服务器返回的 Content-Type 响应头必须严格一致。哪怕路径是 photo.avif，只要 type="image/webp" 或服务端返回 Content-Type: image/jpeg，浏览器就跳过。

• type 必须写标准 MIME 类型：image/avif、image/webp、image/jpeg —— 写成 type="jpg" 或 type="avif" 会失效
• 顺序即优先级：把 image/avif 放最上面，image/webp 居中，image/jpeg 放最后一个 <source></source>，再紧跟 <img src="hero-fallback.jpg" alt="hero">
• Nginx / Apache 必须显式配置 MIME 类型，例如 Nginx 要加 types { image/avif avif; }，否则即使路径对，响应头也是 text/plain，浏览器直接 ignore

调试关键点：Network 面板里点开某张图的请求，看 Response Headers 中的 Content-Type 是否与 <source type></source> 完全一致。

在 里不是可选项，是强制出口

<img> 是整个 <picture></picture> 的唯一渲染载体，没有它，整个结构就不产生任何 DOM 图片节点，也不发任何请求。这不是兼容性补丁，而是规范强制要求。

• <img> 必须存在，且必须带 src 和 alt —— Safari 16.4 之前版本不支持 type，全靠它兜底
• <img> 的 src 不参与响应逻辑，但它自己的 srcset 和 sizes 会在所有 <source></source> 不匹配时生效，可以用来做 fallback 场景下的 DPR 适配
• 千万别写成 <img>（无 src），那在多数浏览器里就是空白区域，连 alt 文本都不显示

真正难调的从来不是标签怎么嵌套，而是 media 查询在不同设备上的解析偏差、CDN 对 Accept 请求头的处理策略、以及图片服务返回的 Content-Type 是否和 type 字符串逐字匹配——这三个地方出问题，<picture></picture> 就会安静地退回到最原始的状态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！