优化网页上的gif

 

像很多人一样，我也喜欢gif。我经常在文章中用它们来解释一些功能.比如说，在我的“Recreating the iTunes Library”文章中用到的很多gif，下图是其中之一

但是，问题来了，gif文件很大，上面那张的原始大小就超过了11.4MB(注意:上面的那张不是原图，我压缩了了下，不然真的太大了)。最近，我发现文章里有比较大的gif文件时，加载就会很慢。因为gif的每一帧都用了无损压缩算法，存储成一张图片.这就意味着，在压缩的时候，没有任何图片信息损失，自然形成的gif文件就不小了。

不过我们可以做些事情让gif在网页上更轻盈。

使用HTML5 Video

很棒的是，因为gif的无损压缩算法可以让其转化成如MP4，WEBM的视频格式，这样文件更小。于是，可以用自动播放且循环的HTML5 Video来代替gif文件。

设定[video]标签的如下的属性，可以模拟gif文件的效果，但是文件更轻盈了
- autoplay:自动播放
- loop:无限循环播放
- muted:静音，虽然gif没有声频，但是对于 iOS Safari浏览器自动播放视频是必要的
- playsinline:针对 iOS Safari，不会将视频切换到全屏模式
- poster:当视频下载的时候显示的图片

对于此文上面的gif，我们可以用如下代码

<video autoplay loop muted playsinline poster="original.jpg">  
    <source type="video/webm" src="original.webm">
    <img src="original.gif">
</video>

(我做了个domo,此处我就是我)
现在，gif转换成webm文件之后,这只有1MB!!!
将GIF转换成WebM，可以使用 CloudConvert 。或者使用 Cloudinary,你直接将 .gif 的后缀改成 .webm 即可。

有损耗的优化

HTML5 Video并不能在任何情况都奏效，有时我们不得不使用真实的gif。比如说，当这篇博客帖子作为电子邮件投递的时候，一个真实的GIF文件就必须要被使用。因此，另外一种的优化方案就是让GIF自己变得更轻。

GIF的压缩算法是无损的，但是也有一些有损压缩选项.尽管gif的质量会略有下降，但是整体效果和原图也相差不多。

有很多有损压缩的工具.常用的有gifsicle和giflossy.Gifsicle是通过命令行界面管理GIF文件，Giflossy是其一个分支，提供一个有损压缩的选项(–lossy).

使用giflossy对gif进行有损压缩，可以使用如下命令行

gifsicle -O3 --lossy=80 -o compressed.gif original.gif

“-03”这个选项是告诉gifsicle用几个方法进行优化，从而看哪个最合适.”–lossy=80”这个选项表示有损压缩的程度(数值越大，压缩越厉害).根据具体情况，调整这个值.”-o compressed.gif”这个选项是输出的GIF的文件名.最后是输入的gif的路径

使用这个方式，可以将之前的那张11.41MB减小到6MB，缩减了47%!

小结

两种方式结合使用，我们可以让GIF更轻，而且不会影响效果，超赞~

本文是翻译https://bitsofco.de/optimising-gifs/,水平有限,欢迎指正~