2009/03/19

CSS 小精靈

在網頁中,每一個 IMG 元素都會產生一個 HTTP 服務要求。如果你的網頁有十張圖,就會產生 10 個 HTTP 服務要求。依據 Yahoo! 的研究,減少 HTTP 服務要求可以加快網頁的回應速度。CSS 小精靈(CSS Sprites),這個技術源自早年 2D 電玩所使用的小精靈圖片。這個方法就是將十張圖合成一個大圖,然後再用 background-image, background-position 選取要用的圖。如此只要一個 HTTP 服務要求就可以將圖讀下來,

CSS 小精靈在一般流量小的網站可能看不出效益,反而增加網頁設計師的工作量。可是對大流量的網站來說,速度的微小改善,一天下來都可能累積成可觀的量。事實上, Yahoo! 與 Google 都有用到此方法。如果你要到大公司工作,千萬不要說你不會 CSS sprites 喔!

實際使用發現,大圖的檔案大小通常會比小圖各自存檔的總合還小,這主要是因為每一個小圖都要一個顏色表;而在大圖中,則是共用一個顏色表。

下面範例中大圖包含了四個小圖。小圖因為位置放的不好,所以 background-position 調的很辛苦,所以大圖設計良好很重要:

  1. 小圖要水平放置,以減小大圖的高度,通常這樣可得到較小的圖檔。小圖之間距要小;大圖的長寬減小,則可以減少展圖時所需記憶體。
  2. PNG 檔用作背景圖,其透明與漸層效果,在 IE6 會看不到。如果大圖只用到 256 色,可以存成 PNG8 檔案格式,就不會有前述問題。用 PNG8 檔優於 GIF 檔。
  • 調出來的小圖,在不同瀏覽器有小差異。
  • :hover 效果在個人電腦測試正常,移到部落格就沒了,這是受到部落格設定的 A:hover 影響。解決方法是在 .spr#lnk1:hover 加上 background:url()。原本 background:url() 只要在 .spr 宣告一次就可以通用了。在 .spr#lnk2:hover 沒有加 background:url(),這是要示範成功與失敗的情形。

使用 IMG 元素與 clip 特徵來作小精靈。此法近年由 Jennifer Semter 提出。此法中 clip 特徵必須配合 position:absolute 使用;所以元素外要加一層 DIVA 元素,並且宣告 position:relative。下面練習發現此法調座標位置比前面的方法辛苦。下例中的 .jen:hover 拿掉的話,IE6 沒法作 :hover 效果。

  • 上面調出來的小圖,在不同瀏覽器有小差異。
  • 上例雖然用了兩次 IMG,但是一張圖只會下載一次,然後存入本機的接收磁碟區(Cache)中,第二張圖會由接收區讀取。