网站建设中图片使用哪种统一格式比较好?

admin

　　网站建设中图片使用哪种统一格式比较好？目前网站图片的采用一共有流行三种，分别是JPG、PNG、GIF，然而很多人并不知道三者在选择的时候究竟应该选谁（BMP就不考虑了吧）。虽然都可以存储图片，但是如果要发布到网上，就必须考虑速度、大小和失真程度的问题。如果你运用得好，选对图片，那样便会使网站的整体体验上升，如果你运用得不好，就会引起反效果。下面我通过文件大小等多方面的元素来讲一下网站图片的合理选择。

　　一、PNG、GIF、JPG 介绍

　　1.PNG 图片

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

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

　　2.GIF 图片

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

　　3.JPG / JPEG 图片

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

　　二、各方面比较

　　大小比较：通常地，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更好吗？

　　四、JPG、PNG，谁更适合截图

　　PNG更适合屏幕截图！png是软件截屏的最佳选择（体积非常小；最清晰），并且压缩空间非常大。事实上JPG和PNG适合的场景并不同，JPG天生适合风景照片，PNG几乎就是为了“便携网络图形图像”而生。截图保存为jpg，很容易出现失真现象，在文字、渐变色和比较精细的地方，例如线条周围，常常出现斑点、不清楚，模糊。就算提高质量，jpg的体积就上去了。而且JPG不支持透明，所以的你软件图片如果有阴影效果，用JPG就太浪费了。相对的，PNG就比较适合，在保持极少失真的情况下，还能保留透明阴影，文件体积小，而且压缩空间很大。所以，截图的选择无疑是PNG更好。

　　例如下图，同样一张图，PNG仅9KB左右；而JPG，为了保持良好的清晰度，需要110KB左右！GIF就惨不忍睹了。

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

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

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

　　如果你需要动图，选择GIF；

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

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

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

　　写在最后

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

　　来源：沃玛互动

　　关于图片优化

　　jpg格式图片适合于色彩丰富的图片，这样可以比较好的保证图片质量，但是jpg不支持透明；

　　gif格式是索引的格式，支持256色，文件大小较小，支持动画；

　　png格式中png8较类似gif格式，单不支持动画，透明效果比gif格式好，文件大小比gif格式小，IE6不支持png32格式；　

　　个人建议：色彩丰富的图片采用jpg格式、带动画采用gif格式，其余的尽量采用png8格式。