快速解决gif图的锯齿问题怎么做(gif有锯齿)-东辰网

快速解决gif图的锯齿问题怎么做(gif有锯齿)

本文主要介绍如何快速解决gif的锯齿问题(gif有)，下面跟着东辰网详细了解一下吧。

腾讯的一个同学设计的动态表情上线后，发现锯齿问题特别严重。我向工程师征求意见。前端哥拿出自己的研究神器，立马解决了问题。而且，可以批量做。它获得了很多好评，现在知道还来得及！

设计师:我设计的动态表情上线后周围怎么这么多白噪音！

所有动态表情地址:#15

前端:GIF会有锯齿，与我无关。

设计师:It太丑了。阿伦难道你不是全能的前端吗？我用ps分分钟解决这个问题！

前端:...事实上，很久以前...

2004年，mozilla社区也意识到了这个问题，于是提出了新的图片格式——apng。

APNG也叫PNG(动画PNG。开始帧是标准的PNG图像，其余的动画和帧率数据放在PNG扩展数据块中，所以只支持原PNG的软件会正确显示开始帧。更多信息，请参见:wikip测试，你会发现有的APNG比GIF还大，如下图:

通过大量图片的对比可以发现，APNG平均比GIF略大(3%左)。更多请查看:。

产品:it只是大了一点，这也很好！

前端:有很多，如果APNG能比GIF小，用户体验会更好。让让我们看看APNG的原理:

提前烧脑，做好准备。

APNG对动态图片的处理算法类似于GIF，可以将一组大小相同的PNG图片组合成一张APNG图片，每张原始PNG图片变成APNG图片的每一帧，每一帧都会按照约定的规则将前一帧的变化区域的数据记录到相应的数据块中，并将变化区域的坐标和大小保存在图片中(如图1所)。解析时，应用会根据每一帧的坐标和大小，用变化后的区域替换前一帧的对应区域，以恢复当前帧，从而生成。成动态画面，并达到压缩效果。Itit’这么说有点拐弯抹角。直接看下图会更清楚:

由于相邻帧共享相同的像素信息，可以有效节省动态图片的体积。

因为我们生成的APNG的图片是PNG24(保证Alpha)，而且和GIF相比，PNG24在尺寸上没有优势，所以生成的APNG自然也没有优势。

It只是PNG24比较大，所以它可以先有损压缩PNG24，然后转换成APNG。_最后我这样折腾出来，才发现APNG比以前大了(如下)！——我知道了，眼泪都要掉下来了！请查:isparta.github？对比。

经过仔细考虑，因为我们有损压缩PNG24，图像信息重新排列，与相邻帧的相同区域不同，自然输出图像尺寸会更大。

所以我们只能压缩与相邻帧不同的区域，如下图所示:

这样优化后，生成的APNG大小平均会比GIF小30%左右，还能解决锯齿问题(如下):

点击？isparta.github.io？并在)写解码逻辑。目前，PC客户端已经支持APNG。

HTML5应用有成熟的开源框架？APNG。我们在最近的礼品及赠品项目，并取得了良好的动画体验(如下图所):

产品:如何生成APNG？有很多图片要转换怎么办？

前端:唐这个不用担心，因为业界暂时没有APNG批量有损压缩工具，所以我们开发了一个iSparta图像转换工具，它有以下特点:——。

1、批量处理

根据规则文件和文件夹的批量转换。具体操作请见(isparta.github.i)。

2、APNG有损压缩

直接集成PNG的有损压缩，可以最小化文件大小(一般输出文件比GIF小30%左)。

3.跨平台

支持Windows和Mac系统。

可以点击？下载体验。目前该工具在GitHub(GitHub.co)上也是开源的。关于工具的建议和bug可以反馈到Issues(.c)，欢迎大家的加入。

一切都不是一成不变的，有时候只要跳出框框，认真一点，世界就能变得更好！

再回头看，美丽的影子一如既往的好…