开发手册HTMLCSSJavaScript
HTML手册CSS手册JavaScript手册JavaScriptHTML DOMjQueryJSONDHTMLJavaScript相关jQuery 属性操作 - addClass() 方法jQuery 属性操作 - attr() 方法jQuery 属性操作 - hasClass() 方法jQuery 属性操作 - removeAttr() 方法jQuery 属性操作 - removeClass() 方法jQuery 属性操作 - toggleClass() 方法jQuery 属性操作 - val() 方法jQuery CSS 操作 - css() 方法jQuery CSS 操作 - height() 方法jQuery CSS 操作 - offset() 方法jQuery CSS 操作 - offsetParent() 方法jQuery CSS 操作 - position() 方法jQuery CSS 操作 - scrollLeft() 方法jQuery CSS 操作 - scrollTop() 方法jQuery CSS 操作 - width() 方法jQuery 遍历 - clearQueue() 方法jQuery 数据 - data() 方法jQuery 遍历 - dequeue() 方法jQuery 遍历 - hasData() 方法jQuery 数据 - jQuery.data() 方法jQuery 遍历 - jQuery.dequeue() 方法jQuery 遍历 - jQuery.queue() 方法jQuery 数据 - jQuery.removeData() 方法jQuery 遍历 - queue() 方法jQuery 数据 - removeData() 方法jQuery DOM 元素方法 - get() 方法jQuery DOM 元素方法 - index() 方法jQuery DOM 元素方法 - size() 方法jQuery DOM 元素方法 - toArray() 方法jQuery 效果 - animate() 方法jQuery 效果 - clearQueue() 方法jQuery 效果 - fadeIn() 方法jQuery 效果 - fadeOut() 方法jQuery 效果 - fadeTo() 方法jQuery 效果 - hide() 方法jQuery 效果 - show() 方法jQuery 效果 - slideDown() 方法jQuery 效果 - slideToggle() 方法jQuery 效果 - slideUp() 方法jQuery 效果 - stop() 方法jQuery 效果 - toggle() 方法jQuery 事件 - bind() 方法jQuery 事件 - blur() 方法jQuery 事件 - change() 方法jQuery 事件 - click() 方法jQuery 事件 - dblclick() 方法jQuery 事件 - delegate() 方法jQuery 事件 - die() 方法jQuery 事件 - error() 方法jQuery 事件 - focus() 方法jQuery 事件 - isDefaultPrevented() 方法jQuery 事件 - keydown() 方法jQuery 事件 - keypress() 方法jQuery 事件 - keyup() 方法jQuery 事件 - live() 方法jQuery 事件 - load() 方法jQuery 事件 - mousedown() 方法jQuery 事件 - mouseenter() 方法jQuery 事件 - mouseleave() 方法jQuery 事件 - mousemove() 方法jQuery 事件 - mouseout() 方法jQuery 事件 - mouseover() 方法jQuery 事件 - mouseup() 方法jQuery 事件 - one() 方法jQuery 事件 - pageX 属性jQuery 事件 - pageY 属性jQuery 事件 - preventDefault() 方法jQuery 事件 - ready() 方法jQuery 事件 - resize() 方法jQuery 事件 - result 属性jQuery 事件 - scroll() 方法jQuery 事件 - select() 方法jQuery 事件 - submit() 方法jQuery 事件 - target 属性jQuery 事件 - timeStamp 属性jQuery 事件 - toggle() 方法jQuery 事件 - trigger() 方法jQuery 事件 - triggerHandler() 方法jQuery 事件 - type 属性jQuery 事件 - unbind() 方法jQuery 事件 - undelegate() 方法jQuery 事件 - unload 属性jQuery 事件 - which 属性jQuery 效果jQuery HTML 操作jQuery 参考手册 - 队列控制jQuery 文档操作 - after() 方法jQuery 文档操作 - append() 方法jQuery 文档操作 - appendTo() 方法jQuery 文档操作 - before() 方法jQuery 文档操作 - clone() 方法jQuery 文档操作 - detach() 方法jQuery 文档操作 - empty() 方法jQuery 文档操作 - html() 方法jQuery 文档操作 - insertAfter() 方法jQuery 文档操作 - insertBefore() 方法jQuery 文档操作 - prependTo() 方法jQuery 文档操作 - prepend() 方法jQuery 文档操作 - remove() 方法jQuery 文档操作 - replaceAll() 方法jQuery 文档操作 - replaceWith() 方法jQuery 文档操作 - text() 方法jQuery 文档操作 - unwrap() 方法jQuery 文档操作 - wrap() 方法jQuery 文档操作 - wrapAll() 方法jQuery 文档操作 - wrapInner() 方法jQuery context 属性jQuery jquery 属性jQuery jQuery.fx.interval 属性jQuery jQuery.fx.off 属性jQuery jQuery.support 属性jQuery length 属性jQuery * 选择器jQuery :animated 选择器jQuery [attribute] 选择器jQuery [attribute$=value] 选择器jQuery [attribute=value] 选择器jQuery [attribute!=value] 选择器jQuery . 选择器jQuery :contains 选择器jQuery element 选择器jQuery :empty 选择器jQuery :eq() 选择器jQuery :even 选择器jQuery :first 选择器jQuery :gt 选择器jQuery :header 选择器jQuery # 选择器jQuery :input 选择器jQuery :button 选择器jQuery :checkbox 选择器jQuery :checked 选择器jQuery :disabled 选择器jQuery :enabled 选择器jQuery :file 选择器jQuery :image 选择器jQuery :password 选择器jQuery :radio 选择器jQuery :reset 选择器jQuery :selected 选择器jQuery :submit 选择器jQuery :text 选择器jQuery :last 选择器jQuery :lt 选择器jQuery :odd 选择器jQuery :visible 选择器jQuery 遍历 - add() 方法jQuery 遍历 - andSelf() 方法jQuery 遍历 - children() 方法jQuery 遍历 - closest() 方法jQuery 遍历 - contents() 方法jQuery 遍历 - each() 方法jQuery 遍历 - end() 方法jQuery 遍历 - eq() 方法jQuery 遍历 - filter() 方法jQuery 遍历 - find() 方法jQuery 遍历 - first() 方法jQuery 遍历 - has() 方法jQuery 遍历 - is() 方法jQuery 遍历 - last() 方法jQuery 遍历 - map() 方法jQuery 遍历 - next() 方法jQuery 遍历 - nextAll() 方法jQuery 遍历 - nextUntil() 方法jQuery 遍历 - not() 方法jQuery 遍历 - offsetParent() 方法jQuery 遍历 - parent() 方法jQuery 遍历 - parents() 方法jQuery 遍历 - parentsUntil() 方法jQuery 遍历 - prev() 方法jQuery 遍历 - prevAll() 方法jQuery 遍历 - prevUntil() 方法jQuery 遍历 - siblings() 方法jQuery 遍历 - slice() 方法jQuery Mobile 教程ECMAScript 函数概述ECMAScript arguments 对象ECMAScript 闭包(closure)ECMAScript Function 对象(类)JavaScript 的历史JavaScript 实现ECMAScript 关键字ECMAScript 定义类或对象ECMAScript 修改对象ECMAScript 面向对象技术ECMAScript 对象作用域ECMAScript 对象类型ECMAScript 对象应用ECMAScript 加性运算符ECMAScript 赋值运算符ECMAScript 位运算符ECMAScript Boolean 运算符ECMAScript 逗号运算符ECMAScript 条件运算符ECMAScript 等性运算符ECMAScript 乘性运算符ECMAScript 关系运算符ECMAScript 一元运算符ECMAScript 原始类型ECMAScript 引用类型ECMAScript 保留字ECMAScript break 和 continue 语句ECMAScript if 语句ECMAScript 迭代语句ECMAScript 标签语句ECMAScript switch 语句ECMAScript with 语句ECMAScript 语法ECMAScript 类型转换ECMAScript 原始值和引用值ECMAScript 变量HTML DOM Anchor 对象HTML DOM Area 对象HTML DOM Audio 对象HTML DOM Base 对象HTML DOM Blockquote 对象HTML DOM Body 对象HTML DOM Button 对象HTML DOM Canvas 对象HTML DOM Checkbox 对象HTML DOM Column 对象HTML DOM Color 对象HTML DOM Datalist 对象HTML DOM Input Date 对象HTML DOM Datetime Local 对象HTML DOM Datetime 对象HTML DOM Del 对象HTML DOM Details 对象HTML DOM Dialog 对象HTML DOM Document 对象HTML DOM Email 对象HTML DOM Embed 对象HTML DOM Event 对象HTML DOM Fieldset 对象HTML DOM FileUpload 对象HTML DOM Form 对象HTML DOM Frame 对象HTML DOM Frameset 对象HTML DOM Hidden 对象History 对象HTML DOM IFrame 对象HTML DOM Image 对象HTML DOM Input Image 对象HTML DOM Input Time 对象HTML DOM Ins 对象HTML DOM Keygen 对象HTML DOM Legend 对象HTML DOM Li 对象HTML DOM Link 对象Location 对象HTML DOM Map 对象HTML DOM MenuItem 对象HTML DOM Meta 对象HTML DOM Meter 对象HTML DOM Month 对象Navigator 对象HTML DOM Number 对象HTML DOM Object 对象HTML DOM Ol 对象HTML DOM OptionGroup 对象HTML DOM Option 对象HTML DOM Parameter 对象HTML DOM Password 对象HTML DOM Progress 对象HTML DOM Button 对象HTML DOM Quote 对象HTML DOM Radio 对象HTML DOM Input Range 对象HTML DOM Reset 对象Screen 对象HTML DOM Script 对象HTML DOM Input Search 对象HTML DOM Select 对象HTML DOM Source 对象HTML DOM Style 对象HTML DOM Submit 对象HTML DOM Table 对象HTML DOM TableCell 对象HTML DOM TableHeader 对象HTML DOM TableRow 对象HTML DOM Text 对象HTML DOM Textarea 对象HTML DOM Time 对象HTML DOM Title 对象HTML DOM Track 对象HTML DOM Input URL 对象HTML DOM Video 对象HTML DOM Input Week 对象Window 对象JavaScript eval() 函数JavaScript Array 对象JavaScript Boolean 对象JavaScript Date 对象JavaScript 全局对象JavaScript Math 对象JavaScript Number 对象JavaScript RegExp 对象JavaScript String 对象HTML DOM getContext() 方法多媒体教程 - 在 Web 上使用图像多媒体教程 - GIF 图像多媒体教程 - JPEG 图像PHP 教程SVG 教程HTTP 方法:GET 对比 POST什么是超文本?TCP/IP 教程VBScript 教程万维网联盟(W3C)教程XML 教程XML DOM 加载函数XML DOM 教程XML DOM 参考手册

