[問題] CSS Sprites

看板Web_Design作者 (皮爺)時間13年前 (2012/04/28 01:24), 編輯推噓9(9推 0噓 15→)
留言24則, 9人參與, 最新討論串1/1
標題很不好 因為我不知道關鍵字是什麼 問到改標 :D ------------------------------ 平常逛到一些風格很喜歡的網站 就會去看看人家結構長什麼樣子 常常看到一種手法是把多個同類的項目用圖(比如一系列ICON) 擺在同一張圖檔裡面 之前看到某個JS函數庫用的css也是用這種手法切圖 想問一下這種做法好處是什麼? 它有名字可稱呼嗎? 如何實作的呢? 感謝~~~ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 114.44.11.80
→
04/28 02:19, , 1F
這法名稱忘記了，它可以有效減少圖檔大小，也會減少下載
04/28 02:19, 1F
→
04/28 02:19, , 2F
的次數(放在一張所以只要1次)，所以網頁會變快
04/28 02:19, 2F
推
04/28 03:12, , 3F
CSS Sprites
04/28 03:12, 3F
推
04/28 12:14, , 4F
最典型的就是Yahoo的首頁囉:)所有的icon都是一張圖~
04/28 12:14, 4F
推
04/28 21:04, , 5F
這方法其實寫習慣了 會很方便
04/28 21:04, 5F
→
04/29 04:39, , 6F
3Q~~
04/29 04:39, 6F
※ 編輯: p52189 來自: 114.44.10.95 (04/29 04:41)
→
04/29 07:08, , 7F
最大好處是減輕 server session 負擔
04/29 07:08, 7F
→
04/29 07:10, , 8F
一頁30張小圖片，一萬人同時連上來，就會有30萬個request
04/29 07:10, 8F
→
04/29 07:11, , 9F
雖然說現在的瀏覽器都會限制最多同時發出 4 requests..
04/29 07:11, 9F
→
04/29 07:13, , 10F
而且網路封包一個 1500B，就算圖片只有 200B 還是佔用一封包
04/29 07:13, 10F
→
04/29 07:15, , 11F
30 張小圖就用掉 30 封包，一張大圖只要 5~6 封包就傳完
04/29 07:15, 11F
→
04/29 07:18, , 12F
再加上 TCP 連續傳輸多封包時的加速...
04/29 07:18, 12F
推
04/29 19:42, , 13F
css sprites是好物~~
04/29 19:42, 13F
推
04/29 23:41, , 14F
好處還有做hover的時候不會有閃動的現象
04/29 23:41, 14F
→
04/29 23:59, , 15F
壞處是對於要repeat的圖 很難搞
04/29 23:59, 15F
推
04/30 00:39, , 16F
如果是要repeat全部的大背景應該沒辦法用這個哦囧"
04/30 00:39, 16F
→
04/30 00:40, , 17F
不過如果一般的圖一張，repeat-x的一張，repeat-y的一張
04/30 00:40, 17F
→
04/30 00:40, , 18F
不知道會如何呢..一張一張加上去，有版大是這樣做的嗎?
04/30 00:40, 18F
→
04/30 09:05, , 19F
樓上 目前好像只有這種解
04/30 09:05, 19F
推
04/30 10:32, , 20F
thanks~
04/30 10:32, 20F
推
04/30 13:28, , 21F
CSS Sprites 是一種減少request的方法 另外還有data url您
04/30 13:28, 21F
→
04/30 13:28, , 22F
也可以試試
04/30 13:28, 22F
推
04/30 14:23, , 23F
server的負擔是考量但不是最大的因素 重點是front end的
04/30 14:23, 23F
→
04/30 14:23, , 24F
site speed 另外和session也沒有什麼關係
04/30 14:23, 24F
‣ 更多 p52189 的文章
文章代碼(AID): #1FcjP3ui (Web_Design)