本期我们分享主题是：图片

我们每天都会和图片打交道，如果对各类图片的属性了然于胸，那将会使我们的工作事半功倍。我们今天就围绕着图片聊聊这些常用以及小众的图片格式吧。本文未涉及图片格式或内容有误，欢迎补充指正。

BMP 【静态】

扩展名：bmp

类型：无损压缩

全称：位图（Bitmap）

年份：1985年

BMP是Windows操作系统中的标准图像文件格式，可以分成两类：设备相关位图（DDB）和设备无关位图（DIB），使用非常广泛。BMP文件的图像模式可选1、4、8、16、24、32位，支持RGB、索引颜色、灰度和位图颜色模式，但不支持Alpha通道。BMP在存储数据时，图像的扫描方式是按从左到右、从下到上的顺序。其工作方式是按照每个像素来记录图片，如果图片的尺寸确定了，那么文件体积基本也就确定了。所以，当图片的尺寸很大时，文件体积也会非常的大。现在基本上很少看到了，只有在一些行业内做皮肤和资源的时候会用到。

Life人生：BMP背景是可以透明的，早期做皮肤时，想要实现图片背景是透明的效果，该怎么去实现呢？这时就体现出来咱们劳动人民的智慧了，把图片背景设为RGB（255,0,255）洋红色，然后再把这个颜色抽离出去，就实现了背景是透明的效果了。因为没有Alpha通道，透明度只能设为透明或不透明两种情况，这样在做异形皮肤的转角时，就会出现锯齿，看起来会比较粗糙。但以当时的技术而言，已经非常不错了。

——————————————————————————————————

GIF【静态|动态】

扩展名：gif

类型：有损压缩

全称：图像互换格式（Graphics Interchange Format）

年份：1987年

GIF自1987年由CompuServe公司引入后，因体积小、成像相对清晰，特别适合于初期慢速的互联网。GIF主要分为两个版本，即GIF 89a和GIF 87a，在89a版本中提供了对透明色和多帧动画的支持。近几年表情包的诞生，着实又让GIF火了一把，但边缘锯齿和最高只能支持到256色，限制了动画不能有太多的颜色表现。另外还有播放帧数不一样的问题，在PS或制作GIF动画的软件中设置好了每一帧的时长，但导出后发现在各个平台播放的帧时长是不一样的，达不到原来设置好的动画效果。而GIF到现在没有被取代，也正是因为在互联网上的存量太过庞大。

Life人生：网上的一些视频转GIF图片中的噪点，其实是GIF的发色数不够用导致的。制作表情时给图片添加描边可有效解决边缘锯齿问题。尽量少的使用对比强烈的颜色和减少动画，会使文件体积更小。

——————————————————————————————————

JPEG【静态】

扩展名：jpg/jpeg

类型：有损压缩

全称：联合图像专家组（Joint Photographic Experts Group）

年份：1992年

JPEG是基于离散余弦的图像压缩标准，也是第一个国际图像压缩标准。由于压缩后保存的文件很小（可设置的压缩比例从2:1 到100:1可选），因此在互联网的存量非常的大，即使若干年后，出现很多的后起之秀，仍然无法取代其地位。但由于是有损压缩图片格式，拍摄高清大图时，如果存储品质过低会丢失图像数据，严重甚至会引起照片失真。在PS中存储JPEG时，会提供12个品质压缩级别，经过多次测试，采用第8品质压缩是存储空间与图像质量兼得的最佳比例。

Life人生：同一个尺寸的图片，画面越复杂，颜色分布越杂乱无规律，用JPEG存储的图片要比PNG体积小。

——————————————————————————————————

PNG【静态】

扩展名：png

类型：无损压缩

全称：便携式网络图形（Portable Network Graphics）

年份：1996年

目前设计师接触到最多的格式之一了，工作中输出设计小样、切图都会用到。PNG格式有8位、24位、32位三种形式，其中8位PNG支持两种不同的透明形式（索引透明和Alpha透明），24位PNG不支持透明，32位PNG在24位基础上增加了8位透明通道，因此可以展现0-255之间的透明程度。PNG-8和PNG-24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。

