使用影像地圖(Image Maps)技術
一般在做 Navigation Bar 時，使用圖像連結來導覽會比用文字連結要來得美觀。比較早以前的做法就是每一個連結使用個別的圖檔，如下列的範例所示：
<div>
<a href="home.html" title="go to home page"><img src="home.gif" alt="home" /></a>
<a href="goods.html" title="go to goods page"><img src="goods.gif" alt="goods" /></a>
<a href="memo.html" title="go to memo page"><img src="memo.gif" alt="memo" /></a>
<a href="forum.html" title="go to forum page"><img src="forum.gif" alt="forum" /></a>
<a href="help.html" title="go to help page"><img src="help.gif" alt="help" /></a>
</div
如果改為使用影像地圖的方式，將所需要的圖檔整合至一張圖檔中，即不會破壞原有的美觀也可以降低 HTTP Requests 次數，提昇效能加速網頁反應時間。
範例如下：
<img border=0 src="imagemap.gif" usemap="#map1">
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="home.html" title="Home">
<area shape="rect" coords="36,0,66,31" href="goods.html" title="Goods">
<area shape="rect" coords="71,0,101,31" href="memo.html" title="Memo">
<area shape="rect" coords="106,0,136,31" href="forum.html" title="Forum">
<area shape="rect" coords="141,0,171,31" href="help.html" title="Help">
</map>
註：
因為第一種方式會造成瀏覽器向伺服器發出5個 HTTP Requests，每發出一個 HTTP Request 伺服器就必須消耗效能以及產生回應時間。還有必須要考量到發出請求與得到回應時的往返時間，這些都將影響到終端使用者瀏覽頁面時，頁面顯示的時間。如改以使用第二種方式，因為影像地圖是依據使用者所點選的地方來產生不同的連結目的，所以只需要一張圖檔就可以實現瀏覽列並將 HTTP Request 次數降低到只需要一次。(影像地圖又分為伺服端與客戶端技術，詳細不同以及使用方式請參閱 XHTML 相關技術。在此所使用的技術為客戶端的影像地圖)
使用 CSS Sprites 技術
此技術與影像地圖一樣，將所需要的圖檔整合至一張圖檔中，但比影像地圖技術的使用更為靈活。CSS Sprites 主要的核心概念，使用了 background-image 以及 background-position 來控制 HTML 元素在圖檔上的位置。請看以下範例，來理解技術的核心概念：
<style type="text/css">
div#navbar {
background-color:#F4F5EB;
border: 2px ridge #333;
width:180px;
height: 32px;
padding: 4px 0 4px 0;
}
#navbar span {
width:31px;
height:31px;
display:inline;
float:left;
text-indent:-9999px;
background-image:url(spritebg.gif);
}
.home { background-position:0 0; margin-right:4px; margin-left: 4px;}
.goods { background-position:-32px 0; margin-right:4px;}
.memo { background-position:-64px 0; margin-right:4px;}
.forum { background-position:-96px 0; margin-right:4px;}
.help { background-position:-128px 0; margin-right:0px;}
</style>
<div id="navbar">
<a href="home.html" title="go to home page"><span>Home</span></a>
<a href="goods.html" title="go to goods page"><span>Goods</span></a>
<a href="memo.html" title="go to memo page"><span>Memo</span></a>
<a href="forum.html" title="go to forum page"><span>Forum</span></a>
<a href="help.html" title="go to help page"><span>Help</span></a>
</div>
註：
影像地圖的技術在將多張圖整合至同一張圖檔時必須要是一張接續著一張圖檔，而 CSS Sprites 就沒有此項限制所以就更可以靈活運用了。在此範例中，CSS 也只用了一張圖檔，所以瀏覽器只會產生一個 HTTP Request，因而加速了頁面的顯示速度。
使用行內圖檔(inline images)技術
藉由使用 data: URL 結構，你可以在不需要額外的 HTTP Requests 的情況下在頁面中嵌入圖檔。雖然它在 Internet Explorer 中尚未支援，但它為其它的瀏覽器所帶來的好處，在這裏還是提一下這技術；說不定哪天 IE 也會開始支援了咧~ (要了解更多相關細節，請參閱 規格書 )
在 URL 中的 data 遵循以下格式：
data:[<mediatype>][;base64],<data>
使用範例：
<IMG ALT="Red Star"
SRC="data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWW
lvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEA
AAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBia
tt2H1KBLQRFIJAIKywRgmhwAIlEEADs=">
目前所看到 data: 只用在行內圖檔，但它可以用在任何可以設定 URL 的地方，包含 <script> 以及 <a> 標記。因為行內圖檔是嵌在頁面之內，所以當換頁時是不會被快取起來的。不要將行內圖檔的技術用在首頁的 Logo，那會增加頁面的大小。(因為圖檔經過編碼的關系)
比較聰明的方式是在 CSS 裏使用行內圖檔當作背景圖。將此 CSS 規則置於外部樣式檔，而此 data 會快取在樣式檔裏。以下範例是沿用上面的例子，差別在於這裏使用了行內圖檔的技術當作背景圖：
.home { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKA...);}
.goods { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAABCp...);}
.memo { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAADlCr...);}
.forum { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAA...);}
.help { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAALW1t...);}
看到這裏，你一定覺得對圖檔做編碼會是個麻煩。較簡單的方式就是使用 PHP 的函數： file_get_contents 讀取圖檔，經編碼後再插入到頁面裏產生外部樣式檔。大概就是像這樣子：
.home { background-image: url(data:image/gif;base64,
<?php echo base64_encode(file_get_contents("../images/home.gif")) ?>);}
.goods { background-image: url(data:image/gif;base64,
<?php echo base64_encode(file_get_contents("../images/goods.gif")) ?>);}
.memo { background-image: url(data:image/gif;base64,
<?php echo base64_encode(file_get_contents("../images/memo.gif")) ?>);}
.forum { background-image: url(data:image/gif;base64,
<?php echo base64_encode(file_get_contents("../images/forum.gif")) ?>);}
.help { background-image: url(data:image/gif;base64,
<?php echo base64_encode(file_get_contents("../images/help.gif")) ?>);}
註：
因為使用了5個 file_get_contents ，所以瀏覽器會產生5個 HTTP Requests。使用此技術會多出額外的 HTTP Requests，但有個額外的好處就是會把圖檔快取在樣式表當中。
合併 JavaScript 與 StyleSheet 檔案
通常一個中大型網站會因為不同的目的而使用好幾個 JavaScript 與 StyleSheet 檔案，但這樣子會增加不少 HTTP Requests 次數。建議可能的話，儘量依每一頁面目的的不同而整併所需要的 JavaScript 與 StyleSheet 至個別單獨的檔案中，來降低 HTTP Requests 的次數以增進伺服器回應時間與網頁顯示的效能。當然這個建議並非適用於所有的網站，一般會依所注重的目標來考量要如何切分 JavaScript 與 StyleSheet。例如，較大型的網站會考量管理的方便性，會以模組化的方式將 JavaScript 或 StyleSheet 切分成好幾個檔案，犧牲幾個 HTTP Requests 所耗損的效能以換取更好的管理。所以要如何管理網站的 JavaScript 與 StyleSheet 並沒有絕對的答案，而是看你著重於效能或管理方便性來決定。
