小码哥的IT人生

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

HTML基础 2023-07-13 10:37:32小码哥的IT人生shichen

多媒体教程 - 在 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> 标签允许在文档的当前文档流中引用或者插入图形图像。如需了解更多有关该标签的详细信息,请参阅:

  1. 教程:HTML 图像
  2. 参考手册:HTML <img> 标签

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024