目前网站图片的采用一共有流行三种,分别是JPG、PNG、GIF,然而很多人并不知道三者在选择的时候究竟应该选谁(BMP就不考虑了吧)。虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度、大小和失真程度的问题。如果你运用得好,选对图片,那样便会使网站的整体体验上升,如果你运用得不好,就会引起反效果。下面我通过文件大小等多方面的元素来讲一下网站图片的合理选择。4 j, _9 U* z2 e& q) C1 C5 A4 x0 [! f
: s5 O$ e' G. N7 u1 L PNG、GIF、JPG 介绍 GIF 图片
1 W8 a: n. M K9 T0 p) O) i' ?: I) ^1 R4 N" C
Gif 算是比较老的图片格式了,它的色彩效果最低,用gif保存鲜艳的图片的话会让你的网站看上去非常可怕。但是gif有着不可忽视的特点:体积小,有着极好的压缩效果,支持动画,并且支持透明效果,虽然这个透明没有PNG的那样渐变透明的强大。动画选gif没错;如果你的图片只有很单调的色彩,没有渐变色,例如只有红蓝两色,那么选GIF最好不过了!例如百度的首页LOGO就是很好的例子,它的大小只有2KB,节省了资源。
) c5 T2 ]& W$ F: {* N d5 M2 f8 @# f8 |
JPG / JPEG 图片
/ p2 A$ g/ c' B
% ~( z7 e1 i3 A4 ]$ ~- q( Y+ q8 E JPG是数码相机最常用的格式,其特点是色彩还原好,可以在照片不明显失真的情况下,大幅降低体积,所以体积不很大,缺点是不支持透明。照片类的图片,例如网站上的Gallery,你想要张贴出来的自然风景之类,最好都用JPG。但是屏幕截图呢?一会介绍。
1 e0 i. ]6 s( w0 x. \, H; P$ d4 _; l9 j" ~$ e% H8 b
PNG 图片
: a6 M9 d6 v3 Q7 y. @8 a" D
6 G. q# J% e" t1 a8 P) f7 y 可谓是最适合网络的图片!PNG的优点是,清晰,无损压缩,压缩比率很高,可渐变透明,具备几乎所有GIF的优点;缺点是不如JPG的颜色丰富,同样的图片体积也比JPG略大。但是PNG应该在网站设计上被推广,它是公认的最适合网页使用的图片格式。Google就是一个很好的例子。Google所有站点几乎全部的图片资源都是PNG格式。8位的PNG完全可以替代掉GIF。
( |( A. {* P* p! E; @; G% U
" ?9 {9 w- N- ^$ t$ O 上图就是Google的LOGO,选择PNG是为了最清晰同时体积更小,并且Google主页的LOGO图片并不是背景透明的,而是白色背景的。既然不是透明的,为什么不选择JPG呢?Google难道没有考虑吗,所以png有其优势。
$ K) i: A* }) v% o$ G- G) E# N+ m! V, P: x2 u7 a& X
PNG有着另一个优点,那就是逐次逼近显示(progressive display):传输图像文件的同时,可以先把整个轮廓显示出来,然后逐步显示图像的细节,即先显示低分辨率显示图像,从模糊到清晰,然后逐步提高它的分辨率。这是一个很好的用户体验。
4 `6 t9 |# A8 ^5 V5 I, |+ G
3 ]% {7 z" R) O$ H7 l 各方面比较7 I7 |& w2 ^1 m8 H, |$ w' k
& Y: C5 [2 o5 @( u1 j) Z 大小比较:通常地,PNG asymp; JPG > GIF
. a/ y3 e8 g3 Y. }' {
7 w9 d2 z5 R; M# n 透明性:PNG > GIF > JPG, B B5 u. h0 q& ^
K' w! I( ]3 k: ? 色彩丰富程度:JPG > PNG >GIF% A7 M* L% K& y7 |
0 q! J6 K; [" e" Y: j
兼容程度:GIF asymp; JPG > PNG7 m6 C4 T- _) h$ y. w
4 x, I" }) `4 J: V7 u b* S 注意,IE6下PNG的透明是不能显示的,有其对应的Hack方法。6 D& T3 s4 `. q
5 V7 {% E8 r5 q L6 R# k 南通空压机:http://www.ntfusheng.com 江苏空压机:http://www.jsfsysj.com 南通空压机:http://www.ntfusheng.com 1 i' X# v F. H5 d% | H
/ p+ N" W; `. Z* }+ W
|