Life人生：在存储用色简单的按钮，优先用到PNG-8，因为存出来的文件要比GIF体积更小。另外，同一尺寸的图片，画面简单，有大面积色块填充，比如UI的界面图，一行或一列都是同一个颜色值填充，在这种情况下存储为PNG图片要比JPEG体积小。

——————————————————————————————————

JPEG2000【静态】

扩展名：jp2

类型：有损压缩|无损压缩

全称：联合图像专家组（Joint Photographic Experts Group）

年份：2000年

JPEG 2000是基于小波变换的图像压缩标准，做为JPEG的全新版本优化了算法，不再像之前版本那样保存的图片会有明显马赛克的状况，被赋予了未来会取代JPEG做为下一代的图像压缩标准的使命。JPEG2000标准本身是没有授权费用的，但是，因为编码核心部分的各种算法被人大量注册专利，存在版权和专利的风险。这也许是目前JPEG2000技术没有得到广泛应用的原因之一吧。顺便提一下现阶段技术/效果最优的格式JPEG XR仍然没有获得更好的流行，看来推行新的图像格式除了技术上卓越之外，更多的开源实现和市场推广也是非常关键的。

Life人生：JPEG2000在某些领域使用率还是很高的，比如有：数字影院(DCI规范要求Motion JPEG-2000)和网络地图。

——————————————————————————————————

SVG【静态|动态交互】

扩展名：svg

类型：二维矢量图形

全称：可缩放矢量图形（Scalable Vector Graphics）

年份：2001年

SVG由W3C制定，是一个开放标准。用于描述二维矢量的图形。SVG严格遵从了XML语法，并用文本格式的描述性语言来描述图像内容，我们可以通过浏览器的方式打开此类文件。如果用文本编辑器打开一个SVG图形，我们就会发现它实际上就是由一串XML代码构成的。正因如此，浏览器可以通过对SVG内容中的文本进行索引来达到精确搜索图片的效果。不仅如此，SVG还可以在不失真情况下进行任意的缩放，文件体积也较小。与传统Web字体不同的是，SVG可以使用多种颜色、渐变甚至复杂的过滤器来处理文字，因此SVG也适用于Logo、图标、按钮及网页背景的应用。

Life人生：《如何把图标库封装成SVG字体并实现团队协同合作》这篇文章中讲解了如何制作SVG文件，感兴趣的童鞋可以前往：http://www.ui.cn/detail/340158.html

另附上在网页中两种关联SVG图形的方式：

1、内联方式：像HTML中的其它元素一样使用，在此基础上可以编写HTML，Javas cript和SVG的交互应用。

2、外联方式：通过元素，在HTML导入外部SVG文件，缺点是无法编写与SVG元素进行交互的脚本。

——————————————————————————————————

APNG【动态】

扩展名：png

类型：无损压缩

全称：APNG（Animated Portable Network Graphics）

年份：2004年

2004年APNG由Mozilla公司创立，其格式是PNG的位图动画扩展，遗憾的是未获PNG组织官方认可。其扩展方法类似GIF 89a，但仍对原版PNG保持向下兼容。APNG第1帧为标准PNG图像，剩余的动画和帧速等数据放在PNG扩展数据块，即便只支持原版PNG的软件也会正确显示第1帧。在浏览器中目前除了IE不支持以外，已经有很多浏览器开始支持这一格式，比如：Firefox、Opera 、Safari、Chrome、傲游浏览器等，在移动端中IOS和Android（需要安装一个插件）均支持此格式。与GIF相比之下APNG可以完美保持透明度而不产生边缘锯齿，虽然APNG有压倒性的优势，但体积与兼容性还是未能替代GIF在其互联网的地位。

Life人生：目前制作APNG格式需要第三方工具来辅助实现，比如APNG Anime Maker。贴一个APNG资源网站：http://littlesvr.ca/apng/

——————————————————————————————————

WebP【静态|动态】

扩展名：webp

类型：有损压缩|无损压缩

全称：WebP

年份：2010年

