讓網站的小圖示共用一張圖片

讓網站的小圖示共用一張圖片

為什麼要讓網站的小圖示共用一張圖片呢？其實在流量小的網站是沒差別的，但是在高流量的網站，一個美觀且功能眾多的網頁，光一個瀏覽頁，就會大量的對 Web Server提出HTTP Request。所以將小圖合併成一個大圖檔，則可以降低Web Server的請求處理。流量大的網站常常使用這種技巧，如 Facebook 就大量使用到這樣的方式。

下面範例是使用一張大圖，透過CSS定義，取得小圖的圖形。

我將一組小圖示組成一個大圖：圖示來源

然後利用這張大圖來作一個範例：

大圖

空白圖

<style>
.santa {
    background-image:url(map.gif);
    background-position:0px 0px; width:48px; height:48px;
}
.reindeer {
    background-image:url(map.gif);
    background-position:-49px 0px; width:48px; height:48px;
}
.xmastree {
    background-image:url(map.gif);
    background-position:-97px 0px; width:48px; height:48px;

}
.snowman {
    background-image:url(map.gif);
    background-position:-145px 0px; width:48px; height:48px;
}
</style>

<img src="blank.gif" class=xmastree>聖誕樹
<img src="blank.gif" class=reindeer>麋鹿
<img src="blank.gif" class=santa>聖誕老公公
<img src="blank.gif" class=snowman>雪人

在 Style 裡面的定義 santa （聖誕老公公）這個為例，使用 background-image: url 指定了一張大背景圖，接著使用 background-position 指定起始點為 x y 兩點的位置，並指定 width 和 height 來表示長寬。

當要應用這張指定的區塊圖時，只要在 img 這個標籤內使用 class="santa" 指定 className 即可。但是因為 img 若沒指定 src 會出現 x 圖，所以全部的圖都設 src 為 blank.gif (自己製造的一個 1px 大小的小空白圖)，這樣就可以囉。

那後面就在這個部落格顯示這個範例外觀：
聖誕樹
麋鹿
聖誕老公公
雪人
註：因為這個部落格的CSS定義緣故，所以這邊看到的圖示稍微變調囉。

PHP聯盟 提到...
這種方式被稱為CSS Sprites，這裡有個中文工具可以用：
http://timc.idv.tw/canvas-css-sprites/zh-tw/

Reference:
http://94i.blogspot.com/2009/12/blog-post_3834.html
http://css-tricks.com/css-sprites/
http://timc.idv.tw/canvas-css-sprites/zh-tw/