当前位置:首页>ps入门教程>ps基础教程>技巧教程>教程内容

快速解决GIF图的锯齿问题(2)

来源:isux.tencent 作者:阿杰 学习:26687人次

产品:只是大一点点而已,那也很不错了呀!

前端:却多嘛得,如果APNG可以比GIF还要小,这样用户体验不就更好了。先看看APNG的原理:

前方烧脑,做好准备。

APNG对于动态图片的处理算法类似GIF,可以将一组大小相同的PNG图片合并为一张APNG图片,原来的每一张PNG图片变成APNG图片的每一帧,并且每一帧会按照约定的规则来记录与前一帧变化区域的数据到相应数据块,并保存变化区域在图片中的坐标与大小(如图一所示)。解析的时候,应用程序会根据每一帧变化区域的坐标和大小,将变化区域替换前一帧的相应区域来还原当前帧,从而生成动态图片,并达到压缩效果。说起来有点绕口,直接看下面的图会更清晰些:

快速解决GIF图的锯齿问题

由于邻近帧间共用了相同的像素信息,所以可以有效节省动态图片的体积。

而由于我们生成APNG的图片是PNG24(为了保证Alpha通道),而PNG24与GIF相比,体积上本来就没有优势,所以生成的APNG自然也没有优势。

不就是PNG24比较大嘛,那就将PNG24先有损压缩(pngquant),再转换为APNG不就可以了,喜大普奔呀!^_^最后按这种方式折腾出来了,却发现APNG比之前更大了(如下图)!- -,知道真相的我眼泪掉下来呀!请查看:isparta.github?的对比。

快速解决GIF图的锯齿问题

仔细想了一下,因为我们对PNG24进行了有损压缩,造成图片信息的重新排布,本来跟临近帧相同的区域不同了,自然输出的图片大小也会比较大。

所以我们只能对跟临近帧不同的区域进行压缩,具体过程见下图:

快速解决GIF图的锯齿问题

按照这种方式优化以后,生成的APNG的大小平均会比GIF小30%左右,而且也能解决锯齿问题(如下图):

快速解决GIF图的锯齿问题

点击?isparta.github.io?并在chrome下打开可以有更直观的感受。

设计:虽然不知道你在说什么,但是感觉很厉害的样子!

前端:其实简单来说,就是APNG比GIF小30%左右,而且没有锯齿。

设计:那现在我们可以使用么?会有什么限制么?

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
啊啊啊2023-03-27 05:33
你!是!我的!神!这篇文章我太爱看了。我怀着崇敬的心情点开了iS的下载地址,我试试微信可不可以用
冷雨595在搜狐2017-09-19 10:10
老看不懂
糖听波ken2017-05-28 02:19
看了一天教程了
塞外庄原2017-05-28 06:32
不明白
貴柔狼2017-05-28 01:11
学习

关注大神微博加入>>

网友求助,请回答!