html怎么做AVIF WebP图片适配_html AVIF WebP格式图片兼容性方案【技巧】-html教程-PHP中文网

应直接使用实现 avif/webp 适配，因其无需 js、不发额外请求、seo 友好且原生支持；srcset 不识别格式，必须依赖做 mime 类型匹配，顺序为 avif → webp → jpeg，并确保各格式尺寸与质量一致。

html怎么做avif webp图片适配_html avif webp格式图片兼容性方案【技巧】

直接用 <picture></picture>，别绕弯子 —— 这是目前唯一无需 JS、不发额外请求、SEO 友好、且浏览器原生支持的 AVIF/WebP 适配方案。

为什么不能只用 `<img srcset>` 加多个格式？

因为 srcset 只能按分辨率（w）或像素密度（x）选图，**不识别图片格式**。你写 srcset="a.avif 1x, a.webp 1x, a.jpg 1x"，浏览器会无视 type，直接按规则选一个加载，很可能把 AVIF 当普通 URL 请求，而它根本不支持就报错或空白。

真正起作用的是 <source type="..."></source> 的 MIME 类型声明，浏览器靠这个做“格式嗅探”，不是靠文件后缀。

AVIF 支持从 Chrome 85、Firefox 92、Safari 16.4 起（2023 年中已覆盖绝大多数用户）
WebP 支持更广，连 Edge 18 都行，但 IE 完全不认 <picture></picture> 和 <source></source>
IE 用户会直接跳过所有 <source></source>，落到 <img> 的 src，所以 JPEG/PNG 必须可用

`<picture></picture>` 的正确写法和顺序很关键

浏览器按 <source></source> 从上到下匹配：第一个 type 支持 + 媒体条件满足，就停；都不满足，才用 <img>。所以顺序 = 优先级。

推荐结构（AVIF → WebP → JPEG）：

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

fetchpriority="high" 要加在 <img src="photo.jpg" alt="描述文字" fetchpriority="high"> 上，不是 <source></source> —— 否则无效
所有格式的图片必须尺寸一致、构图一致，否则视觉跳变
如果还要响应式尺寸（比如不同屏幕宽度加载不同分辨率的 AVIF），srcset 里就得写完整列表：srcset="photo-400.avif 400w, photo-800.avif 800w"，同时配 sizes
不要给 <source></source> 加 loading="lazy" —— 它不生效，懒加载逻辑只由 <img> 控制

IE 兜底不能只靠 `<img>`

IE 不仅不支持 <source></source>，连 <picture></picture> 标签本身都会被忽略，导致 <img> 变成孤立标签，可能被 CSS 或 JS 错误处理。

稳妥做法是加一层简单检测：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<!--[if IE]>
  @@##@@
<![endif]-->
<!--[if !IE]><!-->
  <picture><source srcset="photo.avif" type="image/avif"><source srcset="photo.webp" type="image/webp">
    @@##@@
  </source></source></picture><!--<![endif]-->

或者更轻量：用 document.createElement('picture').toString() === '[object HTMLPictureElement]' 判断，再动态插入 —— 但这就引入了 JS 依赖，失去原生优势。

多数项目现在可直接放弃 IE，但若必须支持，上面条件注释是最小侵入方案。

服务端协商是另一条路，但有硬门槛

如果你控制服务器（比如 Nginx），可以用 Accept 请求头做内容协商：

map $http_accept $img_ext {
  default jpg;
  "~image/avif" avif;
  "~image/webp" webp;
}
location /images/ {
  add_header Vary Accept;
  try_files $uri.$img_ext $uri =404;
}

优点：一份 HTML，服务端自动返回对应格式；缺点：