[心得] 有效減少 HTTP Request的CSS Sprites

[Fishmeal ( )]

原文連結：http://superlevin.pixnet.net/blog/post/29936462
　　CSS Sprites並不是什麼新技術，Dave Shea(CSS Zen Garden創辦人)在
２００４年於A List Apart(ALA)就曾經提出CSS Sprites: Image Slicing’
s Kiss of Death這篇文章了。

　　簡單的說，CSS Sprites就是把網頁上的圖片全部放在同一張圖片上，而
網頁載入時就祇要載入這張已經結合起來的圖片。再利用CSS的background-image
與background-position來調整圖片，讓要顯示的部位顯示出來。
　　對瀏覽器而言，如果網頁中含有背景圖30張，就會有30個http request，
如果合成一張後，就祇要1個http request，如果利用http cache的話，更可
以讓圖片cache在瀏覽器中。

　　像facebook（臉書）就利用這張圖片來處理icon；YUI(Yahoo User Interface)
也利用這張圖片來做css sprites；而這篇文章也提出台灣著名的網站funP，也是
利用這樣子的技術。

　　這裡示範一個非常簡單的範例：

素材：http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png

原始碼：

Body前加上

 <style >
  .min, .max {
    width:40px;    //定義按鈕的寬度
    height:20px;  //定義按鈕的高度
    background-image:
    url(http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png);
    //圖檔
    background-repeat: no-repeat; // 不重覆背景圖片
    text-indent:-999em;   //隱藏文字
  }
  .max {
    background-position: 0 -750px;
  }
  .min {
    background-position: 0 -800px;
  }
 </style>

body後加上

<div>上一筆</div>
<div>下一筆</div>

小技巧：

使用css sprites最麻煩就是要計算位置，可以利用小畫家開啟後，利用選擇工具
指向該圖示的起始位置。右下角就會出現位置的座標。

--
我不是高手, 高手是正在銀幕前微笑的人

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 118.233.206.45
推 kewang:http://www.wowbox.com.tw/blog/article.asp?id=3442 這篇
→ kewang:也可以給大家參考看看  有利有弊囉
→ TonyQ:不過其實實務上還是有需要克服的問題 , 很多問題不太容易用
→ TonyQ:background來解決....
→ TonyQ:另外如果那張圖太大 , 也有不同的煩惱 -w-;;
→ TonyQ:另外其實位置不用自己自己算 ,這個有工具精靈.
→ TonyQ:http://spritegen.website-performance.org/
→ TonyQ:我在一年前曾經針對兩個project 試著採用過這個solution ,
→ TonyQ:我自己的感想是綁手綁腳的.
推 tomin:有人是用clip:rect()解法　而不是background
→ tomin:clip比較是完全解法　但background我覺得比較容易使用
→ tomin:           美
→ tomin:那網站看來是小變大　但若是美工大圖要切小圖　大變小
→ tomin:有sprite可以省了這份工　不用切出一個一個小檔案
→ TonyQ:我只有一點淺薄印象碰到需要延展的部分會很有問題.(不確定)
→ tomin:我幾個月前使用　是覺得很好用　省事　又提升效能
→ TonyQ:不過如果大圖靠太近還是很麻煩啊 , 瀏覽器抓pixel 有時候
→ TonyQ:會多1少1 , 我覺得這東西是適用中型圖量網站的, 太小太多用
→ TonyQ: , 一個是沒啥意義 , 一個是問題多.
推 tomin:各瀏覽器抓的位置　應該是一致的　是看圖的相對x,y
→ tomin:我看很多大站　圖都超近的　可以抓很準吧
→ tomin:只是人肉眼去看時　要對比較久
→ tomin:圖當然是選那些曝光率高的做sprite  特定商品圖就不必了
推 zhengyao:想起已前舊遊戲也是從1張大圖來擷取要用的部分......
→ olctw:中文工具： http://timc.idv.tw/canvas-css-sprites/zh-tw/
推 edl2000:做法不難, 我蠻喜歡用這種做法