GIF vs APNG vs WebP

再转一个我在知乎的回答

简介

GIF 是一个非常古老的格式,1987 年诞生,最后一个版本是 1989 年。(这就是为什么 GIF 文件头的 magic number 是 GIF89a)

APNG 相对新一些,是 Mozilla 在 2004 年推出的,十几年的科技进步是不容小觑的,所以 APNG相对于 GIF 的优势十分明显,后面会分析。APNG 格式是 PNG 的扩展,第一帧储存方式和普通的 PNG 一样在 IDAT 区段中,APNG 只是新增了三种区段,所以如果一个软件只支持 PNG 而不支持 APNG 的话,依旧可以显示出图片的第一帧,只是不能动罢了。

APNG 新增的三种区段分别为:

  • acTL (animation control) 用来存放帧数和播放次数,整个文件只有一个区段
  • fcTL (frame control) 用来存放每一帧的高、宽、位置、延时等信息,每一帧一个区段
  • fdAT (frame data) 用来存放除了第一帧以外后面每一帧的图片数据,采用 Deflate 压缩,每一帧一个区段

这里稍微提一下 WebP,Google 在 2010 年推出的全部通吃的图片格式,为什么叫全部通吃呢?因为他既可以有损(替代 JPEG)也可以无损(替代 PNG),还可以动(替代 GIF),并且在压缩率上全面超越了这三种常用的格式。

压缩率

GIF 采用的是 LZW,而 APNG 采用的是 Deflate,再加上 APNG 继承了 PNG 的 filter,利用相邻像素的相似性使压缩率大大提高,详见浅谈PNG无损优化

就以下面这个 Wikipedia 页面的 GIF 为例吧

Rotating earth (large)

原 GIF 文件大小为 1.36 MB,但是一般的 GIF encoder 都不会拼命的去优化文件大小。

如果让 gifsicle 利用各种奇淫技巧进行优化,可以将文件无损的压缩到 978 KB

gifsicle -O3 Rotating_earth_(large).gif -o Rotating_earth_(large)_gifsicle.gif

而随随便便转换一个 APNG 才 826 KB 而已

gif2apng Rotating_earth_(large).gif

如果不在乎压缩时间的话,使用奇淫技巧(zopfli)来压缩 APNG,还可进一步压缩到 811 KB

gif2apng -z2 Rotating_earth_(large).gif

而如果无损转换成 WebP 的话,只有 767 KB

gif2webp -min_size Rotating_earth_(large).gif -o Rotating_earth_(large).webp

如果允许有损的话(肉眼看不出区别),WebP 只有 199 KB!!!

gif2webp -min_size -lossy Rotating_earth_(large).gif -o Rotating_earth_(large)_mixed.webp

这里使用了 -lossy 来压缩有损,实际上 WebP 还支持 -mixed,可以每一帧根据压缩体积单独选择有损或者无损,但是由于这个图片更适合有损所以这里没有用 -mixed。

将上面的数据做了个图表,大概是这样子的(由于样本数仅为 1,本测试及其不科学,结果仅供参考)

 

颜色

GIF 每个像素只有 8 bit,也就是说只有 256 种颜色,于是很多人误以为 GIF 不支持 24 bit RGB,但实际上,GIF 的限制是每一帧最多只能有 256 种颜色,但是每种颜色可以是 24 bit 的。不过即使是这样,256 种颜色还是太少了,这就导致了 GIF 的画质都比较差。

而 APNG 和 WebP 则完全没有这方面的限制。

透明

GIF 虽然也支持透明,但是他只支持将某个颜色标记成透明,也就是说他不支持半透明,只支持完全透明或者完全不透明。如果把一个边缘是半透明的图片转换成 GIF,就会出现另一个答案中提到的杂边问题。

而 APNG 和 WebP 都支持 8 bit alpha channel,透明度可以有 256 级。

兼容性

这可能是 GIF 唯一的优势了吧。

几乎所有的浏览器都支持 GIF,而支持 APNG 的浏览器有 Chrome、Firefox、Safari 和 Opera,支持 WebP 的有 Chrome、Firefox、Edge 和 Opera,据说 Safari 也在测试 WebP 的支持。至于 IE 嘛,呵呵,还是换浏览器吧。

您可能还喜欢...

