15、网页图像融合与优化全攻略

网页图像融合与优化全攻略

1. 低分辨率图像的使用

低分辨率图像文件大小比完整版本小很多，这意味着它们的下载时间大大缩短。在 HTML 中，你可以指定在网页上显示低分辨率图像，同时下载完整版本的图像，让访问者了解他们正在等待的内容。低分辨率图像通过 lowsrc 属性指定，示例代码如下：

<IMG src="huge_file.gif" width="1200" height="800" lowsrc="small_version.gif">

需要注意的是，低分辨率版本必须与完整版本具有相同的物理尺寸。如果它在网页上占用的空间不同，完整版本的显示将会混乱。

2. 文本与图像的对齐

2.1 图像的内联性质

虽然许多网页设计师将图像视为块级元素，但实际上它们是内联元素，就像用于使文本加粗或倾斜的 <B> 和 <I> 元素一样。因此，你可以将图像直接放在一行文本的中间，它就像句子中的另一个单词一样。不过，由于绝大多数图像比大多数文本大得多，这会带来实际的显示问题，大图像可能会破坏段落的自然流畅性。

2.2 小图标与间隔图像的使用

小图像（称为图标）通常与文本放在同一行，常见的如各种样式的项目符号标记文本行的开始。甚至有人使用微小的不可见图像来增加句子之间的间距。

2.3 图像的 align 属性

图像的 align