澳门正规十大博彩排名


发布时间:2013/8/14 16:13:17   文章来源:jiaxingweb   浏览:[  ]   评论:[  ]

     目前网站图片的采用一共有流行三种,分别是JPG、PNG、GIF,然而很多人并不知道三者在选择的时候究竟应该选谁(BMP就不考虑了吧)。虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度、大小和失真程度的问题

 

    如果你运用得好,选对图片,那样便会使网站的整体体验上升,如果你运用得不好,就会引起反效果。下面我通过文件大小等多方面的元素来讲一下网站图片的合理选择。

 

PNG、GIF、JPG 介绍 GIF 图片

    Gif 算是比较老的图片格式了,它的色彩效果最低,用gif保存鲜艳的图片的话会让你的网站看上去非常可怕。但是gif有着不可忽视的特点:体积小,有着极好的压缩效果,支持动画,并且支持透明效果,虽然这个透明没有PNG的那样渐变透明的强大。动画选gif没错;如果你的图片只有很单调的色彩,没有渐变色,例如只有红蓝两色,那么选GIF最好不过了!例如百度的首页LOGO就是很好的例子,它的大小只有2KB,节省了资源。

 

JPG / JPEG 图片

    JPG是数码相机最常用的格式,其特点是色彩还原好,可以在照片不明显失真的情况下,大幅降低体积,所以体积不很大,缺点是不支持透明。照片类的图片,例如网站上的Gallery,你想要张贴出来的自然风景之类,最好都用JPG。但是屏幕截图呢?一会介绍。

 

PNG 图片

    可谓是最适合网络的图片!PNG的优点是,清晰,无损压缩,压缩比率很高,可渐变透明,具备几乎所有GIF的优点;缺点是不如JPG的颜色丰富,同样的图片体积也比JPG略大。但是PNG应该在网站设计上被推广,它是公认的最适合网页使用的图片格式。Google就是一个很好的例子。Google所有站点几乎全部的图片资源都是PNG格式。8位的PNG完全可以替代掉GIF。

    上图就是Google的LOGO,选择PNG是为了最清晰同时体积更小,并且Google主页的LOGO图片并不是背景透明的,而是白色背景的。既然不是透明的,为什么不选择JPG呢?Google难道没有考虑吗,所以png有其优势。

    PNG有着另一个优点,那就是逐次逼近显示(progressive display):传输图像文件的同时,可以先把整个轮廓显示出来,然后逐步显示图像的细节,即先显示低分辨率显示图像,从模糊到清晰,然后逐步提高它的分辨率。这是一个很好的用户体验。

各方面比较

大小比较:通常地,PNG ≈ JPG > GIF

透明性:PNG > GIF > JPG

色彩丰富程度:JPG > PNG >GIF

兼容程度:GIF ≈ JPG > PNG

注意,IE6下PNG的透明是不能显示的,有其对应的Hack方法。

 

PNG vs JPG 大小实测

    我在电脑上用电脑自带的截图软件进行完全一样的截图,分别保存为JPG和PNG。下面是截图后所得的原始图片大小比较:

可以看到,JPG的大小要远小于PNG,PNG整整大了几乎110KB。要知道在网络上,即使减小10KB,也会带来用户体验的提升。

然后我用Imageoptim软件对这两张图进行无损压缩。最后你可以看到,PNG拥有着很高的压缩比,JPG则只是减小了一点。最后PNG比JPG的大小高出50KB左右,算是比较成功的压缩了。

 

 

总结:JPG、PNG、GIF 到底选谁

    对于一个网站来说,按照保证色彩显示良好同时文件最小的原则,我的总结是这样的:

    网站的LOGO,如果色彩单调,选择PNG或者GIF,推荐前者。但是如果为了IE6的兼容,选择后者;

    如果你需要动图,选择GIF;

    网站上的元素背景图片(比如按钮背景、导航条背景),或者很精细的图片,还是那句话,如果色彩单调,选择PNG或者GIF,推荐前者。但是如果为了IE6的兼容,选择后者,但要考虑失真问题;少用JPG,否则会让这些东西很难看,除非你用风景图片作按钮背景;

    网站内容里,你真实拍摄的图片,或者你下载的风景图片,保持JPG来获得更好的显示效果和体积;

    截图都应该用PNG。当然,如果你并不追求非常完美的显示效果,只是注重内容本身而容许图片上的小瑕疵,选择JPG也可。

 

总结

    不论你用哪种图片,你都应该考虑到图片的压缩性,并对图片尽可能的无损压缩。例如ImageOptim就是一个很好的压缩工具。

    此外,如果你的图片非常小,你甚至可以考虑Base64。

评论
发表评论
评论内容:
昵称:
邮箱:

龙媒网络博客系统,基于framework2.0 | web2.0 | jquery | c# | div+css技术
嘉兴网络公司 嘉兴网站建设 嘉兴网站制作 嘉兴建网站 嘉兴网页设计 嘉兴网页制作 嘉兴网站优化 嘉兴网站推广 嘉兴网络营销