多媒体教程 - 在 Web 上使用图像

本文详细讲解在什么条件下使用图像和文本、如何加快图像的下载以及选择合适的图像格式。

何时使用图像

对于大多数图片来说,一张图片可能胜过千言万语。但还是要注意,没有人会注意那些饶舌的人。首先,也是最重要的一点,是要把文档的图形作为可视化工具,而不是将其作为无缘无故的装饰。它们应当支持文本的内容,并帮助读者在文档中导航。使用图像可使文档内容更清楚,还可以为文档加注释或示例。支持内容的照片、图表、曲线图、地图和图画等都是很自然的、很合适的选择项。例如,产品的照片对于在线目录和购物指南来说是非常关键的组成部分。还有具有链接功能的图标和印刷符号,包括具有动画效果的图像等,都可以是导向内容或者外部资源的非常有效的可视向导。如果某个图像对文档没有起到任何上述作用,那就应该把它丢到一边去!

在考虑向文档添加图像时,另外一个重要的考虑因素,就是在通过网络,尤其是通过调制解调器连接传输这个文档时,检索方面所带来的时间延迟。一般的普通文档最多可以容纳 10-15 千字节,而一个图像可以轻易地达到数百千字节大小。而且一个文档的总下载时间不仅仅是它所有部分加起来的总和,还要考虑网络负载所带来的延迟。

