type属性是浏览器判断图片格式支持的唯一依据，必须严格匹配mime类型（如image/avif），且与服务端content-type一致；按从上到下顺序短路匹配，avif应置顶、webp次之、jpeg兜底；为最终无条件fallback。

type 属性是格式适配的唯一开关

浏览器不会主动探测图片文件后缀或内容，type 属性才是它决定“是否支持该格式”的依据。写 type="image/webp"，Chrome 就检查自己是否支持 WebP；写 type="image/avif"，Firefox 120+ 才会考虑加载，旧版直接跳过整条 <source></source>。

常见错误包括：

• 漏写 type 却指望浏览器“猜出”是 AVIF —— 实际上所有现代浏览器都只按 MIME 类型判断，不看文件名
• type 值与服务器返回的 Content-Type 响应头不一致，比如路径是 photo.avif，但服务端返回 text/plain，Chrome 会标记为 blocked:mime-type 并静默跳过
• 把 type 写在 <img> 上（无效），它只对 <source></source> 生效

格式优先级完全由 顺序决定

浏览器从上到下扫描 <source></source>，遇到第一个 type 受支持且 media 匹配的就停，后面的全忽略。这不是“多选”，是“短路匹配”。

所以 WebP 和 AVIF 要放在 JPEG 前面：

<picture><source srcset="hero.avif" type="image/avif"><source srcset="hero.webp" type="image/webp"><source srcset="hero.jpg" type="image/jpeg">
  @@##@@
</source></source></source></picture>

如果把 JPEG 的 <source></source> 放最前，哪怕用户用 Chrome 130，也永远加载不到 AVIF。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

注意：media 和 type 是“与”关系 —— 必须同时满足才生效。单独写 <source srcset="x.avif" type="image/avif"></source> 没有 media，它会在所有视口宽度下参与匹配（只要格式支持）。

AVIF/WebP 的 fallback 不是靠 JS，而是靠 的 src

<img> 是最终兜底，它不依赖 type，也不走任何条件判断。只要前面所有 <source></source> 都被跳过（格式不支持、media 不匹配、语法错误），就无条件加载这个 src。

容易踩的坑：

• 删掉 <img src="fallback.jpg"> 标签 → 页面留空，控制台无报错，只显示 alt 文本或空白占位
• <img> 有 src 但路径 404 → 浏览器显示破损图标，而非尝试其他源
• 误以为 <img> 也能写 srcset 来做格式降级 → 它只管兜底，srcset 在这里只用于 DPR 切换，和 type 无关

服务端配置比前端标签更关键

前端写对了 type，不代表图片真能加载。AVIF 和 WebP 要真正生效，必须满足三个条件同时成立：

• 前端 <source type="image/avif"></source> 语法正确
• 服务端对 .avif 文件返回 Content-Type: image/avif
• CDN 或反向代理未强制覆写响应头（比如 Nginx 默认不识别 .avif，需手动加 types { image/avif avif; }）

本地开发时容易忽略第三点：Webpack/Vite 的 dev server 通常不默认支持 AVIF MIME 类型，导致即使标签写对，浏览器也因响应头不匹配而拒绝加载。

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