是最优雅的原生响应式图片方案，按 顺序匹配格式与媒体条件，回退至 的 src；需统一各格式分辨率、质量及 srcset 列表，并为 IE 提供兼容性兜底。
直接用 <picture></picture> 标签搭配多种 <source></source> 是最优雅、原生、无 JS 依赖的兼容方案。
用 实现渐进式降级
浏览器会按 <source></source> 顺序尝试加载，遇到第一个格式支持且媒体条件匹配的就停止，最终回退到 <img alt="WebP / AVIF 格式图片怎么优雅兼容老浏览器？" > 的 src（通常放 JPEG/PNG）。
- 把最新格式（如 AVIF）放在最前面，WebP 次之，传统格式（JPEG/PNG）放在
<img alt="WebP / AVIF 格式图片怎么优雅兼容老浏览器？" >的src里 - 通过
type属性明确声明 MIME 类型，浏览器靠它快速判断是否支持，无需下载试探 - 不需要 JavaScript 检测，不触发额外请求，语义清晰，SEO 友好
示例：
注意 fallback 图片的尺寸与质量一致性
AVIF/WebP 压缩率高，同画质下体积更小，但若 fallback 的 JPEG 尺寸失配或压缩过度，用户在旧浏览器中会看到模糊、拉伸或色差明显的图。
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
- 确保所有格式的图片分辨率一致（比如都是 1200×800），避免 CSS 拉伸导致模糊
- JPEG fallback 建议用高质量（85–92）输出，配合适当锐化，视觉上尽量贴近 WebP/AVIF 效果
- 可借助工具（如 sharp、squoosh）批量生成多格式并统一采样方式（如 lanczos 重采样）
需要响应式时，把 srcset 和 sizes 一起带上
现代格式同样支持响应式，别只给单尺寸 AVIF/WebP —— 否则高 DPR 设备在新浏览器里也会加载低清图。
- 每个
<source></source>都可配srcset+sizes，语法和<img alt="WebP / AVIF 格式图片怎么优雅兼容老浏览器？" >完全一致 - 确保所有格式的 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
<picture></picture> 在 IE 中完全不被识别，会直接忽略所有 <source></source>，只加载 <img alt="WebP / AVIF 格式图片怎么优雅兼容老浏览器？" >。这本身已是合理 fallback —— 但若项目仍需支持 IE 且要求 object-fit 效果（如封面图居中裁剪），就得补充处理。
- 纯静态场景：确保
<img alt="WebP / AVIF 格式图片怎么优雅兼容老浏览器？" >的src是可用 JPEG/PNG，IE 用户看到的是“降级但可用”的图 - 需要
object-fit: cover等效果：为<img alt="WebP / AVIF 格式图片怎么优雅兼容老浏览器？" >添加 class，用 object-fit-images 这类轻量 polyfill - 不推荐用 JS 检测格式再动态插入图片——增加首屏延迟、破坏预加载、影响 LCP
