一张图片可以储存为多种格式,为什么有的几十KB,有的几百MB,有的静止不动,有的是好几个画面循环播放?在项目开发的过程中经常会读取或保存图像文件,不同类型的图像特点不同,适用的范围也不同,简要介绍BMP、GIF、TIFF、PNG、JPG和SVG格式图像的特点。
1、BMP格式图像BMP是英文Bitmap(位图)的简写,它是Windows操作系统中的标准图像文件格式,能够被多种Windows应用程序所支持。随着Windows操作系统的流行与丰富的Windows应用程序的开发,BMP位图格式理所当然地被广泛应用。这种格式的特点是包含的图像信息较丰富,几乎不进行压缩,但由此导致了它与生俱生来的缺点是占用磁盘空间过大。所以,目前BMP在单机上比较流行。
BMP(Bitmap-File)图形文件是Windows采用的图形文件格式,在Windows环境下运行的所有图象处理软件都支持BMP图象文件格式。Windows系统内部各图像绘制操作都是以BMP为基础的。BMP位图文件默认的文件拓展名是BMP或者bmp(有时它也会以.DIB或.RLE作扩展名)
虽然同时支持索引色和直接色是一个优点,但是太大的文件格式格式导致它几乎没有用武之地,现在除了在Windows操作系统中还比较常见之外,我们几乎看不到它。在同样的图片质量下,BMP格式的图片文件大小是GIF格式的很多倍。
2、GIF格式图像GIF是Graphics Interchange Format的简写,它是图形转换格式,采用LZW压缩算法进行编码,用于以超文本标志语言(Hypertext Markup Language)方式显示索引彩色图像,在因特网和其他在线服务系统上得到广泛应用。GIF是一种公用的图像文件格式标准,版权归Compu Serve公司所有。
GIF是无损的,采用GIF格式保存图片不会降低图片质量。但得益于数据的压缩,GIF格式的图片,其文件大小要远小于BMP格式的图片。文件小,是GIF格式的优点,同时,GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8Bit的索引色,即在整个图片中,只能存在256种不同的颜色。
GIF可以被PC和Mactiontosh等多种平台上被支持,适用于对色彩要求不高同时需要文件体积较小的场景,比如企业Logo、线框类的图等。很多人以为GIF指的就是动图,其实GIF不仅有动画GIF,还有静态GIF,因其体积小的特点,现在GIF被广泛的应用在各类网站中。
3、TIFF格式图像TIFF是Tag Image File Format的简写,它是标签图像文件格式,TIFF(Tag Image File Format)图像文件是图形图像处理中常用的格式之一,其图像格式很复杂,但由于它对图像信息的存放灵活多变,可以支持很多色彩系统,而且独立于操作系统,因此得到了广泛应用(拓展性支持Mac跟Windows系统交叉使用)。在各种地理信息系统、摄影测量与遥感等应用中,要求图像具有地理编码信息,例如图像所在的坐标系、比例尺、图像上点的坐标、经纬度、长度单位及角度单位等。
4、PNG格式图像PNG是Portable Network Graphics的简写,它是便携式网络图形,PNG是一种无损压缩的位图片形格式,其设计目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。PNG压缩比高,生成文件体积小,PNG结合了GIF和TIFF优点,能够支持压缩不失真、透明背景、渐变图像的制作要求,现在广泛应用于PS软件以及互联网之中。
PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位PNG在24位基础上增加了8位透明通道,因此可展现256级透明程度。
5、JPG格式图像JPG是JPEG(Joint Photographic Experts Group)的简写,它是一种比较常见的图画格式。它的特点是压缩比高,生成文件体积小。
JPEG格式是目前网络上最流行的图像格式,是可以把文件压缩到最小的格式,JPG图片格式的设计目标,是在不影响人类可分辨的图片质量的前提下,尽可能的压缩文件大小。这意味着JPG去掉了一部分图片的原始信息,也即是进行了有损压缩。JPG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPG非常适合用来存储照片,用来表达更生动的图像效果,比如颜色渐变。
不过它的缺点也很明显,编辑和重新保存 JPG 文件时,JPG 会混合原始图片数据的质量下降,而且这种下降是累积性的。打个比方,你在微信里面收到被转发很多次的JPG图片会发现图片比原图模糊许多,且泛绿色。
6、SVG格式图像SVG是Scalable Vector Graphics的简写,它是可缩放矢量图形,SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候,你看到的还是线和曲线,而不会出现像素点。这意味着SVG图片在放大时,不会失真,所以它非常适合用来绘制企业Logo、Icon等。
SVG作为W3C所推荐的基于XML的开放标准,能够与其他网络技术进行无缝集成,特点是使用XML来描述图片。借助于前几年XML技术的流行,SVG也流行了很多。使用XML的优点是,任何时候你都可以把它当做一个文本文件来对待,也就是说,你可以非常方便的修改SVG图片,你所需要的只需要一个文本编辑器。
7、总结每种类型图像都有不同的指标特点,总结如下:
7.1、有损vs无损
图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两种。
- 有损压缩。指在压缩文件大小的过程中,损失了一部分图片的信息,也即降低了图片的质量,并且这种损失是不可逆的,我们不可能从有一个有损压缩过的图片中恢复出全来的图片。常见的有损压缩手段,是按照一定的算法将临近的像素点进行合并。
- 无损压缩。只在压缩文件大小的过程中,图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。
7.2、索引色vs直接色
计算机在表示颜色的时候,有两种形式,一种称作索引颜色(Index Color),一种称作直接颜色(Direct Color)。
- 索引色。用一个数字来代表(索引)一种颜色,在存储图片的时候,存储一个数字的组合,同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色,通常是256种颜色,对应到计算机系统中,使用一个字节的数字来索引一种颜色。
- 直接色。使用四个数字来代表一种颜色,这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持256种变化,所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种,为压缩空间使用,有可能只有表达红、绿、蓝的三个数字,每个数字也可能不支持256种变化之多。
7.3、点阵图vs矢量图
- 点阵图,也叫做位图,像素图。构成点阵图的最小单位是象素,位图就是由象素阵列的排列来实现其显示效果的,每个象素有自己的颜色信息,在对位图图像进行编辑操作的时候,可操作的对象是每个象素,我们可以改变图像的色相、饱和度、明度,从而改变图像的显示效果。点阵图缩放会失真,用最近非常流行的沙画来比喻最恰当不过,当你从远处看的时候,画面细腻多彩,但是当你靠的非常近的时候,你就能看到组成画面的每粒沙子以及每个沙粒的颜色。
- 矢量图,也叫做向量图。矢量图并不纪录画面上每一点的信息,而是纪录了元素形状及颜色的算法,当你打开一付矢量图的时候,软件对图形象对应的函数进行运算,将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小,画面上的对象对应的算法是不变的,所以,即使对画面进行倍数相当大的缩放,其显示效果仍然相同(不失真)。
7.4、总结
图片的压缩方式有无损压缩和有损压缩两种。前者压缩后比后者要大。
1、图片的颜色表示有直接颜色和索引颜色两种。前者比后者更丰富,体积更大。
2、BMP采用无损压缩和直接色,所以体积最大。太大的文件格式格式导致它几乎没有用武之地。
3、GIF采用无损和索引色的,适用于对色彩要求不高同时需要文件体积较小的场景,比如企业Logo、线框类的图等。支持动画和透明。
4、JPEG(JPG)采用有损压缩和直接色,不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊,而直接色的选用,又会导致图片文件较GIF更大。而适合作为摄影类的图片。.
所以小图片尽量使用png、要想支持动画则使用gif、大型图片使用jpg。