WEB开发中图片格式的合理选择

  从某种程度上说,判断一个网页设计师是否优秀,可以从其在WEB开发(或网页设计)中是否合理的采用各种图片格式得出结论。事实上,或许所有人都知道图片存在GIF,JPG和PNG等格式,但并非所有人都知道它们之间的具体区别和使用技巧。

  接下来将给大家介绍:WEB开发中几种最受欢迎图片格式的前世今生以及如何正确的使用它们。

  1.JPEG

  JPEG格式是一种大小与质量相平衡的压缩图片格式。通俗一点讲,就是:高的压缩比=低的图片质量=小的文件大小。反之,低的压缩比=高的图片质量=大的文件大小。由于JPEG文件无法保持100%的原始图像的像素数据,所以它不被认为是一种无损图像格式。

  用途:

  由于这种极其敏感的平衡特性,JPEG非常适合被应用在那些允许轻微失真的像素色彩丰富的图片(照片)场合。反之,JPEG格式图片并不适合做简单色彩(色调少)的图片,比如LOGO,各种小图标(ICONS)。

  2.GIF

  GIF格式,是为使图片能够应用在在线(online)应用程序上所特别开发的图片格式。Gif,有时也被成为“Giff”,是一种无损,8位图片格式。“无损”是指100%的保持原始图片的像素数据信息。专业名词“8位”是指,所能表现的颜色深度——一个8位图像仅最多只能支持256种不同颜色(一个多余256种颜色的图片若用gif图片保存会出现失真)。

  用途:

  由于8位颜色深度的限制,Gif不适合应用于各种色彩过于丰富的照片存储场合。但它却非常适合应用在以下场合:

  * Logo

  * 小图标(Icon)

  * 用于布局的图片(例如某个布局角落,边框等等)

  * 仅包含不超过256种色彩的简单,小型图片场合

  透明特性:

  GIF支持基本的透明特性,这意味着你能够使图片的某些像素“不可见”。在其被放置到网页中时,我们就可以看到通过这些不可见区域看到此图片后面的背景颜色(图片)。此特性非常有用:如果你需要将某个gif图片的内容置于所有图片的上层,你可以将其设置为透明。

  压缩特性:

  GIF格式采用LZW算法进行压缩,此算法是Unisys申请的一项专利。在很久很久之前,如果你想使用GIF格式,那么就意味着你需要向Unisys付费申请专利许可。不过值得高兴的是,此项专利技术已于2003年6月20日过期,我们现在可以免费的使用GIF了!

  隔行扫描:

  GIF同时也支持隔行扫描。隔行扫描能够令图片在浏览器中更快的加载和显示。此特性对于那些慢网速的浏览者来说尤其实用。

  动画GIF:

  一个动态的GIF文件,是由若干帧图片所联结而成的动态图片。在显示时,这些动态帧被反复的绘制读取出来从而形成了简单的动画效果。合理的运用GIF动画能够为网页增添动静结合的效果,而过度的使用则会使网页杂乱无章。

  3.PNG

  PNG,读“ping”,初始时被作为GIF的免费替代格式所开发,采用公共专利压缩算法。PNG格式也是一种无损压缩,但与GIF格式不同的是,PNG同时支持8位和24位的图像。

  8位PNG图像:

  一个8位PNG图片,支持透明背景且像素颜色不能超过256种。除了压缩算法不同之外,此8位PNG格式与GIF格式极其相似;

  用途:

  8位PNG图片的用途与GIF格式基本相同,

  * Logo

  * 小图标(Icon)

  * 用于布局的图片(例如某个布局角落,边框等等)

  * 仅包含不超过256种色彩的简单,小型图片场合

  24位PNG图像:

  24位PNG,支持160万种不同的像素颜色且支持Alpha透明效果,这就意味着,无论透明度设置为多少,PNG图片均能够与背景很好的融合在一起。

  对PNG的支持:

  由于PNG格式的广泛使用和开发者更加重视网页的WEB标准,不同浏览器对PNG的支持就显得相当重要了。不过,幸运的是,目前市场上主流的浏览器对PNG格式都有很好的支持,这包括:IE,Firefox,Safari,Opera,and Konqueror。

  *但不幸的是,IE6及IE6以下的浏览器对PNG透明背景的支持并不好。不过我们仍可以通过其他方法来解决这个问题,详情请查看如何在IE6中正常显示透明PNG。

