网页设计中图片格式的选择技巧.docxVIP

网页设计中图片格式的选择技巧

相信许多人都知道网页设计中最常用的格式不外乎JPG、GIF、

PNG等格式，但并非所有的人都知道他们之前的实际差别跟到底何时

该选择何种格式。下面是网页设计中图片格式的选择技巧，一起来学习

下吧：

?JPEG

?由于旧型计算机系统以及文件系统的限制，计算机档案文件名与

扩展名被规定为8.3的格式，因此JPEG的附档名被缩写为.JPG。

JPEG可以说是人们最熟悉的图档格式了，相信在数字相机普及的现

在，几乎每台数字相机、照相手机都可以(甚至只能)输出JPEG格式的

图档。JPEG是一种很典型的使用破坏性压缩(lossycompression)的图档

格式，也就是说使用者每次进行JPEG的存档动作后，图档的内容都

会遭到破坏，这个特性在肉眼辨识下并不明显，但却可以有效的降低图

档的档案大小。

?就如这些使用JPEG的设备一样，JPEG非常适合作为储存像素

色彩丰富的图片、例如照片等等，这些图片即使有些微的失真也不容易

轻易的察觉：而反过来说JPEG并不适合用来储存线条图、图标或文

字等等有清晰边缘的图片

?多次重复进行JPEG的图档的储存将会永久性地破坏图片中的

细节。

?GIF

?Gif在许多特性与表现上都与JPEG有着相对的特性。GIF使

用无损压缩格式(LosslessCompression)，但却限制了色彩表现能力、能

够有效地节省档案尺寸。GIF只拥有8位的颜色深度信息，所谓的8

位是指2的8次方也就是256色，当你的图片中出现的色彩在256

色以内时，使用GIF可以得到相当好的输出质量、同时兼顾了档案大

小。因此GIF非常适合用来表现图标、UI接口、线条插画、文字等

部分的输出。

?另外GIF同时还支持透明背景、以及动画图档格式，并且几乎

不用担心支持性的问题：几乎100%的浏览器都支持它。

?由于JPEG与GIF有着如此不同的特性，因此我们可以很轻易

的选择何时该用哪一种格式来输出我们需要的图档。

?当图片拥有丰富的色彩时，并且没有明显锐利反差的边缘线条

时，选择JPEG可以得到最好的输出结果，像是照片就是最好的例

子：

?(左图：Photoshop输出JPEG默认值：品质：高，压缩质量

60%、优化输出。右图：Photoshop输出GIF默认值：256色、扩散性

混色)

?当图片是拥有明确边缘的线条图、没有使用太多色彩、甚至可能

需要透明背景时，GIF是很完美的选择，档案小、画质又精美。

?(上图：Photoshop输出GIF：64色、扩散性混色。下图：

Photoshop输出JPEG默认值：品质：高，压缩质量60%、优化输出)

?PNG

?PNG最初的开发目的是为了作为GIF的替代方案的，作为做新

开发的影像传输文件格式，PNG同样使用了无损压缩格式，事实上

PNG的开发就是因为GIF所使用的无损压缩格式专利问题而诞生的。

?PNG分为PNG-8以及PNG-24两种格式，PNG-8的特性很接

近GIF，支持256色以及透明背景的特性。而PNG-24则支持了多

达160万个色彩。

?虽然PNG不支持动画，但是PNG-24支持了Alpha透明效

果，这可以说是PNG-24最令人眼睛一亮的地方了。也就是说使用

PNG输出图档时，可以有效的支持不同的透明度效果了。这对网页设

计师来说无疑是一个好消息，像这张图片其实是使用了三张PNG-24

的图片在网页中排版出来的效果：

?在大部分的情况下，设计师必须根据图片需求来选择不同的图档

格式，并且对其做适当的调整。虽然PNG-24看起来很完美，但是相

应的当然就是档案大小的增加。另外还有就是浏览器支持度的问题，虽

然现在几乎大部分的浏览器都支持了PNG-24格式，但不幸的是IE6

是不支持透明PNG图档的，现在依然有相当的使用者在使用IE6或

更早的版本，虽然比例会越来越少，但是设计师多少必须将其考虑其

内，是否考虑使用GIF替代，或是在程序端透过script的方式来支持

透明PNG格式。

?tips:感谢大家的阅读，本文由我司收集整编。仅供参阅！