29 条回复

  1. madli说道:
    Google Chrome 56.0.2924.87 Google Chrome 56.0.2924.87 Windows 7 x64 Edition Windows 7 x64 Edition

    换浏览器笑死

  2. shen说道:
    Google Chrome 50.0.2661.102 Google Chrome 50.0.2661.102 Windows 10 x64 Edition Windows 10 x64 Edition

    老哥怎么不搞精简绿色软件了,迅雷好久没更新了

  3. 烟灰说道:
    Google Chrome 55.0.2883.103 Google Chrome 55.0.2883.103 Windows 10 x64 Edition Windows 10 x64 Edition

    话说,博主被墙了么?一直打不开,开了SS,瞬间打开

  4. Lee说道:
    Firefox 50.0 Firefox 50.0 Windows 7 x64 Edition Windows 7 x64 Edition

    为什么PNG组织不认可APNG,是因为和MNG竞争的原因吗?
    另外刚发现,我一直用的MoreMovieRatings,竟然是博主写的。都不知道……

  5. DD说道:
    Google Chrome 56.0.2924.87 Google Chrome 56.0.2924.87 Windows 10 x64 Edition Windows 10 x64 Edition

    老哥怎么不搞精简绿色软件了,迅雷好久没更新了

  6. leoxxx说道:
    Google Chrome 45.0.2454.101 Google Chrome 45.0.2454.101 Windows XP Windows XP

    CHROME有个APNG的插件。大部份APNG能正常查看,部份APNG无法正常查看(记得好像是本地的看不了)。IE啥的真心渣渣。只支持GIF也就算了,但GIF还是限速的,快于0.1秒/帧就无法显示效果。
    还有你说的GIF 24位是靠映射的吧。反正我现在要生成色彩好一点GIF都有PS做,其它软件(比如ULEAD)做出来的真是不能看,那颜色太差了。

  7. weapon张说道:
    Maxthon 5.1.3.1000 Maxthon 5.1.3.1000 Windows XP Windows XP

    现在火狐新版的启动速度好快,Opera好久没用了,新版的Opera就是套Blink和Chromium的壳而已,还弄出个NEX格式的扩展,其实就是CRX,这偷懒偷也是没谁了,Opera12还支持的APNG在Opera30多的时候因为用的Chromium反而不支持了,现在Chrome支持了Opera才支持,Opera还分裂了一个V开头的Vivaldi,这名字我连记都记不住.

  8. weapon张说道:
    Maxthon 5.1.3.1000 Maxthon 5.1.3.1000 Windows XP Windows XP

    文章的最后一段话说出了为什么IE和EDGE是浏览器下载工具的原因

  9. user说道:
    Google Chrome 62.0.3202.94 Google Chrome 62.0.3202.94 Mac OS X  10.12.6 Mac OS X 10.12.6

    wo juede . hai ke yi

  10. 春熙路说道:
    Google Chrome 55.0.2883.87 Google Chrome 55.0.2883.87 Windows 7 Windows 7

    就来看看

  11. Google Chrome 55.0.2883.87 Google Chrome 55.0.2883.87 Windows 10 x64 Edition Windows 10 x64 Edition

    be5e74556d5fbc8f4923b8e289afef4a这什么意思啊

  12. cht说道:
    Internet Explorer 5.5 Internet Explorer 5.5 Windows 95 Windows 95

    路过bd

  13. BA说道:
    Google Chrome 49.0.2623.112 Google Chrome 49.0.2623.112 Windows XP Windows XP

    有没有本地支持webp格式图片软件呢

  14. ShunYea说道:
    Firefox 63.0 Firefox 63.0 Windows 7 x64 Edition Windows 7 x64 Edition

    左边的zd423的站点网址都变啦,现在是423down了,老大。

  15. 文娱帝国说道:
    Firefox 61.0 Firefox 61.0 Windows 7 x64 Edition Windows 7 x64 Edition

    写的很好,支持下

  16. Didala说道:
    Firefox 67.0 Firefox 67.0 Windows 7 x64 Edition Windows 7 x64 Edition

    古老。。

  17. TommyThela说道:
    Google Chrome 131.0.0.0 Google Chrome 131.0.0.0 Windows 10 x64 Edition Windows 10 x64 Edition

    hi

  18. Williamnub说道:
    Google Chrome 131.0.0.0 Google Chrome 131.0.0.0 Windows 10 x64 Edition Windows 10 x64 Edition

    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по доступным тарифам. Дипломы изготавливаются на фирменных бланках Заказать диплом любого университета fastdiploms.com

  19. Google Chrome 129.0.0.0 Google Chrome 129.0.0.0 Windows 10 x64 Edition Windows 10 x64 Edition

    где купить узи аппарат http://www.kupit-uzi-apparat14.ru/ .

  20. Dnrtfqd说道:
    Google Chrome 129.0.0.0 Google Chrome 129.0.0.0 Windows 10 x64 Edition Windows 10 x64 Edition

    Мы изготавливаем дипломы любой профессии по приятным ценам. Мы готовы предложить документы ВУЗов, которые находятся в любом регионе Российской Федерации. Документы печатаются на бумаге самого высшего качества. Это позволяет делать настоящие дипломы, не отличимые от оригиналов. gurgaonplaygirls.copiny.com/question/details/id/1083020

  21. 1win_vgsa说道:
    Google Chrome 103.0.0.0 Google Chrome 103.0.0.0 Windows 7 x64 Edition Windows 7 x64 Edition

    1win bet apk https://1win1034.top .

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注