何時使用圖像

對于大多數圖片來說，一張圖片可能勝過千言萬語。但還是要注意，沒有人會注意那些饒舌的人。首先，也是最重要的一點，是要把文檔的圖形作為可視化工具，而不是將其作為無緣無故的裝飾。它們應當支持文本的內容，并幫助讀者在文檔中導航。使用圖像可使文檔內容更清楚，還可以為文檔加注釋或示例。支持內容的照片、圖表、曲線圖、地圖和圖畫等都是很自然的、很合適的選擇項。例如，產品的照片對于在線目錄和購物指南來說是非常關鍵的組成部分。還有具有鏈接功能的圖標和印刷符號，包括具有動畫效果的圖像等，都可以是導向內容或者外部資源的非常有效的可視向導。如果某個圖像對文檔沒有起到任何上述作用，那就應該把它丟到一邊去！

在考慮向文檔添加圖像時，另外一個重要的考慮因素，就是在通過網絡，尤其是通過調制解調器連接傳輸這個文檔時，檢索方面所帶來的時間延遲。一般的普通文檔最多可以容納 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> 標簽允許在文檔的當前文檔流中引用或者插入圖形圖像。如需了解更多有關該標簽的詳細信息，請參閱：

• 教程：HTML 圖像
• 參考手冊：HTML <img> 標簽