原文地址:https://bitsofco.de/optimising-gifs/

跟很多人一样,我也很喜欢GIF。我喜欢在我的文章里使用它们来说明功能。就像在我 “Recreating the iTunes Library” 这篇文章里的这个GIF一样。

Example GIF Original File

然而,在文章里使用GIF实在太_重_了,上面的这个GIF就占了11.4MB(注:上面这张图不是原图,我无法将原图加载到页面上。)最近,我发现我的一些使用了很大的GIF的文章加载速度往往很慢。原因是使用了无损压缩算法,让一个GIF的每帧都作为一张GIF图片存储。这意味着,通过无损压缩,,图片的质量没有任何损耗,这也是为什么GIF这么大的原因了。

为了解决GIF在网页上的性能问题,我们可以采取下列的一些措施。

使用 HTML5 Video

令人惊讶的是,使用了无损压缩算法的GIF相当于未经优化处理,以至于例如MP4或者WebM的视频格式提供了比GIF更小的文件尺寸。因此,一个解决GIF性能问题的方案就是不去使用GIF,并且用自动循环播放的HTML5 Video来代替它。

通过使用<video>元素中的确定的属性,我们可以模仿GIF的行为,而且文件占用的存储空间更小。我们需要这些属性:

  • autoplay :视频在就绪后马上播放。
  • loop:无限循环播放该视频
  • muted:当设置该属性后,它规定视频的音频输出应该被静音
  • playsinline:在iOS Safari浏览器中确保视频不会被调到全屏模式。
  • poster:规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。

我们可以使用下面的这个video元素来代替上文介绍中的GIF:

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

它给了我们一个非常小的视频,只有1MB!

我们可以使用CloudConvert来将GIF转换成 WebM 。或者,如果你使用Cloudinary,你只需要将.gif的文件后缀改成.webm就可以得到这个视频格式了。

有损优化

在一些情况下,因为 HTML5 Video 不能作用于任何地方,我们不得不在那儿使用真正的GIF。例如,当一个博客作为HTML 邮件传递时,就必须使用真正的GIF了。所以,我们不得不对GIF自身做一些优化来提高性能。

正如我提到的那样,GIF压缩算法是无损的。然而,也有有损压缩的选项。虽然听起来我们将得到一个低质量的GIF,但是有损压缩做得好的话也不会明显的降低图像的质量。

有许多我们可以使用的有损压缩GIF的工具,譬如 gifsiclegiflossy 就是很流行的用来优化 GIF 的工具 . Gifsicle 是一个用命令行界面来操纵GIF文件的工具, giflossy 是 gifsicle 的一个分支,提供有损压缩的选项(--lossy

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

-03选项的作用是告诉 gifsicle 尝试去找到最合适的优化方法。--lossy=80选项指定文件要有损压缩多少。你可以根据需要调整这个数字。-o compressed.gif选项指定压缩后输出的 GIF 的命名。最后,我们要写上源 GIF 的地址。

使用上面的这个命令压缩上文提到的 GIF 的例子,我们将11.4MB 的GIF 压缩到 6MB ,减少了47%的文件大小!

Compressed GIF

结合上述的两种方法,我们可以在某种程度上使用GIF,并且不会急剧的降低性能。