常见图片格式了解

1,847 阅读10分钟

前言

作为一个客户端开发,对于图片格式一直没有一个清晰的了解,这里简单的罗列出各种图片格式的区别,文章中有部分是他人的引用,会在底部放上链接,望轻喷。

概念了解

有损压缩 & 无损压缩

有损压缩(lossy compression)

有损压缩算法是一种数据压缩方法,经过此方法压缩、解压的数据会与原始数据不同但是非常接近。它是与无损数据压缩相对的压缩方法。有损数据压缩又称破坏性资料压缩、有损压缩、有损压缩、不可逆压缩。其原理是借由将次要的信息数据舍弃,牺牲一些质量来减少数据量、提高压缩比。这种方法经常用于压缩多媒体数据(音频、视频、图片)。根据各种格式设计的不同,有损数据压缩都会有代间损失——每次压缩与解压文件都会带来渐进的质量下降。

无损压缩(Lossless Compression)

指数据经过压缩后,信息不受损失,还能完全恢复到压缩前的原样。无损压缩通常用于严格要求“经过压缩、解压缩的数据必须与原始数据一致”的场合。典型的例子包括文字文件、程序可执行文件、程序源代码。有些图片文件格式,例如PNG和GIF,使用的是无损压缩。

索引色 & 直接色

索引色

索引颜色是一种以有限的方式管理数字图像颜色的技术,以节省计算机内存和文件存储,同时加速显示刷新和文件传输。即用一个数字来代表(索引)一种颜色,在存储图片的时候,存储一个数字的组合,同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色,通常是256种颜色,对应到计算机系统中,使用一个字节的数字来索引一种颜色。

索引色常见有1位(即黑白),8位(即灰阶/256色),16位(即高彩),24位(即真彩),30/36/48位(即全彩),更多详细参考该百科

直接色

使用四个数字来代表一种颜色,这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度(即rgba)。现在流行的显示设备可以在这四个维度分别支持256种变化,所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种,为压缩空间使用,有可能只有表达红、绿、蓝的三个数字,每个数字也可能不支持256种变化之多。

位图 & 矢量图:

位图

位图[bitmap],也叫做点阵图,栅格图像,像素图,简单的说,就是最小单位由像素构成的图,缩放会失真。构成位图的最小单位是像素,位图就是由像素阵列的排列来实现其显示效果的,每个像素有自己的颜色信息,在对位图图像进行编辑操作的时候,可操作的对象是每个像素,我们可以改变图像的色相、饱和度、明度,从而改变图像的显示效果。举个例子来说,位图图像就好比在巨大的沙盘上画好的画,当你从远处看的时候,画面细腻多彩,但是当你靠的非常近的时候,你就能看到组成画面的每粒沙子以及每个沙粒单纯的不可变化颜色。

矢量图

矢量图[vector],也叫做向量图,简单的说,就是缩放不失真的图像格式。矢量图是通过多个对象的组合生成的,对其中的每一个对象的纪录方式,都是以数学函数来实现的,也就是说,矢量图实际上并不是象位图那样记录画面上每一点的信息,而是纪录了元素形状及颜色的算法,当你打开一幅矢量图的时候,软件对图形相对应的函数进行运算,将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小,画面上的对象对应的算法是不变的,所以,即使对画面进行倍数相当大的缩放,其显示效果仍然相同[不失真]。举例来说,矢量图就好比画在质量非常好的橡胶膜上的图,不管对橡胶膜怎样的常宽等比成倍拉伸,画面依然清晰,不管你离得多么近去看,也不会看到图形的最小单位。

图片类型

BMP

BMP取自位图BitMaP的缩写,也称为DIB(与设备无关的位图),是一种与显示器无关的位图数字图像文件格式。BMP同时支持索引色和直接色,但是其几乎没有压缩,所以通常图片非常的大,也导致了其几乎没有用武之地,现在除了在Windows操作系统中还比较常见之外,我们几乎看不到它。再加上浏览器的不支持,所以作为web开发,更加少于看到BMP。

这里简单描述一下BMP解析成二进制时的结构:

位置 含义
bmp文件头(bmp file header) 提供文件的格式、大小等信息
位图信息头(bitmap information) 提供图像数据的尺寸、位平面数、压缩方式、颜色索引等信息
调色板(color palette)(如果有的话) 如使用索引来表示图像,调色板就是索引与其对应的颜色的映射表
位图数据(bitmap data) 则图片数据

GIF

全称Graphics Interchange Format,采用LZW压缩算法进行编码。是无损的、采用索引色的、点阵图。GIF是无损的,采用GIF格式保存图片不会降低图片质量。但得益于数据的压缩,GIF格式的图片,其文件大小要远小于BMP格式的图片。文件小,是GIF格式的优点,同时,GIF格式还具有支持动画以及透明的优点。但,GIF格式仅支持8bit的索引色,即在整个图片中,只能存在256种不同的颜色。

