前几天看到Soulman在他的站上直接用PNG格式做的一幅大图作为Bannar，效果是可想而知的，我等了近半分钟，图片还为显示。网页窗口的很大一部分持续呈现空白，这不是设计师想要得到的。于是乎，有人开始思考，到底该如何将设计出来的作品有效的发布在网络上呢？在这里，图片文件格式的比较就很有必要了。
如今网络上流传着多种图片格式，例如BMP、JPG（JPGE）、PNG、GIF等。其中JPG和GIF最为广泛，PNG由于最近才得到IE7的正式支持，许多设计师对于这种格式在IE7之前都是比较谨慎的。
几种格式的理论分析
- JPG格式
- JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式 JPEG 文件支持交错。
可以提高或降低 JPEG 文件压缩的级别。但是，文件大小是以图像质量为代价的。压缩比率可以高达 100:1。（JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件，而图片质量不会下降。）JPEG 压缩可以很好地处理写实摄影作品。但是，对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品，JPEG 压缩无法提供理想的结果。有时，压缩比率会低到 5:1，严重损失了图片完整性。这一损失产生的原因是，JPEG 压缩方案可以很好地压缩类似的色调，但是 JPEG 压缩方案不能很好地处理亮度的强烈差异或处理纯色区域。
JPG格式的优点可想而知，它能够在不大量损失画质的情况下实现不同比率的压缩，再加上24位全彩的支持，使他成为目前照片储存的标准格式（在Very High模式下，其质量已经和RAW不分上下，但是体积上JPG有绝对优势）。对于网页设计师来说，当JPG文件以Progressive模式压缩时支持交错，这个特性使它能同GIF一样，有从模糊到清晰的显示过程。
JPG格式的致命伤也正是由于它的有损压缩，它的压缩损失是不可恢复的，而且当一幅JPG文件多次被修改，并再次保存时，它也就经历了多次质量损失，这个过程是积累性的。 - GIF格式
- GIF(Graphics Interchange Format)的原义是“图像互换格式”，是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50％左右，它不属于任何应用程序。目前几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。GIF图像文件的数据是经过压缩的，而且是采用了可变长度等压缩算法。所以 GIF的图像深度从lbit到8bit，也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。
众所周知，GIF主要分为两个版本，即GIF 89a和GIF 87a；前者支持多幅图片组成动态画面，这就是当今网络上流行的动画图片格式。尽管这种格式在网络上流传的很泛滥，它实际上是一种比较过时的格式，因为它仅支持256色，并通过抖动来“模拟”出更多色彩。网页设计师在早期使用GIF的理由大多是为了它的透明背景功能。 - PNG格式
- PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。
PNG格式的诞生和JPG与GIF密不可分，它就是为了弥补两个前辈的不足而诞生的。它同JPG一样支持压缩比率、Progressive模式压缩，与GIF一样有256色模式。还有诸多算法上的特性在此就不必指出，作为网页设计师，必须记得的是，PNG同时支持真彩色和16位Alpha通道。
三种格式在照片环境下的对决
选择的图片原件是未经处理的JPG文件，大小在经过25%缩放后为1.7MB。以下我选择了三种格式非常常用的设定来进行横向比较，下面那副图片以PNG格式保存，可以忽略质量的再次损失。
GIF设定：128位抖动，这是一个GIF中非常高的设定。
JPG设定：质量为High（60），这个设定不高不低，通常我压缩图片可能会用95的质量。
PNG设定：24位真彩，PNG的标准设定。
从上图可以看出，GIF格式图片和原图相比已经出现了颗粒感，影响了表现；JPG格式相当接近原画，虽然细节表现上有一定损失；PNG格式文件则通过肉眼无法直接辨别两者的区别。
质量上来看，PNG是毫悬念的冠军，但是文件大小上PNG竟然有964K，相比之下JPG格式的109K、GIF格式的211K是毫无优势可言的。大家如果注意GIF格式的大小和效果，你会发现GIF根本不适合作为照片文件的储存格式。也就是说，如果你的网页上面要讲色彩细节丰富的图片作为背景，那么GIF绝对不可以选，PNG格式则太臃肿，而JPG可以提供非常廉价的折中选择。
简单文件的比较
图片格式和相应参数和上次一样，这次我们来看看这三种格式对简单图案的细节的表现。大家一定会说，”这还用比？肯定是PNG>JPG>GIF“的结果么！”好吧，我们边走边瞧。
你必须得相信你的眼睛，在这种环境下，GIF、PNG与原版设计图片毫无区别，但JPG竟然出现了澡点！如果你仔细阅读了前文对JPG格式的描述，那你应该可以预测到这个结果。
再来看看文件大小，原文件PSD档680K，GIF格式文件15K、JPG格式文件38K，PNG格式文件44K。综合来看，GIF完胜PNG和JPG！希望你的下巴没掉到地上……
谈谈文件的选择
文章到此处，我们已经可以得出这样的结论：1、需要表现丰富色彩的细节，例如照片、CG之类可以选择JPG；2、当想插入简单图案，色调单一的图像（图案）可以选择GIF。
那么我们完全把PNG忽视了？
别忘了我们之前说过PNG文件的两大特点：无损压缩真彩色和16位Alpha通道！光一个“无损”压缩就可以让它成为众多图片处理软件的最佳保存格式，而它的16位Alpha通道则使网页的表达千变万化。你可能又要问，GIF也支持透明啊，我为什么要用PNG？
GIF的确支持透明，但有本事让他搞个半透明？看看下面这副图片。原图是在Photoshop中以较低的硬度用笔刷点下的一个点，相当于一个透明度延半径方向线性降低的一个圆。这其中当然就包括程度不同的透明度。结果很明显，GIF文件当插入白色背景的背景图片中时，无法体现出透明的层次，反而会用灰色来代替有透明度的像素；但PNG文件则不同，它体现出了透明的层次，并且和背景完美融合。
PNG的这种特性使它能够处理网页中的阴影、插入不同层次的背景图片等应用。再另一方面，目前在设计图标时，也多用PNG文件储存，为了这些图标（如各种表情图标）能够完美和背景融合，也直接插入PNG格式的文件(但如果你的浏览着大多数都在使用不支持PNG的Alpha通道的IE6，那么就只能用GIF将就，或者使用相应的Hack）。这便是发PNG在网页设计领域无可替代的应用。可以说，把它作为插入照片的首选格式并不是明智的选择，毕竟人们从有损压缩的JPG格式那里可以得到更快的速度。
剩下的最后一个问题是这图片格式质量参数如何选，这个只能根据原文件的质量通过不同质量参数表较而成。现在Photoshop之类的软件都可以提供“为网页优化”的选择，可以方便的进行设置。
未来图片格式的进化
PNG格式的进一步优化无疑是未来的一大亮点。其他方面，更多全新的图形格式也在不断涌现，其中SVG是最引人注目的一个。
SVG是一种矢量图形格式，SVG提供了GIF和JPEG所不能提供功能优势：
- 放大 用户可以任意放大图形显示，但不会牺牲锐利度、清晰度、细节等。
- 文字状态依然保留 文字在SVG图像中保留可编辑和可搜寻的状态。没有字体的限制，用户将会看到和他们制作时完全相同的画面。
- 小文件 平均来讲，SVG文件比那些JPEG和GIF格式的文件要小很多，因而下载也很快。
- 显示独立性 SVG图像在屏幕上总是边缘清晰，并且可以使用你打印机的分辨率进行打印。不论是300 dpi，600 dpi还是更高，你都不会体验到难看的锯齿的点阵效果。
- 超级颜色控制 SVG提供一个16百万颜色的调板，支持ICC颜色描述
文件，RGB，渐变和蒙版。- 交互性和智能化 因为SVG是基于XML的，它提供无可匹敌的动态交互性。SVG图像可对用户的动作通过高光显示、工具技巧、特殊效果、声音和动画进行反应和显示。
虽然SVG的草案已经修订出来了，但是相应的软件支持还相当少，目前主流浏览器都不支持SVG。总之SVG能够带来更多的应用，可目前它离普及还有很远的一段路要走。
