<picture> 是最优雅的原生响应式图片方案，按 <source> 顺序匹配格式与媒体条件，回退至 <img> 的 src；需统一各格式分辨率、质量及 srcset 列表，并为 IE 提供兼容性兜底。
直接用 <picture> 标签搭配多种 <source> 是最优雅、原生、无 JS 依赖的兼容方案。
用 <picture> 实现渐进式降级
浏览器会按 <source> 顺序尝试加载，遇到第一个格式支持且媒体条件匹配的就停止，最终回退到 <img> 的 src（通常放 JPEG/PNG）。
- 把最新格式（如 AVIF）放在最前面，WebP 次之，传统格式（JPEG/PNG）放在
<img>的src里 - 通过
type属性明确声明 MIME 类型，浏览器靠它快速判断是否支持，无需下载试探 - 不需要 JavaScript 检测，不触发额外请求，语义清晰，SEO 友好
示例：
<picture><source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="描述文字">
</picture>
注意 fallback 图片的尺寸与质量一致性
AVIF/WebP 压缩率高，同画质下体积更小，但若 fallback 的 JPEG 尺寸失配或压缩过度，用户在旧浏览器中会看到模糊、拉伸或色差明显的图。
- 确保所有格式的图片分辨率一致（比如都是 1200×800），避免 CSS 拉伸导致模糊
- JPEG fallback 建议用高质量（85–92）输出，配合适当锐化，视觉上尽量贴近 WebP/AVIF 效果
- 可借助工具（如 sharp、squoosh）批量生成多格式并统一采样方式（如 lanczos 重采样）
需要响应式时，把 srcset 和 sizes 一起带上
现代格式同样支持响应式，别只给单尺寸 AVIF/WebP —— 否则高 DPR 设备在新浏览器里也会加载低清图。
- 每个
<source>都可配srcset+sizes，语法和<img>完全一致 - 确保所有格式的 srcset 列表一一对应（相同宽度/密度描述，相同文件名后缀替换）
- 例如：同一组
640w, 1280w, 2560w的 AVIF/WebP/JPEG 文件需同时存在
简化示例：
<picture><source
srcset="photo-640.avif 640w,
photo-1280.avif 1280w"
sizes="(max-width: 768px) 100vw, 50vw"
type="image/avif">
<source
srcset="photo-640.webp 640w,
photo-1280.webp 1280w"
sizes="(max-width: 768px) 100vw, 50vw"
type="image/webp">
<img
srcset="photo-640.jpg 640w, photo-1280.jpg 1280w"
sizes="(max-width: 768px) 100vw, 50vw"
src="photo-1280.jpg"
alt="示例图">
</picture>
老旧 IE（≤11）要额外兜底？用 object-fit 或 polyfill
<picture> 在 IE 中完全不被识别，会直接忽略所有 <source>，只加载 <img>。这本身已是合理 fallback —— 但若项目仍需支持 IE 且要求 object-fit 效果（如封面图居中裁剪），就得补充处理。
- 纯静态场景：确保
<img>的src是可用 JPEG/PNG，IE 用户看到的是“降级但可用”的图 - 需要
object-fit: cover等效果：为<img>添加 class，用 object-fit-images 这类轻量 polyfill - 不推荐用 JS 检测格式再动态插入图片——增加首屏延迟、破坏预加载、影响 LCP
