網頁中圖片的顯示及其尺寸的控制

計麗娟

（赤峰學院 計算機與信息工程學院，內蒙古 赤峰 024000）

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

1 問題的提出

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

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

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

優化網頁中圖片的大小總體上可以從以下兩方面考慮：

第一，根據具體情況選擇適當的圖片格式；第二，運用縮略的思想適當的壓縮圖片的大小.

1.1 制作網頁時幾種常用的圖片格式

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

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

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

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

1.2 縮略圖的引入

以上介紹的是選擇適當的格式以對圖片進行優化，但是在一些以產品介紹、旅游風光、個人影集展示等為主題的網站中，往往會用到大量的圖片，這就使得即使是再適當的圖片格式也不能從根本上解決問題.我們所面臨的問題是如何在網頁中顯示盡可能多的圖片，同時網頁的下載速度又不會讓人大失所望？

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

1.3 生成縮略圖的算法

生成縮略圖的算法如下：

2 圖片在網頁中顯示時尺寸的控制

以上的函數描述的是如何生成圖片的縮略圖，但為了保持生成的縮略圖不失真，縮略圖的尺寸并不能像我們想象中無限制的縮小，而應該控制在一定范圍之內，但是也許我們在網頁需要加入的并不是縮略圖原樣大小的圖片而或大或小的能夠很好的符合網頁布局的圖片，這樣就需要對要顯示的縮略圖進行適當的修飾和限定，使其顯示效果能夠如人所愿.

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

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

②處可以是表示圖片的長或寬的一個變量，也可以同時把長和寬都給定了，當只給定一個變量時另外的一個會根據原先的長寬比自動進行相應的轉換.

2.1 問題的產生

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

2.2 問題的解決

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

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

3 小結

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

〔1〕孫衛琴，李洪成.Tomcat與Java Web開發技術祥解[M].北京：電子工業出版社，2004.

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

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