应优先用WebP动图替代GIF，体积减60%–80%、支持完整Alpha透明；兼容性不足时通过<picture>回退至AVIF和GIF；高要求场景改用Canvas+PNG序列精确控制播放。
用现代图像格式替代传统 GIF 动图，核心目标是减小体积、提升画质、支持透明通道，同时兼顾兼容性与可控性。这不是简单换后缀，而是结合格式特性、HTML结构和降级策略的系统优化。
优先选用 WebP 动图作为主力替代
WebP 动图在 Chrome、Edge、Firefox 120+ 和 Safari 17.4+ 中原生支持，语法和普通图片完全一致，无需 JS：
-
直接替换：把
<img src="loading.gif" alt="加载中">换成<img src="loading.webp" alt="加载中"> - 优势明显：同画质下体积比 GIF 小 60%–80%，支持完整 Alpha 透明（GIF 只支持二值透明），动画帧率更稳定
- 注意兼容断层：Safari ≤17.3、旧版 Android WebView、微信 X5 内核仍会静止显示第一帧——必须搭配 fallback
用 提供多层回退保障
单靠 WebP 不够，需通过 <picture> 构建渐进式支持链，确保老浏览器仍能播放：
- 第一层优先尝试 AVIF（压缩率最高，但兼容最窄）
- 第二层提供 WebP（主流现代浏览器全覆盖）
- 最终兜底用 GIF（所有浏览器都支持，但体积大、无半透）
示例代码：
立即学习“前端免费学习笔记（深入）”；
<picture><source srcset="anim.avif" type="image/avif">
<source srcset="anim.webp" type="image/webp">
<img src="anim.gif" alt="加载动画">
</picture>
对高要求场景，用 Canvas + PNG 序列完全掌控
当需要精确控制播放、暂停、跳帧或适配深色模式下的透明效果时，WebP/GIF 都力不从心，此时应转向 Canvas 方案：
- 提前用
new Image()加载全部帧（如frame_001.png到frame_120.png） - 用
requestAnimationFrame驱动绘制，避免setTimeout掉帧 - 每帧开始前调用
ctx.clearRect()，防止残留 - 可动态切换帧序列、缩放、加滤镜，且 Alpha 通道 100% 可控
避免常见误区
不是所有“看起来像动图”的方案都合适：
- 别用 video 模拟透明动图：MP4/H.264 不支持 Alpha，导出带透明的 VP9 视频在 Safari 和多数移动端仍不可靠
-
别依赖 onload 判断 WebP 动画就绪：加载完成 ≠ 第一帧已解码渲染，需监听
canplay或调用img.decode() -
别在 CSS 里用 background-image 播 WebP 动图：部分浏览器（尤其旧 Safari）不支持背景中的 WebP 动画，必须用
<img>标签
