GIF

先看看GIF格式，最初创建了GIF格式，是为了方便共享非常简短的原始绘制的动画。GIF看起来和Video 相似，都是运动的画面，不过GIF和视频还是有很大的区别。主要包括：

GIF的帧率很低，而视频的至少都是15帧往上。
GIF没有声音，视频一般都会包含音频
GIF默认可以循环自动播放，而视频一般需要点击下再播放

通常来说GIF的压缩率不高，画面质量也不好，可以参考下面这个GIF:

027-face.gif

能够看出这个GIF的质量真的是惨不忍睹，有banding, 色块，同时文件大小已经超过300 kB。。。

再看一个GIF格式文件

mj-giphy.gif

可以看出很多图像都有的缺点：

颗粒感，也就是grain很重。
调色板太差了。
文件太大，这个gif图片要将近1.5 MB！

说句实在话，现在用GIF已经不太合适了，有一些网站已经用其他的方式来显示"GIF"的内容了。譬如Giphy，Gfycat或Imgur之类的网站也使用其他格式显示“ GIF”。Imgur使用的GIFV“格式”实际上不是文件格式，而是容器。它由HTML <video>标签以及MP4，WebM和GIF文件组成，其中之一取决于浏览器支持和文件大小提供给用户。

Webp 和 APNG

APNG是对PNG格式的扩展(目前还没有被PNG官方承认)，它允许动画图像表示。APNG的优点是支持8位和24位颜色深度。它通常产生的文件尺寸小于GIF，但是它对浏览器的支持范围不广（尽管并不可怕，全球大约75％的用户可以查看APNG）。除此之外，它还面临着与GIF相同的问题：它不是视频格式。它的设计就是为了提供简单动画的小众市场。

WebP是Google的现代图片格式，也支持动画帧。我们已经看到了它在无损和有损图像压缩方面的能力，但是在动画世界中，它的作用不那么出色。

它的设计显然是为了存储类似照片的内容，而不是GIF和APNG擅长的简单形状或徽标。这使它在诸如Michael Jackson GIF之类的动画上表现更好，但这没关系，因为视频格式在这方面仍然要好得多，我将在后面介绍。对于简单的动画，使用WebP压缩的文件更大（不敢相信吧）。实际上Webp适合于自然图像的压缩，而对于简单颜色和形状的图片，使用Webp要获得无损的质量，不一定有PNG好。

这是这些树格式与简单动画上的直接对比。根据其结果，就简单动画的文件大小而言，APNG无疑是赢家。

Video

Video和上面的格式都不一样，Video的压缩和解压缩相对复杂，但是压缩率较高(尤其对于自然图像，对于徽章或者logo的动画不一定)。这意味着，如果图片的一部分在帧之间是静态的，则不会一遍又一遍地下载。与动画图像格式相比，这提供了极大的压缩效果。目前常用的视频格式是H264和WebM。前者是一种公认的视频格式，里面的现代浏览器几乎普遍支持该功能（Opera Mini除外）。而后者主要是使用google的vpx系列编码器。通常，与WebM相比，它具有更高的质量，但文件大小稍大。另一方面，WebM在大多数情况下提供了出色的压缩效果，但代价是质量略低（在网络环境中很少引起注意）和较差的支持（Opera Mini，IE和Safari无法正确处理）。

根据本文中的动画示例，通过将GIF转换为WebM，我们将文件的大小减少了98％（9193 kB至160 kB），而通过转换为MP4(181 kB)。

好的，但是这些是视频文件，GIF的循环性质如何？您可以使用带有自动启动，静音和循环属性的HTML <video>标记轻松提供它，就像下面的示例一样。此外，您可以使用标记为浏览器提供后备功能，而无需您的首选文件格式的支持！