WebP由Google在2010年发布，目标是减少文件大小，达到和JEPG格式相同的图片质量，希望能够减少图片在网络上的发送时间。2011年11月8日，Google开始让WebP支持无损压缩和透明色的功能。目前Google、Facebook、腾讯、阿里、美团的等国内外互联网公司广泛应用了WebP，超过70%的浏览器已经支持WebP，Safari和Foxmail也在进行支持WebP的测试。WebP 的优势体现在于具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG上的转化效果均表现不俗。被认为可以取代JPEG（有损压缩）、PNG（无损压缩）、GIF（动态有损压缩），并且在压缩率上全面超越了这三种常用格式。

Life人生：我在公司新产品的Android平台上推广并应用了此格式文件，替换了原来以PNG为主的输出文件，优化后图片体积平均减少70%。感兴趣的童鞋可以到Sketch导出WebP与PNG对比一下。

——————————————————————————————————

FLIF【静态】

扩展名：flif

类型：无损压缩

全称：免费无损图片格式（Free Lossless Image Format）

年份：2015年

比利时鲁汶大学的博士后研究员Jon Sneyers宣布了一种新的无损图像格式，其最大优势是能够在极大地压缩图片文件的存储尺寸，同时保持无损的画质。支持渐进交错（progressive interlacing），下载一小部分无损压缩图像文件后能解码出效果不错的完整有损图像。发明者称按照中位平均水平计算，FLIF格式的压缩性能比市面上现行的图片格式高12%左右。FLIF格式在无损图片压缩性能上和WebP、PNG、JPEG 2000等相比都有不同程度的优势。用FLIF压缩的照片，文件尺寸比WebP小14%，比PNG小46%，比JPEG XR小74%。虽然FLIF是一种无损的图片存储格式，但它同样支持渐进式解码（Progressive Decoding），因此对于小存储空间、低带宽的使用场景来说适配性更好，图片随加载随显示，不需要整张全部加载完才能显示，也不会导致图片失真。不仅如此，它还对于响应式网页设计有着很好的适配性，非常适合用于网页设计。最重要的是，FLIF已经开源，没有任何专利和授权使用费。

Life人生：FLIF格式即适合存储线性类型图片，又适合存储摄影照片，重要的是文件体积比PNG、JPEG都小。

——————————————————————————————————

TPG【静态|动态】

扩展名：tpg

类型：有损压缩

全称：图片编码格式（Tiny Portable Graphics）

年份：2017年

TPG是由腾讯公司发布的，此项专利技术由腾讯音视频实验室基于AVS2内核自主研发完成。通过目前已经公开的测试数据来看，在同等质量的前提下，TPG与JPG/JPEG、PNG、GIF、WebP等不同图片格式进行对比，TPG的文件体积最小，位居第一：TPG对PNG小50%以上，比GIF小90%以上，对JPG/JPEG格式图片（采用Libjpeg-Turbo编码）可以小40%以上，对比采用Guetzli编码的JPG/JPEG格式则能够小41.7%。相对Google推出的WebP格式，文件体积可以减少近30%。知乎有人评价TPG模仿了BPG的思路，就好象是换了件衣服的BPG。无论如何，TPG相对于其它图片格式优势还是有目共睹的。

Life人生：此格式目前不是开源的，在github上找不到，仅应用于腾讯自家产品。

——————————————————————————————————

在分享进入尾声之时，想起了以前使用过的一款看图软件，干脆拿出来一同分享了吧。记得以前装windows系统的软件清单里，不得不提及的一款老牌看图软件【ACDSee】，有兴趣的童鞋可以搜索一下。当时这款软件是相当普及的，到什么程度呢？随手一张软件工具光盘就能找得到。前期这款软件还是很不错的，轻量级且功能专一，后来随着版本迭代，软件体积越来越大，功能增多、响应速度变慢，也就从此列入了众多产品‘大而全’的行列。

嗯，今天的分享就到这里吧，不知道各位童鞋工作中常用的图形格式有哪些呢？欢迎到下方的评论区留言分享。

如果本文对你有所帮助，请为接下来的分享点赞蓄能！

我是Life人生，再会。