用HTML的picture进行格式转换-html教程-PHP中文网

picture标签本身不转换图片格式，仅按顺序匹配第一个满足media或type条件的source并加载其资源；webp需写在jpeg前、type严格匹配且服务器返回正确content-type。

用html的picture进行格式转换

picture 标签本身不转换图片格式

<picture></picture> 是一个响应式容器，它不执行任何格式转换，只负责根据条件（如屏幕宽度、像素密度、支持的 MIME 类型）选择 <source></source> 中声明的某张图片资源。真正起作用的是你提前准备好的不同格式文件（比如 .webp、.avif、.jpg），浏览器按顺序匹配并加载第一个它能解码的 srcset 或 src。

怎么让浏览器优先用 WebP 而不是 JPEG

关键在 <source></source> 的书写顺序和 type 属性：

把支持度较低但更优的格式（如 image/avif）写在最前面，image/webp 次之，image/jpeg 或 image/png 作为兜底放在 <img> 的 src 里
type 必须严格匹配 MIME 类型，写成 type="image/webp"，不能是 .webp 或 webp
所有 <source></source> 的 media 或 srcset 必须指向真实存在的、已转好格式的文件——<picture></picture> 不会帮你在线转

<picture><source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp">
  @@##@@
</source></source></picture>

为什么加了 type="image/webp" 还是加载了 JPG

常见原因有这几个：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

浏览器不支持该格式（比如 Safari 14 以下不支持 image/avif，旧版 IE 完全不支持 <picture></picture>）
<source></source> 的 type 拼写错误，例如写成 image/webp; 多了个分号，或大小写不一致
服务器没正确返回 Content-Type 响应头（image/webp 文件被当成 text/plain 返回，浏览器直接跳过）
<source></source> 放在了 <img src="photo.jpg" alt="描述"> 后面——顺序错乱会导致浏览器忽略前面的 <source></source>

要不要用 JS 动态检测格式支持再插入 picture

没必要。现代浏览器对 type 的匹配是原生行为，且足够可靠。动态检测反而增加复杂度和首屏延迟。唯一值得加 JS 的场景是：你需要兼容极老浏览器（如 IE11），这时可以用 document.createElement('picture').supports 判断，再 fallback 到单图方案；但注意 HTMLPictureElement.prototype.supports 并非标准 API，稳妥做法仍是服务端或构建时生成多格式 + 严格按规范写 markup。

最容易被忽略的一点：WebP/AVIF 文件得自己生成，用 cwebp、avifenc 或构建工具插件（如 vite-plugin-imagemin）批量处理，别指望 HTML 自己“智能转”。