WebP / AVIF 格式图片怎么优雅兼容老浏览器？

是最优雅的原生响应式图片方案，按 顺序匹配格式与媒体条件，回退至 的 src；需统一各格式分辨率

、质量及 srcset 列表，并为 IE 提供兼容性兜底。

直接用 标签搭配多种 是最优雅、原生、无 JS 依赖的兼容方案。

用 实现渐进式降级

浏览器会按 顺序尝试加载，遇到第一个格式支持且媒体条件匹配的就停止，最终回退到 的 src（通常放 JPEG/PNG）。

• 把最新格式（如 AVIF）放在最前面，WebP 次之，传统格式（JPEG/PNG）放在 的 src 里
• 通过 type 属性明确声明 MIME 类型，浏览器靠它快速判断是否支持，无需下载试探
• 不需要 JavaScript 检测，不触发额外请求，语义清晰，SEO 友好

示例：

  
  
  

注意 fallback 图片的尺寸与质量一致性

AVIF/WebP 压缩率高，同画质下体积更小，但若 fallback 的 JPEG 尺寸失配或压缩过度，用户在旧浏览器中会看到模糊、拉伸或色差明显的图。

• 确保所有格式的图片分辨率一致（比如都是 1200×800），避免 CSS 拉伸导致模糊
• JPEG fallback 建议用高质量（85–92）输出，配合适当锐化，视觉上尽量贴近 WebP/AVIF 效果
• 可借助工具（如 sharp、squoosh）批量生成多格式并统一采样方式（如 lanczos 重采样）

需要响应式时，把 srcset 和 sizes 一起带上

现代格式同样支持响应式，别只给单尺寸 AVIF/WebP —— 否则高 DPR 设备在新浏览器里也会加载低清图。

• 每个 都可配 srcset + sizes，语法和 完全一致
• 确保所有格式的 srcset 列表一一对应（相同宽度/密度描述，相同文件名后缀替换）
• 例如：同一组 640w, 1280w, 2560w 的 AVIF/WebP/JPEG 文件需同时存在

简化示例：

       srcset="photo-640.avif 640w,
          photo-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 50vw"
    type="image/avif">
       srcset="photo-640.webp 640w,
          photo-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 50vw"
    type="image/webp">
       srcset="photo-640.jpg 640w, photo-1280.jpg 1280w"
    sizes="(max-width: 768px) 100vw, 50vw"
    src="photo-1280.jpg"
    alt="示例图">

老旧 IE（≤11）要额外兜底？用 object-fit 或 polyfill

在 IE 中完全不被识别，会直接忽略所有 ，只加载 。这本身已是合理 fallback —— 但若项目仍需支持 IE 且要求 object-fit 效果（如封面图居中裁剪），就得补充处理。

• 纯静态场景：确保 的 src 是可用 JPEG/PNG，IE 用户看到的是“降级但可用”的图
• 需要 object-fit: cover 等效果：为 添加 class，用 object-fit-images 这类轻量 polyfill
• 不推荐用 JS 检测格式再动态插入图片——增加首屏延迟、破坏预加载、影响 LCP