網(wǎng)頁中圖片的顯示及其尺寸的控制

計麗娟

（赤峰學(xué)院 計算機與信息工程學(xué)院，內(nèi)蒙古 赤峰 024000）

隨著計算機網(wǎng)絡(luò)的不斷發(fā)展與壯大，網(wǎng)頁制作也隨之成為的一門新型的科學(xué)技術(shù).而網(wǎng)頁中不可避免的要包含一定數(shù)量的圖片，因為圖片在增加網(wǎng)頁吸引力的同時能給訪問者提供更多叫直接的信息，同時圖片也較少受計算機平臺、地域、和語種的限制，能更多、更形象的體現(xiàn)出網(wǎng)頁制作者的創(chuàng)造力和展示自己的能力.

1 問題的提出

雖然圖片具有上述優(yōu)勢，但是由于圖片是在Internet網(wǎng)絡(luò)上傳送的，而目前Internet的傳送速率還不是很理想，特別是對于通過快速撥號上網(wǎng)的用戶更是如此，因此圖片的大小在很大程度上影響著網(wǎng)頁的下載時間，制作不好的圖片文件下載時更會浪費Internet的帶寬.

圖片在網(wǎng)頁中有畫龍點睛的作用，它能裝飾網(wǎng)頁，表達個人情調(diào)和風(fēng)格，但在網(wǎng)頁中加入的圖片越多，瀏覽的速度就越會受到影響，也許會使用戶因等待時間太長而離開頁面，起到適得其反的作用.

由此可見，我們在制作網(wǎng)頁時優(yōu)化網(wǎng)頁中圖片的大小是非常關(guān)鍵的，優(yōu)化后的圖片也許僅僅減少了幾千字節(jié)，但當(dāng)網(wǎng)頁中不止一幅圖片，或不止一個用戶且不止一次的訪問該網(wǎng)頁時，節(jié)省的下載時間和通道帶寬將是巨大的.

優(yōu)化網(wǎng)頁中圖片的大小總體上可以從以下兩方面考慮：

第一，根據(jù)具體情況選擇適當(dāng)?shù)膱D片格式；第二，運用縮略的思想適當(dāng)?shù)膲嚎s圖片的大小.

1.1 制作網(wǎng)頁時幾種常用的圖片格式

網(wǎng)頁中圖片的格式可以是 GIF、BMP、JPG、PSD、TIF、PNG等，其中使用最廣泛的主要是GIF和JPEG兩種格式.

（1）GIF(Graphics Interchange Format)的圖像深度從lbit到8bit，也就是說它形成的是一種8位的圖片文件，所以GIF最多支持256種色彩的圖片，用這種格式存儲圖片可能會損失圖片的色彩.這就是為什么GIF格式不適用于攝影或高色彩的圖片.GIF格式的另一個特點是其在一個GIF文件中可以存多幅彩色圖像，如果把存于一個文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡單的動畫.另外，GIF格式的圖片還具有有限度的透明性.

（2）JPG是 JPEG（Joint Photographic Experts Group）的縮寫，它支持24bit真彩色是最常用的圖像文件格式，是一種有損壓縮格式，能夠?qū)D像壓縮在很小的儲存空間，圖像中重復(fù)或不重要的資料會被丟失，因此容易造成圖像數(shù)據(jù)的損傷，也就是說它無法重現(xiàn)原圖.尤其是使用過高的壓縮比例，將使最終解壓縮后恢復(fù)的圖像質(zhì)量明顯降低，如果追求高品質(zhì)圖像，不宜采用過高壓縮比例.但是JPEG壓縮技術(shù)十分先進，它用有損壓縮方式去除冗余的圖像數(shù)據(jù)，在獲得極高的壓縮率的同時能展現(xiàn)十分豐富生動的圖像，換句話說，就是可以用最少的磁盤空間得到較好的圖像品質(zhì).這是我們不可否認的，但JPEG格式的圖片的另一個特點就是它相當(dāng)難編輯的.如果你打開了一張JPEG圖片并進行編輯，你所編輯的是解釋過的位圖而不是JPEG數(shù)據(jù)本身.這一點是在進行圖片編輯時特別需要注意的.

圖片文件的存儲格式有很多種，這里僅就比較常用的GIF和JPG做了簡單的介紹，具體考慮時要從質(zhì)量、靈活性、效率等各個方面進行綜合評價，這樣才可以得到最適當(dāng)?shù)膱D片文件格式.

