在主页的设计制作中,图片的应用非常重要,特别是制作个人主页时,大家都爱放上几张自己满意的靓照。但图片大了会降低主页的显示速度,其结果经常是浏览者尚未等到你的图片显示完就已经不耐烦地关掉了浏览窗口,不过,如果因追求显示速度而让主页中没有了图片的装饰,效果定会失色不少。如何才能达到两全其美的效果呢?细心的朋友会发现,为了加快主页图片的显示速度,许多优秀网页都采用了一定的图片制作技巧。例如将一张大图片分割为几张小图片来分别显示就是方法之一,这样既能不破坏图片的质量,保证图片的清晰度,又能加快图片的加载速度。分割图片的方法较多,本文介绍的是如何使用最常见的软件实现图片在主页上分块显示的技巧。
我们使用最常用的PhotoShop来对图片进行分割处理。打开PhotoShop,打开欲进行处理的图片,选取View\Show Rulers(显示标尺)显示出横向和纵向标尺。将鼠标移至标尺处,当鼠标变成箭头状时,向下或向右就可以在图中拉出蓝色的引导线(辅助线),再使用PhotoShop工具栏中的移动工具来调整引导线的位置,直到用引导线将图片分为大小合适的几块。
定位好引导线的操作后,即可开始分割图片,选取PhotoShop工具栏的圈选工具,注意在操作前先选择View\Snap to Guide(贴近引导线),这样在选取每一小块图片时,框选的虚线就会自动贴近这些引导线。这样在以后显示图片时才不会出现图片接缝不吻合的现象。
接下来,依次选取图片中的某一块,然后选取Edit\Copy(CTRL+C)将它拷贝,接着建立一个新文件(CTRL+N),按CTRL+V将该图片贴入新文件中,按CTRL+E合并图层,接着选File\Export(输出)\GIF89A Export,在出现的选框中选Exact(精确)并确定,为它取一个新的文件名。按上述步骤依次将所有的小块图片选取、拷贝、粘贴、合并、输出为新文件。这样就完成了图片的“大卸八块”过程。
图片的分割处理只是工作的一部分,接着就是将这些图片分别插入主页中。
这里我们须注意的很重要的一步,就是一定要定义图片的长度及宽度,即Width=XXX Height=XXX。也许你会奇怪,为什么要定义图的长度和宽度呢?不定义长度和宽度也一样能显示嘛?让我们一起来看看其中的奥妙,当浏览器载入一个页面的时候,它首先会读所有的源代码,然后逐条解释,遇到一条执行一条,所以如果你在代码中定义了图片的长度和宽度,比如读到Width=103 Height=57,浏览器就在页面中划出一个宽103高57区域给图片慢慢显示,然后马上就安排邻近文字或图片的排版。如果没有定义它的长度和宽度,而仅仅是< img src=“test1.gif”alt=“左1”>, 浏览器就无法确定图片的区域,只能等图片显示了一部分,确定了图的区域后,才安排其他文字和内容的排版。这样就会大大影响了浏览速度。
为了证明上述方法的切实有效,我们可以通过Giffy View这个软件来检测一下处理前后加载一张图片所需的时间。Giffy View的界面非常简洁。
主要有Transfer Rate(转换速度),通过这个下拉框,你可以选择不同的MODEM速率来测试,选择后按下Load Now(现在加载),在下面会出现各种测试数据,如:Frame(框架)、Delay(延迟)、Bytes Displayed(字节显示)、Elapsed Time(所用时间)、Estimated Remaining Time(估计剩余时间)、Comment(注释)。
我们先测试使用33.6Kbps Modem时加载一张未经处理的63K图片所需的时间,其结果是18秒(这是理论值,由于网络的原因,我们在实际使用过程中的显示速度还达不到这么快)。接着我们再来看一下,按照上文所述方法处理后的图片加载所需的时间,该图片被分割成12块,其中最大的为7K最小的为5K,测试显示加载一张7K的图片所需时间为1秒,以依次显示来计算,显示整个图片的时间为12秒,比未处理时节约了1/3的时间。事实上,由于在制作主页过程中确定了图片的宽度和高度后,图片就会同时进行加载,这样就进一步加快了速度。
所以,有的时候,主页的浏览速度慢,并不一定都是服务器的问题,通过对图片的分割处理,可加快图片的加载速度;确定每张小图片的长度及宽度后,又能进一步提高整个页面的浏览速度。可见,这些看来并不起眼的小技巧,却能使网页最快地展现在浏览者的屏幕上。