浏览器仅按标准 MIME 类型匹配原生支持的图片格式，不识别的 type（如 image/myformat）会被跳过并 fallback 到 <img>；type 值必须精确匹配内置解码器列表，大小写、拼写、斜杠缺一不可，且服务器 Content-Type 必须完全一致。

标签本身不“加载”自定义格式图片，它只按标准 MIME 类型匹配浏览器原生支持的格式；所谓“自定义格式”若未被浏览器识别（如 image/myformat），会被直接跳过，最终 fallback 到 <img>。

type 属性必须是浏览器已知的标准 MIME 类型

浏览器只检查 type 值是否与内置解码器列表匹配，不支持的类型一律忽略整条 <source>。例如：

• type="image/webp" ✅ —— Chrome、Firefox、Edge、Safari 14+ 都支持
• type="image/avif" ✅ —— Chrome 93+、Firefox 93+、Safari 16.4+ 支持（上线前务必查 caniuse）
• type="image/jpg" ❌ —— 正确写法是 image/jpeg，大小写、拼写、斜杠缺一不可
• type="webp" 或 type="image/webp;charset=utf-8" ❌ —— Safari 和部分安卓 WebView 会跳过

服务器返回的 Content-Type 必须与 type 值完全一致

即使 HTML 写对了 type="image/webp"，如果服务器返回的响应头是 Content-Type: text/plain 或 image/webp; charset=utf-8，浏览器仍会拒绝该 <source>。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 用 curl -I https://example.com/photo.webp 检查实际响应头
• Nginx 需显式配置：types { image/webp webp; }，并确保 default_type application/octet-stream; 不覆盖它
• 本地开发时，VS Code Live Server 默认不发正确 MIME，建议换用 serve 或 http-server -c-1

多个 format fallback 要靠 顺序 + type 精确控制

浏览器从上到下解析 <source>，遇到第一个 type 受支持且 media 匹配的就停，后面全跳过。所以 WebP 必须放 AVIF 之前（因 AVIF 支持率更低），JPG 必须垫底：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="hero">
</picture>

• Chrome 128 加载 hero.avif（AVIF 支持）
• Safari 16.3 加载 hero.webp（AVIF 不支持，跳过第一行；WebP 支持，选中第二行）
• IE11 直接忽略所有 <source>，渲染 <img src="hero.jpg">

真正容易被忽略的点是：你写的“自定义格式”只要没进浏览器的解码器白名单，就等于不存在； 不提供解码能力，只做声明式路由。