优先选用WebP动画替代GIF，体积小60%–80%、支持Alpha与有损/无损压缩，Chrome/Edge/Firefox120+/Safari17.4+原生支持；需用<picture>回退至AVIF和GIF，禁用video硬替代，高定制需求可用Canvas+PNG序列。
用现代图像格式替代传统动图（如 GIF），核心是兼顾体积压缩、视觉质量、透明支持与浏览器兼容性。这不是简单换后缀，而是结合格式特性、语义化标签和降级策略的一整套方案。
优先选用 WebP 动画或 AVIF 动画
WebP 动画已在 Chrome、Edge、Firefox 120+ 和 Safari 17.4+ 原生支持，体积比同等 GIF 小 60%–80%，支持 Alpha 通道和有损/无损压缩。AVIF 动画压缩率更高，但目前仅 Chromium 115+ 和 Firefox Nightly 稳定支持，生产环境建议作为可选增强。
- 直接使用
<img src="demo.webp" alt="加载动画">即可播放，无需 JS - 验证是否生效：在 DevTools 的 Network 标签页中查看该请求的
Content-Type是否为image/webp，并确认预览帧能连续播放
必须提供可靠的 fallback 回退机制
不能只依赖 WebP，尤其面对 iOS Safari 17.3 及更早版本、旧版 Android WebView 或微信 X5 内核（至今不支持 WebP 动画）。推荐用 <picture> 搭配多源顺序回退：
<picture> <source srcset="anim.avif" type="image/avif"> <source srcset="anim.webp" type="image/webp"> <img src="anim.gif" alt="加载中示意"> </picture>
注意：<source> 按顺序解析，浏览器会选用第一个它支持的格式；GIF 作为最终 fallback，确保所有设备至少能看到基础动画。
避免用 video 标签硬替代动图的常见误区
有人用 <video autoplay loop muted playsinline src="anim.mp4"> 替代 GIF，虽体积小，但存在硬伤：
- H.264/MP4 不支持透明背景，黑底无法消除
- VP9/AV1 编码虽支持 Alpha，但 Safari 对
yuva420p解码支持不稳定，部分机型直接不加载 -
playsinline在 iOS 上需额外配置，且首帧渲染延迟高于 GIF
真正需要透明动效时，WebP 动画仍是当前最稳妥的选择；若必须用 video，仅限不依赖透明的场景，并始终保留 GIF 作为兜底。
对高兼容性要求场景，可考虑 Canvas + PNG 序列方案
当 WebP 动画不可用、又必须控制帧率/暂停/缩放时：
- 预加载全部帧（
new Image().src = 'frame_001.png'） - 用
requestAnimationFrame控制绘制节奏，每帧前调用ctx.clearRect() - 文件名按序号对齐（
frame_001.png→frame_120.png），避免漏帧错位
这种方式完全可控，但开发成本略高，适合定制化动效需求。
不复杂但容易忽略
