网站动图的优化

动效对于页面状态的转移是很必要的,大部分时候的动效可以用css+js来实现,不过有些时候,因为产品上的需要,就需要使用按帧播放的动画来实现。其中比较常见的就是gif动图。

就比如我这边最近在项目里面用到的一个动图,原始图如下:

图片体积1.4MB,这么大的图片,肯定是不适合用来做动图。所以需要针对这张图做一些处理。

这里就要说到一个压缩gif图很专业的网站ezgif

经过裁剪,隔帧抽取,糢糊三步之后,最终的动图如下:

184kb

完成上述三步之后,出来的动图是184kb,基本上已经无法优化了。

不过如果网站的条件允许的话,还是有方法优化的。这就是gif to video

gif图本质上就是一个帧动画,里面存储了N张图片,然后按一定的顺序播放。它的存储是比较死板的,哪怕前后两帧的图片非常相似甚至是一模一样,它都会按两张图片来存储。在video里面就不一样了,视频格式会对所存储的帧画面做各种各样的优化。

还是以上面的动图为例,把最终效果的gif图转换为mp4格式:

转换后的视频体积是79kb,比gif图少了58.66%,压缩效果还是很明显的