GIF、JPG和PNG

从某种程度上说，判断一个网页设计师是否优秀，可以从其在WEB开发（或网页设计）中是否合理的采用各种图片格式得出结论。事实上，或许所有人都知道图片存在GIF,JPG和PNG等格式，但并非所有人都知道它们之间的具体区别和使用技巧。

 

1. JPEG
JPEG格式是一种大小与质量相平衡的压缩图片格式。通俗一点讲，就是：高的压缩比=低的图片质量=小的文件大小/低的压缩比=高的图片质量=大的文件大小。由于JPEG文件无法保持100%的原始图像的像素数据，所以它不被认为是一种无损图像格式。
用途：由于这种极其敏感的平衡特性，JPEG非常适合被应用在那些允许轻微失真的像素色彩丰富的图片（照片）场合。反之，JPEG格式图片并不适合做简单色彩（色调少）的图片，比如LOGO，各种小图标（ICONS）。

2. GIF
GIF格式，是为使图片能够应用在在线（online）应用程序上所特别开发的图片格式。Gif有时也被成为“Giff”，是一种无损，8位图片格式 。“无损”是指100%的保持原始图片的像素数据信息。专业名词“8位”是指所能表现的颜色深度：一个8位图像仅最多只能支持256种不同颜色（一个多余256种颜色的图片若用gif图片保存会出现失真）。
用途：由于8位颜色深度的限制，Gif不适合应用于各种色彩过于丰富的照片存储场合。但它却非常适合应用在以下场合：(1)Logo (2)小图标（Icon） (3)用于布局的图片（例如某个布局角落，边框等等） (4)仅包含不超过256种色彩的简单，小型图片场合。
透明 特性：GIF支持基本的透明特性，这意味着你能够使图片的某些像素“不可见”。在其被放置到网页中时，我们就可以看到通过这些不可见区域看到此图片后面的背景颜色（图片）。此特性非常有用：如果你需要将某个gif图片的内容置于所有图片的上层，你可以将其设置为透明。
压缩特性：GIF格式采用LZW算法进行压缩，此算法是Unisys申请的一项专利。在很久很久之前，如果你想使用GIF格式，那么就意味着你需要向Unisys付费申请专利许可。不过值得高兴的是，此项专利技术已于2003年6月20日过期，我们现在可以免费的使用GIF了！
隔行扫描 ：GIF同时也支持隔行扫描。隔行扫描能够令图片在浏览器中更快的加载和显示。此特性对于那些慢网速的浏览者来说尤其实用。
动画 ：一个动态的GIF文件，是由若干帧图片所联结而成的动态图片。在显示时，这些动态帧被反复的绘制读取出来从而形成了简单的动画效果。

3. PNG
PNG，读“ping”，初始时被作为GIF的免费替代格式所开发，采用公共专利压缩算法。PNG格式也是一种无损 压缩，支持隔行扫描 ，但与GIF格式不同的是，PNG不支持动画、PNG同时支持8位和24位的图像。
8位PNG图像：一个8位PNG图片，支持透明背景且像素颜色不能超过256种。除了压缩算法不同之外，此8位PNG格式与GIF格式极其相似。用途：8位PNG图片的用途与GIF格式基本相同。

24位PNG图像：24位PNG，支持160万种不同的像素颜色且支持Alpha透明效果(可变的透明度) ，这就意味着，无论透明度设置为多少，PNG图片均能够与背景很好的融合在一起。
对PNG的支持：由于PNG格式的广泛使用和开发者更加重视网页的WEB标准，不同浏览器对PNG的支持就显得相当重要了。不过，幸运的是，目前市场上主流的浏览器对PNG格式都有很好的支持。

 

4.PNG/GIF，隔行扫描

(1)PNG文件格式保留GIF文件格式的下列特性：
    1)流式读/写性能(streamability)：图像文件格式允许连续读出和写入图像数据，这个特性很适合于在通信过程中生成和显示图像。
    2)逐次逼近显示(progressive display)：这种特性可使在通信链路上传输图像文件的同时就在终端上显示图像，把整个轮廓显示出来之后逐步显示图像的细节，也就是先用低分辨率显示图像，然后逐步提高它的分辨率。
    3)辅助信息(ancillary information)：这个特性可用来在图像文件中存储一些文本注释信息。
(2)隔行扫描(交错技术)
    有很多用户上网的速度很慢，有时候显示一张图片时等很久都不能显示图，如果没用交错技术的话用户要等图全下载完了才能看见。有交错技术那么图可以一部分一部分的显示出来。让用户可以提前知道内容。
    图像隔行扫描:电视是隔行扫描(De-Interlace)，而电脑屏幕是逐行扫描，隔行扫描就是用来模拟电视屏幕的显示方式的，包括隔行GIF和逐级JPG方式 。
    1)交错图:如果图像是一幅交错图，则它在页面上逐步出现的时候，会以类似百叶窗的效果显示。PNG图像和GIF图像都支持这种交错格式 。隔行GIF是指图像文件是按照隔行的方式来显示的，比如先出奇数行，再出偶数行，造成图像是逐渐变清楚的。将图像文件保存成隔行GIF格式的方法是，在Photoshop中进行保存时，选择“Interlaced”（不要选择“Normal”），在Paint Shop Pro中进行保存时，点击“Option…”按钮，选择“Interlaced”（不要选择“Non Interlaced”） 。
    2)渐进图:如果图像是一幅渐进图，则它在页面上逐步出现的时候，会首先显示较模糊的整幅图像，然后逐渐变得清晰。这样，浏览者可以在下载过程中尽早了解图像的大致轮廓。JPG/JPEG图像支持这种渐进格式 。逐级JPG文件可以让图像先以比较模糊的形式显示，随着图像文件数据不断从网上传过来，图像会逐渐变清晰。这样做的好处是图像可以尽快地显示出来，虽然图像不很完美，但是却让浏览者看到了希望，并且图像在不断地变好。将图像文件保存成逐级JPG格式的方法是，在Photoshop中进行保存时，选择 “Progressive”，在Paint Shop Pro中进行保存时，点击“Option…”按钮，选择“Progressive encoding”。
(3)PNG文件头数据块包含有PNG文件中存储的图像数据的基本信息：Width、Height、ColorType、Compression method(压缩方法)、Interlace method(隔行扫描方法)等。其中Interlace method分为：0->非隔行扫描；1->Adam7(由Adam M. Costello开发的7遍隔行扫描方法)隔行扫描 ，才外据网络资料说，虽然MIDP支持0/1两种方式，然而当使用隔行扫描时MIDP却不会真正的使用隔行扫描方式来显示。