ribbon image search rewind fast-forward speech-bubble pie-graph star

[译]Gif在web上的优化

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

@ireaderinokun

和很多人一样,我喜欢在自己的站点用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自动播放还是需要设置这个属性

  • playsinline ios 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时候不用再为太大而烦恼了。

You Can Speak "Hi" to Me in Those Ways