背景
在很多场景下需要播放几秒的动画效果，提升网站的视觉效果，提高吸引力。但对于这种小视频的播放，你会选择什么格式呢？是常规的gif，还是使用精灵图制作帧动画？或者直接使用视频文件进行播放？
下面就让我们看下哪种格式最适合你的需求。
格式枚举
1. GIF
GIF作为老牌的动画格式，具有无损压缩、兼容性极佳等优点。
但由于GIF是1987年发布的格式，它也具有不少的局限。
- GIF缺少透明图层
- 无法控制播放
- 文件大小较大
2. APNG
APNG是Animated Portable Network Graphics的缩写，这是为动图而生的格式。
在GIF、无损WebP与APNG中，APNG的文件大小最小。在浏览器中也获得了最广泛的支持。还能够展示透明图层。
但APNG无法进行有损压缩。且同样无法控制播放。
3. WebP
WebP是由google推出的一种现代图像格式。除了能展示透明图层外，最显著的优点是，支持有损压缩，压缩后体积非常小。
WebP的浏览器支持度不如APNG，但也覆盖了主要的现代浏览器。它的解码速度相较APNG慢上一些。
4. 精灵图
精灵图是指将多张图片集中到一张大图中，方便加载。在HTTP2之前是相对流行的技术。它的应用更加灵活，在需要高度控制时，可以考虑。
5. SVG
SVG是Scalable Vector Graphics的缩写，基于XML语言，渲染矢量图形，缩放时不会导致图像降低质量。
Lottie是一个以JSON的动画文件格式，可以通过AE导出动画，在web中以SVG的形式展示。
6. CSS动画
通过CSS可以实现简单的动画，还可以开启GPU加速页面渲染，增强动画效果。
7. MP4
直接使用MP4视频也是一种方式。相较GIF，MP4体积更小。MP4作为通用的视频格式，在浏览器的兼容性非常好。但是不支持透明图层。
8. WebM
WebM是由Google推出的视频格式，支持透明图层。相较MP4，它的大小更小，但质量稍差。虽然主流的浏览器都已提供了支持，但兼容性还是不如MP4。
9. Canvas
通过HTML的canvas标签与JavaScript绘制图形。通过WebGL技术，可以实现渲染可交互的3D图形。
总结
在选择方案时我们需要结合自己的需求。如果对可交互性要求很高，推荐使用SVG、CSS或Canvas技术，更加可控；如果期望兼容性较强，可以考虑精灵图、GIF或MP4；如果性能才是你的首要目标，那推荐使用视频或现代的图像格式APNG、WebP；在许多场景下，透明图层也是需要考虑的一部分，这种情况下只能舍弃GIF与MP4的格式。
最后列举下我测试时使用的帧图片与转换后的图片视频尺寸对比：
| 格式 | 尺寸 |
|---|---|
| 原帧图 | 3.9MB |
| webP动图 | 1.22MB |
| 精灵图 | 1.29MB |
| webM | 450KB |
使用node库webp-converter转化webP格式，使用ffmpeg转化webP格式。
参考链接
https://corydowdy.com/blog/apng-vs-webp-vs-gif
https://developers.google.com/speed/webp/faq#why_should_i_use_animated_webp
https://en.wikipedia.org/wiki/APNG
https://svgsprite.com/tests/gif-vs-lottie-vs-native-svg-vs-html-video-vs-apng.htm
https://trellis.co/blog/gifs-vs-animated-videos-which-should-you-use
https://news.ycombinator.com/item?id=13872452
https://moviemaker.minitool.com/moviemaker/gif-alternatives.htm
https://www.npmjs.com/package/webp-converter
https://ffmpeg.org/documentation.html