[译]Gif在web上的优化

和很多人一样，我喜欢在自己的站点用gif。可以非常好的突出某些功能。比如下面模仿 itunes的轮播

不过我们不得不面对一个问题，就是gif太大，像上面的图片，大概有 11.4mb。最近自己在阅读很多别人的文章时候，也发现，由于自己文章存在gif导致网站加载过慢。gif的使用了无损的算法，每一帧都是一张gif图片，这意味着在图片压缩时候，不会存在信息丢失，这也就是为什么gif这么大。

为了解决这样的问题，我们需要做一些事情。

感觉惊喜的是采用视频的格式mp4活着webM都所用的文件大小都小于使用无损压缩的 gif正因如此，一个解决方法就是，替换掉gif采用mp4活着webm格式的视频，使用自动播放和循环，这样让人会有gif的样子。

通过给video设置一些属性，我们可以让video去模拟gif播放的效果：

如同下面这个 “视频” 居然 1m不到 😂

将gif 转换成webm你可以到CloudConvert进行转换。如果你使用cloudinary你只需要改变文件的类型由.gif 到 .webm就好。

使用video的话，如果你觉得麻烦的话，那我们只能坚持使用gif了。那么我们还有一些手段让它更加具有性价比。

如同上文提到的，gif压缩的是无损压缩，当然这里有一些选项可以让它完成有损压缩。尽管这个可能听起来会让人觉得会有明显的gif质量下降，但是如果压缩做的好的，实际上这些损失是让人难以察觉出来的。

其实我们可以找到很多有损压缩gif的工具。其中自己推荐两款;

Gifsicle是一个通过命令行进行图片压缩的工具,giflossy是基于Gifsicle的，只是多了一个参数选项(-- lossy)

基本的命令如下：
gifsicle -O3 --lossy=80 -o compressed.gif original.gif

-03 表示gifsicle 尝试多种方法来进行图片优化，从而找到最合适的一种。

--lossy=80 表示你希望图片压缩的损失多少

-o compressed.gif 输出的文件名称

最后指定需要压缩的图片地址

下面这张图就是压缩处理后的效果，我们从11.4M 压缩到了 6Mb了，大约降低了47%。

希望这两种方式可以让你在使用gif时候不用再为太大而烦恼了。