时间: 2024-08-29 06:00:18

WEB开发中图片格式的合理选择的相关文章

node.js WEB开发中图片验证码的实现方法_node.js

用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码. 先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载.处理.显示.保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿

数据-Web开发中如何选择图片的存取方式??

问题描述 Web开发中如何选择图片的存取方式?? 问题:在Web项目开发中一般有两种存取图片的方式,它们分别是: 1. 以二进制流的形式存入数据库 2. 数据存入文件名,并将图片保存在Web项目的images文件夹中 以上这两种方式在Web开发中应该如何选择? 请各位大神帮小弟解惑,小弟先谢过了 解决方案 如果是头像之类的小图片,用数据库也可以.但是对于大图片,最好放在文件系统,数据库存路径. 解决方案二: 选择第二种,但是图片的保存,应该在自动生成的文件夹里(文件夹以上传人命名),路径自动获取

急请教web开发中遇到的图片预览问题

问题描述 急请教web开发中遇到的图片预览问题问题:当一个file在网页上选择了本地的一张图片后,要求在网页上浏览一下<inputid="FilePhoto"type="file"runat="server"onpropertychange="GetMyView();"/>这是那个file<inputtype="Image"ID="ImgStudentPhoto"Hei

使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OSS(https://www.aliyun.com/product/oss) 4.HTTPS(http://baike.baidu.com/view/14121.htm) 阅读目录结构 引: 一.准备工作 二.整体功能结构 三.具体实现步骤 四.关键点和问题处理 五.延伸与扩展 六.总结与思考 引:

在Web应用中图片和长文本的处理策略总结

web|策略  不难认识到,在web应用中图片/多媒体和长文体的处理策略,很大程度上决定中一个系统的性能和负载能力.    这几天在处理图片上载的同时,也在考虑着最合理的对图片和长文本的存储.多年前,我喜欢把图片和长文本都存进oracle中,目的是备份方便,只需要 exp就可以连图片一起备分起来,不用一个个地照顾目录.但是缺点也随着访问量上升而一点点显示出来:一来是大大加重了数据库服务器的负担:二来使用 BLOG/CLOG并不是SQL92支持的标准SQL,令开发持久性的对象变得复杂;其三,ora

Web开发中的弹出对话框控件介绍

Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了.不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,由于工作需要及业余兴趣所至,我比较了近10种的对话框控件,其中发现有一些做得很好的,除了功能强大,而且也支持多种皮肤样式,甚至有些对话框的居中都考虑到了,细节决定体验,有些真的不错. 1.原始的弹出对话框实现(弹出窗口也可以) 我们知道,以前在没有应用其他javascript库(例如各种类型的Jque

Web开发中的文件上传组件uploadify的使用

在Web开发中,有很多可以上传的组件模块,利用HTML的File控件的上传也是一种办法,不过这种方式,需要处理的细节比较多,而且只能支持单文件的操作.在目前Web开发中用的比较多的,可能uploadify(参考http://www.uploadify.com/)也算一个吧,不过这个版本一直在变化,他们的脚本调用也有很大的不同,甚至调用及参数都一直在变化,很早的时候,那个Flash的按钮文字还没法变化,本篇随笔主要根据项目实际,介绍一下3.1版本的uploadify的控件使用,这版本目前还是最新的

WEB设计技巧:Web开发中经常使用的网站和Web App

文章描述:Web用户体验师Jake Rocheleau撰写了一篇文章分享他在Web开发中经常使用的网站和Web App,其中包含各类字体库.代码库.插件库.配色方案和测试工具.他同时指出,Web开发环境将慢慢转向云端. Web用户体验师Jake Rocheleau撰写了一篇文章分享他在Web开发中经常使用的网站和Web App,其中包含各类字体库.代码库.插件库.配色方案和测试工具.他同时指出,Web开发环境将慢慢转向云端. CodeVisually是一个开源项目.在它的分类目录下有各种插件.

对Web开发中前端框架与前端类库的一些思考

  这篇文章主要介绍了对Web开发中前端框架与前端类库的一些思考,本文讲解了前端框架的理解误区.前端框架与前端类库的区别.前端MVC框架思想等内容,需要的朋友可以参考下 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道.就好像一个日均pv只有