简单介绍下GIF使用的LZW压缩算法,详细可参考该文章

LZW编码 (Encoding) 的核心思想其实比较简单,就是把出现过的字符串映射到记号上,这样就可能用较短的编码来表示长的字符串,实现压缩。 比如: 我们可以将ABCDEFG 转成 1 来代表, 这样数据就会减少很多。再加上,LZW编码是自解释 (self-explaining) 的,即映射字典不会写到压缩数据里,他是在解码的过程中还原出编码时用的字典。

JPEG

JPEG是有损的、采用直接色的、点阵图。JPEG也是一种针对照片影像而广泛使用的有损压缩标准方法。JPEG图片格式的设计目标,是在不影响人类可分辨的图片质量的前提下,尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息,也即是进行了有损压缩。JPEG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPEG非常适合用来存储照片,用来表达更生动的图像效果,比如颜色渐变。

JPEG的算法比较复杂, 如果有兴趣可以参考该文章

其大概分为三步:

  1. 把数据分为“重要部分”和“不重要部分”
  2. 滤掉不重要的部分
  3. 保存

PNG

便携式网络图形(英语:Portable Network Graphics,缩写:PNG)是一种无损压缩的位图图形格式,支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。PNG的开发目标是改善并取代GIF作为适合网络传输的格式而不需专利许可,所以被广泛应用于互联网及其他方面上。

PNG-8

PNG-8是无损的、使用索引色的、点阵图。PNG是一种比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。除此之外,PNG-8还支持透明度的调节,而GIF并不支持。 现在,除非需要动画的支持,否则我们没有理由使用GIF而不是PNG-8。当然了,PNG-8本身也是支持动画的,只是浏览器支持得不好,不像GIF那样受到广泛的支持。

PNG-24

PNG-24是PNG的直接色版本。PNG-24是无损的、使用直接色的、点阵图。无损的、使用直接色的点阵图,听起来非常像BMP,是的,从显示效果上来看,PNG-24跟BMP没有不同。PNG-24的优点在于,它压缩了图片的数据,使得同样效果的图片,PNG-24格式的文件大小要比BMP小得多。当然,PNG24的图片还是要比JPEG、GIF、PNG-8大得多。虽然PNG-24的一个很大的目标,是替换JPEG的使用。但一般而言,PNG-24的文件大小是JPEG的五倍之多,而显示效果则通常只能获得一点点提升。所以,只有在你不在乎图片的文件体积,而想要最好的显示效果时,才应该使用PNG-24格式。另外,PNG-24跟PNG-8一样,是支持图片透明度的。

应该说PNG24和PNG32是一样,(The difference between PNG24 and PNG32)一文中指出PNG32中每个像素不仅存储了24位真彩信息还存储了8位alpha通道。所以fw导出PNG32不用选择透明,而ps导出 PNG24时是要勾选透明度的,这时候的PNG24应该就转化成了PNG32了吧。

PNG-32

PNG32也是PNG的直接色版本。其表现与PNG-24差不多。

三者的区别在于:

  • PNG-32每个像素的深度为32bits,其中RGBA四个通道各占8bits。所谓的RGBA四个通道,就是红,绿,蓝,透明 这四种色值各自的大小,都用8bits来表示(0~255)。
  • PNG-24的像素深度为24bits,其中RGB三个通道各占8bits。
  • PNG-8则是使用8位的索引色。

SVG

SVG是很多种矢量图中的一种,它的特点是使用XML来描述图片。借助于前几年XML技术的流行,SVG也流行了很多。使用XML的优点是,任何时候你都可以把它当做一个文本文件来对待,也就是说,你可以非常方便的修改SVG图片,你所需要的只需要一个文本编辑器。如果你是一个前端开发,那你应该对其了解比较多。

图片比较与场景应用

类型 优点 缺点 应用场景
BMP 无损压缩,图质最好,支持索引色和直接色 文件过大 目前仅存于WINDOWS系统
GIF 无损压缩,支持动画及透明 仅支持256种颜色,画质差 需要动画的需求
JPEG 文件小 有损压缩,画质损失 不考虑过好画质且需响应速度较快, 如大背景图
PNG-8 无损压缩, 支持透明 画质中等 应用于大多数中小图且要求画质比较好的需求
SVG 支持放大缩小而不影响画质 编写麻烦,性能差 多应用于ICON之类

一图胜前言

待补充

总结

了解各种图片的格式,有助于我们与设计同事的沟通,与大家共勉。

引用 & 参考

图片格式那么多,哪种更适合你?