找回密码
 加入怎通
查看: 426|回复: 4

[其他] 网站图片JPG、PNG、GIF哪个好,该选择谁

[复制链接]
宋海波合 发表于 2013-08-31 08:00:37 | 显示全部楼层 |阅读模式
  目前网站图片的采用一共有流行三种,分别是JPG、PNG、GIF,然而很多人并不知道三者在选择的时候究竟应该选谁(BMP就不考虑了吧)。虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度、大小和失真程度的问题。如果你运用得好,选对图片,那样便会使网站的整体体验上升,如果你运用得不好,就会引起反效果。下面我通过文件大小等多方面的元素来讲一下网站图片的合理选择。
4 J; o2 d) r1 p7 q
( F7 f; B! l; S7 t$ R; X  PNG、GIF、JPG 介绍 GIF 图片
# x" p3 [* \' e& L0 A; x+ V2 A7 |3 h* i
  Gif 算是比较老的图片格式了,它的色彩效果最低,用gif保存鲜艳的图片的话会让你的网站看上去非常可怕。但是gif有着不可忽视的特点:体积小,有着极好的压缩效果,支持动画,并且支持透明效果,虽然这个透明没有PNG的那样渐变透明的强大。动画选gif没错;如果你的图片只有很单调的色彩,没有渐变色,例如只有红蓝两色,那么选GIF最好不过了!例如百度的首页LOGO就是很好的例子,它的大小只有2KB,节省了资源。
7 O2 h8 I( L  M& O5 T. P: ^$ \
& u: |7 L$ a+ A8 ^" b# F  JPG / JPEG 图片
, {8 K2 ^3 y2 X* Z
; a/ m" t9 K5 M5 f0 M4 `  JPG是数码相机最常用的格式,其特点是色彩还原好,可以在照片不明显失真的情况下,大幅降低体积,所以体积不很大,缺点是不支持透明。照片类的图片,例如网站上的Gallery,你想要张贴出来的自然风景之类,最好都用JPG。但是屏幕截图呢?一会介绍。
) J/ j% v  k# j& v# W& W# h; [
( Y: N8 o# d/ c. q6 z  PNG 图片
& N* S9 Z2 k# n) p; a6 Z2 @/ {6 }2 O6 q5 B1 ^9 J3 W
  可谓是最适合网络的图片!PNG的优点是,清晰,无损压缩,压缩比率很高,可渐变透明,具备几乎所有GIF的优点;缺点是不如JPG的颜色丰富,同样的图片体积也比JPG略大。但是PNG应该在网站设计上被推广,它是公认的最适合网页使用的图片格式。Google就是一个很好的例子。Google所有站点几乎全部的图片资源都是PNG格式。8位的PNG完全可以替代掉GIF。* v9 v/ t* W, Y1 N' C
1 Q4 u) t% X* ^8 B5 \: C6 y  o
  上图就是Google的LOGO,选择PNG是为了最清晰同时体积更小,并且Google主页的LOGO图片并不是背景透明的,而是白色背景的。既然不是透明的,为什么不选择JPG呢?Google难道没有考虑吗,所以png有其优势。
/ M5 X  d. K' R7 {! I( ^) s, ~* l1 p3 B1 m* M
  PNG有着另一个优点,那就是逐次逼近显示(progressive display):传输图像文件的同时,可以先把整个轮廓显示出来,然后逐步显示图像的细节,即先显示低分辨率显示图像,从模糊到清晰,然后逐步提高它的分辨率。这是一个很好的用户体验。+ c7 r( G4 X$ W+ r

% k  j3 ]9 ?0 Q( |' t. X6 ^/ T  各方面比较
: f, F) w- H: T  F: l/ E6 x9 F  L. j/ y
  大小比较:通常地,PNG asymp; JPG > GIF
7 }; N0 {/ Z+ r, M* _/ }- t7 h- y4 z7 _, @! y0 V
  透明性:PNG > GIF > JPG5 X8 [4 y  M! N5 i! {2 g
- a0 K7 O5 X6 }3 }! {9 U: y
  色彩丰富程度:JPG > PNG >GIF# f6 k6 z) J9 ]% l! g! Y

' ?  D* z/ a" [& _/ S! w0 F8 {* l  兼容程度:GIF asymp; JPG > PNG: B! v! l( _+ U9 e, R. ?8 x; F

8 N- r3 e7 S  Z  注意,IE6下PNG的透明是不能显示的,有其对应的Hack方法。
5 m1 v( S$ d0 j1 o3 A) i- T5 [- y( [8 b9 S
  南通空压机:http://www.ntfusheng.com 江苏空压机:http://www.jsfsysj.com 南通空压机:http://www.ntfusheng.com 9 V$ g0 k; D; K$ u
; D4 ]4 \& ^6 i1 Z$ @
回复

使用道具 举报

花开.彼岸 发表于 2026-01-10 10:40:02 | 显示全部楼层
内容很干货,没有多余的废话,值得反复看
回复 支持 反对

使用道具 举报

yunbaowangluo 发表于 2026-01-11 13:55:33 | 显示全部楼层
学习到了,之前一直没注意过这个点,受教了
回复 支持 反对

使用道具 举报

dpjanebass 发表于 2026-01-13 19:54:01 | 显示全部楼层
这个分享太实用了,刚好能用到,感谢楼主!
回复 支持 反对

使用道具 举报

yinningchao123 发表于 2026-03-17 00:47:23 | 显示全部楼层
刚好遇到类似问题,看完这个帖子心里有底了
回复 支持 反对

使用道具 举报

    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

    QQ|手机版|小黑屋|网站地图|真牛社区 ( 苏ICP备2023040716号-2 )

    GMT+8, 2026-5-1 14:49 , Processed in 0.108958 second(s), 24 queries , Gzip On.

    免责声明:本站信息来自互联网,本站不对其内容真实性负责,如有侵权等情况请联系420897364#qq.com(把#换成@)删除。

    Powered by Discuz! X3.5

    快速回复 返回顶部 返回列表