1.2 縮略圖的引入

以上介紹的是選擇適當(dāng)?shù)母袷揭詫D片進行優(yōu)化，但是在一些以產(chǎn)品介紹、旅游風(fēng)光、個人影集展示等為主題的網(wǎng)站中，往往會用到大量的圖片，這就使得即使是再適當(dāng)?shù)膱D片格式也不能從根本上解決問題.我們所面臨的問題是如何在網(wǎng)頁中顯示盡可能多的圖片，同時網(wǎng)頁的下載速度又不會讓人大失所望？

這里我們所要提到的是一種不僅讓圖片所占用的空間大大減小而且還要讓它在顯示的大小上也可以如人所愿.這是一種提取縮略圖的方法即通過一種方法將原先大的圖片重新取樣，使圖片的尺寸減小，并將圖片另存，在網(wǎng)頁中自動將小圖連接到原圖.這樣，大大的加快了帶圖片的頁面在瀏覽器中打開的速度，這樣做的另外的一個好處就是訪問者訪問頁面時，可以通過瀏覽縮略圖來決定是否需要瀏覽原圖，這一點無論是從網(wǎng)絡(luò)速度還是對訪問者本人而言都是一種效率的提高.

1.3 生成縮略圖的算法

生成縮略圖的算法如下：

2 圖片在網(wǎng)頁中顯示時尺寸的控制

以上的函數(shù)描述的是如何生成圖片的縮略圖，但為了保持生成的縮略圖不失真，縮略圖的尺寸并不能像我們想象中無限制的縮小，而應(yīng)該控制在一定范圍之內(nèi)，但是也許我們在網(wǎng)頁需要加入的并不是縮略圖原樣大小的圖片而或大或小的能夠很好的符合網(wǎng)頁布局的圖片，這樣就需要對要顯示的縮略圖進行適當(dāng)?shù)男揎椇拖薅ǎ蛊滹@示效果能夠如人所愿.

我們通過這樣的語句來控制圖片在網(wǎng)頁中顯示的尺寸：

①處表示的是圖片存放的絕對路徑；

②處可以是表示圖片的長或?qū)挼囊粋€變量，也可以同時把長和寬都給定了，當(dāng)只給定一個變量時另外的一個會根據(jù)原先的長寬比自動進行相應(yīng)的轉(zhuǎn)換.

2.1 問題的產(chǎn)生

但是這樣做的結(jié)果并沒有達到預(yù)期的效果，圖片顯示的大小并不是我們所設(shè)定的值，也就是說表示圖片的長寬的數(shù)據(jù)并沒有得到及時的修正，必須在執(zhí)行一次刷新以后，圖片才能按照我們所設(shè)定的尺寸去顯示.

2.2 問題的解決

為了解決這樣的問題，我們在數(shù)據(jù)庫中加入了一個標(biāo)釋圖片的長和寬中較長的一個的字段maxLength，作為圖片的基本信息，而程序中將控制圖片顯示的語句改為：

這樣的一個數(shù)據(jù)是在生成縮略圖時便自動添加到數(shù)據(jù)庫中的，當(dāng)需要顯示縮略圖時，我們再把它從數(shù)據(jù)庫中讀出來用以限定圖片的顯示，這樣做的結(jié)果就是完全的“示隨人愿”！

3 小結(jié)

所以說網(wǎng)頁中圖片的加入是給網(wǎng)頁的顯示帶來了意想不到的效果，但同時也大大的加重了網(wǎng)頁在加載時的負荷，我們所能做的就是盡量的減輕這個額外的負擔(dān)，但減輕并不等于完全的不存在，這個讓“減輕”無限的接近“不存在”的工作還讓廣大的網(wǎng)頁制作者有很大的發(fā)揮空間.以上僅是我個人的一點拙見，希望可以得到大家更多更好的意見和建議，謝謝！

〔1〕孫衛(wèi)琴，李洪成.Tomcat與Java Web開發(fā)技術(shù)祥解[M].北京：電子工業(yè)出版社，2004.

〔2〕王鐵敬.Java編程一步到位[M].北京：北京中軟電子出版社，2002.

〔3〕黃理，洪亮，曹林有，張勇.Jsp 高級編程[M].北京：北京希望電子出版社，2001.