根据连接的速度(也就是带宽,bandwidth,通常用 bps 或者 b/s 来表示)和可能减慢连接速度的网络阻塞情况,要下载一个包含 100 KB 图像的单独文档,可能要在凌晨一两点,当大多数人还在睡觉时,用一个 57.6 Kbps 的调制解调器连接花大约 15 秒钟左右的时间来完成下载,也有可能在中午的时候用一个 9600 bps 调制解调器花上超过 10 分钟的时间来下载。您得到这张图片了吗?

当然,图片和其他多媒体的使用,会促使因特网服务提供商不断追求更快、更好、更加健壮的方式来提供 Web 内容。不久,56 Kbps 调制解调器连接就会像马和马车一样退出历史舞台(就像 9600 bps调制解调器那样),它会被电缆调制解调器和 ADSL 这样的新技术所取代。实际上,大多数连接很快就会超过 1Mbps 的速率。

随着价格的降低,网络的使用会不断增加,于是就带来了阻塞的问题。如果你正在试图访问一个超负荷运转的服务器,那么不管你的网络连接速度有多快,都无法正常进行访问。

何时使用文本

文本并没有过时。对于某些用户来说,文本是他们文档中唯一可以访问的部分。我们建议,在大多数情况下,文档应当能够被任何人访问,包括那些无法浏览图像、或者那些为了改善网络连接性能而禁用浏览器自动下载图像功能的用户。虽然向文档中加入图像的需求可能会非常强烈,但是有些时候,纯文本文档确实会更有意义。

