是最优雅的原生响应式图片方案，按 顺序匹配格式与媒体条件，回退至 的 src；需统一各格式分辨率、质量及 srcset 列表，并为 IE 提供兼容性兜底。
直接用
用 实现渐进式降级
浏览器会按 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 文件需同时存在
简化示例：
photo-1280.avif 1280w"
sizes="(max-width: 768px) 100vw, 50vw"
type="image/avif">
photo-1280.webp 1280w"
sizes="(max-width: 768px) 100vw, 50vw"
type="image/webp">
sizes="(max-width: 768px) 100vw, 50vw"
src="photo-1280.jpg"
alt="示例图">
老旧 IE（≤11）要额外兜底？用 object-fit 或 polyfill
object-fit 效果（如封面图居中裁剪），就得补充处理。
- 纯静态场景：确保
src是可用 JPEG/PNG，IE 用户看到的是“降级但可用”的图 - 需要
object-fit: cover等效果：为 - 不推荐用 JS 检测格式再动态插入图片——增加首屏延迟、破坏预加载、影响 LCP
