原文地址： https://bitsofco.de/optimising-gifs/
和很多人一样，我喜欢在自己的站点用gif。可以非常好的突出某些功能。比如下面模仿 itunes的轮播
不过我们不得不面对一个问题，就是gif太大，像上面的图片，大概有 11.4mb。最近自己在阅读很多别人的文章时候，也发现，由于自己文章存在gif导致网站加载过慢。gif的使用了无损的算法，每一帧都是一张gif图片，这意味着在图片压缩时候，不会存在信息丢失，这也就是为什么gif这么大。
为了解决这样的问题，我们需要做一些事情。
使用html5 video
感觉惊喜的是采用视频的格式mp4活着webM都所用的文件大小都小于使用无损压缩的 gif正因如此，一个解决方法就是，替换掉gif采用mp4活着webm格式的视频，使用自动播放和循环，这样让人会有gif的样子。
通过给video设置一些属性，我们可以让video去模拟gif播放的效果：
-
autoplay自动播放，用户无需点击 -
loop无限循环播放 -
muted尽管gif没有音轨，但是ios自动播放还是需要设置这个属性 -
playsinlineios safari上确保视频不会全屏 -
poster制定视频下载时候的显示的图片
如同下面这个 “视频” 居然 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时候不用再为太大而烦恼了。