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

标签: 网站 图片 jpg | 发表时间:2015-06-12 18:59 | 作者:天梯梦
出处:http://www.iteye.com

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

 

PNG、GIF、JPG 介绍

 

GIF 图片

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

baidu-logo

 

JPG / JPEG 图片

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

photo_jpg-200x149

 

PNG 图片

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

google-pngs-500x498

上图就是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-500x153

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

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

jpg-png-saving-500x223

 

JPG、PNG,谁更适合截图

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

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

screen-shoot

 

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

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

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

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

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

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

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

 

写在最后

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

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

谢谢收看。

 

原文: http://blog.netsh.org/posts/jpg-png-gif_1327.netsh.html

 

justcode.ikeepstudying.com

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [网站 图片 jpg] 推荐:

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

- - Web前端 - ITeye博客
目前网站图片的采用一共有流行三种,分别是JPG、PNG、GIF,然而很多人并不知道三者在选择的时候究竟应该选谁(BMP就不考虑了吧). 虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度、大小和失真程度的问题. 如果你运用得好,选对图片,那样便会使网站的整体体验上升,如果你运用得不好,就会引起反效果.

免費、輕巧又免安裝的檔案偽裝軟體,幫你將機密檔案隱藏到JPG檔案中!

- 沒有暱稱 - ㊣軟體玩家

网站推荐:11个相似图片搜索网站(以图找图)

- slackware - FeedzShare
来自: 有意思吧 - FeedzShare  . 发布时间:2011年03月06日,  已有 6 人推荐. 你想凭着一张现有图片找出它的原始图片,或者是凭着一张小的缩略图找出原始大图吗. 下面的十款搜索引擎可以帮你实现,以图找图,以图搜图,以图片搜索相似的图片. 一:http://tineye.com/.

32个使用大图片为背景的网站设计

- Kione - 创意悠悠花园
在以前带宽不充足的情况下,网站的背景尽量会使用纯色或者小图,但目前带宽在不断的增加,那使用大图作背景的网站也越来越多了,今天就分享:32个使用大图片为背景的网站设计,希望其中有你喜欢的,或者可以给你带来灵感的. Read the rest of 32个使用大图片为背景的网站设计 (20 words).

几张关于网站设计开发的图片

- 林十四 - 互联网的那点事
© 推荐 for 互联网的那点事, 2011. Post tags: 网站设计开发. 在线制作有趣图片网站 Photo Funia 让你简单2步成为PS高手. CSS开发辅助工具 – TopStyle绿色版 (@portablesoft). 东西方文化对网站设计的影响 有些相似,但也有不同. 网站设计中的面包屑:实例与最佳实践.

转“国内图片网站yupoo的架构”-迷梦江南...

- - 网站架构_搜搜博客搜索
  .NET-C# 高级技术群:16750189,湖南IT交流群:91576466,欢迎您加入.   本文转自:http://www.cnblogs.com/lonelysharer/archive/2011/1 1/10/2243828.html.   之前向大家介绍过全球最大在线图片服务网站Flickr网站架构,Yupoo(又拍网)作为国内最大的图片服务提供商,我们也一起来看看它的架构,同样是提供图片服务,看看他与Flickr的差别在哪里,大家看完本文可以思考一下.

用云存储和CDN轻松搞定网站图片

- - 技术改变世界 创新驱动中国 - 《程序员》官网
“无图无真相,有视频更好”. 一般来说,网络用户都喜欢图片和视频,而不喜欢读干巴巴的文字. 这看似单纯的意愿,却让网站的开发者和维护人员叫苦不迭——图片、视频等内容占用了一个网站的很多存储、带宽资源. 是时候把图片、视频迁移到云存储,来释放被压得喘不过气的服务器和带宽了. 下面以一个网站的图片存储为例,来逐步了解如何使用开放存储服务(Open Storage Service,简称OSS).

图片分享网站Pinterest推荐流量接近Twitter谷歌

- - TechWeb 今日焦点 RSS阅读
Pinterest网站推荐流量接近Twitter和谷歌(腾讯科技配图).   腾讯科技讯(万学)北京时间2月2消息,据国外媒体报道,内容共享公司Shareaholic的一项最新调查结果表明,Pinterest现在是推荐流量(referral traffic)增长最快的网站. 事实上,它的推荐流量已与Twitter和谷歌不相上下.

项目实战之中小网站图片压缩技术

- - CSDN博客推荐文章
接着上一篇 项目实战之中小网站数据缓存的设计与实现 ,我们继续讨论在邻水项目中其他对于中小网站要用到的技术. 由于我们的项目服务器空间有限,如果每次上传图片都大于1M那上传几张图片,空间就满了,而且访问速度也慢. 我们采取图片压缩技术,在首页展示的时候进行深压缩处理,对文章里面的图片进行浅压缩处理.

Windows平台网站图片服务器架构的演进

- - 博客园_知识库
  构建在Windows平台之上的网站,往往会被业内众多架构师认为很“保守”. 很大部分原因,是由于微软技术体系的封闭和部分技术人员的短视造成的. 由于长期缺乏开源支持,所以只能“闭门造车”,这样很容易形成思维局限性和短板. 就拿图片服务器为例子,如果前期没有容量规划和可扩展的设计,那么随着图片文件的不断增多和访问量的上升,由于在性能、容错/容灾、扩展性等方面的设计不足,后续将会给开发、运维工作带来很多问题,严重时甚至会影响到网站业务正常运作和互联网公司的发展(这绝不是在危言耸听).