从其他格式转换为 Web 页面的文档很少含有嵌入式图像,而参考文献和其他一些严肃的内容,通常都是完全可用的纯文本形式。

在访问速度非常重要的时候,应该创建纯文本文档。如果你知道用户可能争着去获取你的文档,就应该在文档中避免使用图像,以适应这些用户的需要。在某些极端的情况下,您可能会提供一个主页(引导页),让用户有机会在您作品的两个副本之间做出选择:一个包含图像,另外一个则去掉了图像(流行浏览器都具有特殊的图像图标,来为那些有待下载的图像留出地方,而这些占位符可能会把文档的布局搞得一团糟,甚至变成一堆根本没有办法阅读的东西)。

如果希望你的文档可以很容易地被 Web 上众多的索引服务搜寻到,那么文本是最合适的形式 - 仅仅支持图像,而不支持装饰和不必要的图形。但是这些搜索引擎通常会忽略图像的存在。如果页面的主要内容是通过图像来提供的,那么在线 Web 目录中有关你的文档的信息就会很少。

加快图像的下载速度

除了谨慎地选择要包含在文档中的内容外,还有许多方法可以改善由图像带来的负载和延迟问题:

保持简单性

一个全屏的 24 位彩色图形,即使经过标准格式(例如 GIF 或者 JPEG 等)的数字压缩减少了尺寸,它还是会侵占大部分网络带宽。因此,最好使用各种图像管理工具来优化图像的尺寸,并将颜色的数目减为最少的像素数。简化你的绘图,也不要使用那些风景照片,并且避免在图像中出现大块的空白背景,和不必要的边框以及其他占用空间的元素。还要避免使用抖动效果(把两种相近的颜色混合起来已获得第三种颜色),这种技术会极大地降低图像的可压缩性。相反,要尽量使用大面积一致的颜色,因为用 GIF 或者 JPEG 格式可以很容易地对它们进行压缩。

重复利用图像

这一点对于图标和 GIF 动画尤其适用。大多数浏览器会在本地存储器把引入的文档成分进行缓存,这样在获得数据时可以更快,而且使用的网络连接也更少。对于较小的 GIF 动画文件,则要试着准备每个连续的图像,以便只更新那些在动画中发生了改变的部分,而不是刷新整个图像(这样也可以加速动画本身的显示)。

分割大文档

这是一个包含图像的一般原则。很多小的文档片段是用超链接(当然是用它了!)和有效的目录来组织到一起的,与整个的大块文档相比,这样可以让用户觉得更容易接受一些。一般来讲,人们宁愿在几个页面间翻来翻去,也不愿意浪费光阴等待下载一个大文档(这和电视频道浏览综合症有点相似)。一条好的经验是把每个文档保持在大小为 50 KB 左右,这样即使读者使用的是最慢的连接也不会感到厌烦。

必要时隔离大图形

为很大的图像专门提供一个链接,该链接可能是一个图像的缩略词,让读者决定是否需要花时间下载整幅图像,以及什么时候下载。而且,由于这样的图像不像内联图像那样和文档中的其他元素混在一起,因此很容易标识并保存在本地存储器上,以供日后研究使用。

指定图像的尺寸

最后,另外一种改善性能的方法是把图像矩形边界的高度和宽度都包含在它的标签里面。通过指定这些尺寸,就可以省去其他一些额外步骤,扩展功能的浏览器不必再用额外步骤下载、检验并计算图像在文档中的尺寸。然而,这种做法有一个不好的地方。如果用户关闭了自动下载图像的功能,浏览器还是会把为图像预留的空间以指定的尺寸显示出来。这样留给读者的通常是一个空的框架,虽然对于该问题还没有解决方案,但是我们还是鼓励您使用这些尺寸属性,因为我们鼓励一切能够改善网络性能的行为。

JPEG 还是 GIF?

如果图像的来源或者你的工具软件更倾向于某一种格式,您可能只能使用 JPEG 或者 GIF 图像中的一种。现在,这两种格式都得到了浏览器的广泛支持,所以不会存在用户能否浏览的问题。

然而,我们还是建议您使用一定的工具去创建或者转换这两种格式,以充分利用它们各自的功能。例如,可以把 GIF 的透明特性应用在图标和小的装饰符号上。而利用 JPEG 来压缩那些较大的颜色丰富的图像,以加快下载速度。

<img> 标签

<img> 标签允许在文档的当前文档流中引用或者插入图形图像。如需了解更多有关该标签的详细信息,请参阅:

关于千图| 赞助千图 |千图首页   Copyright2014千图网   沪ICP备10011451号-6   用时:0.0201秒

千图网提示