iT邦幫忙

DAY 10
1

前端小字典三十天【每日一字】系列 第 10

Day10– 前端小字典三十天【每日一字】– CSS Sprites

上一篇文章介紹透過data URI scheme的方法
來減少HTTP request,優化讀取網站的效能。

今天來筆記CSS Sprites,也可以減少HTTP request的次數,減少伺服器的負擔。

CSS Sprites是什麼?

CSS Sprites是一種網站圖片應用的方法,可以把很多張小圖合併到一張大圖裡。
例如:原本10張小圖會觸發10次HTTP request,
但透過CSS Sprites就可以只觸發1次HTTP request,

如此一來,只需要load一張圖,降低網頁載入的時間。

打不倒的售票亭-kktix 為例:

首頁功能介紹有很多小圖示,像這樣合在一起。

原本有12張小圖(第5張的圖是白色的,所以看不到),合成一張大圖,
只會觸發1次HTTP request,而且圖檔的體積也會變小。

CSS Sprites如何應用?

將小圖合併成大圖之後,再使用CSS下列屬性來應用。

background-image 指定背景圖片路徑來源
background- repeat 決定背景圖片如何重複
background-position 設定背景圖片的位置、座標

再以打不倒的售票亭-kktix 為例:

手機圖示的css碼如下:

.introduction .mobile {
    height: 32px;
    width: 32px;
    background-image: url(/assets/sprites-s9590c01713-3cae6af6ca039cde1766e750bd8afa15.png);
    background-position: 0 -616px;
    background-repeat: no-repeat;
}

指定圖片的大小

height: 32px;
width: 32px;

指定圖片的路徑來源

background-image: url(/assets/sprites-s9590c01713-3cae6af6ca039cde1766e750bd8afa15.png);

指定圖片的座標

background-position: 0 -616px;

指定圖片不重複

background-repeat: no-repeat;

製作CSS Sprites圖片有什麼方法?

1. 使用photoshop 把很多小圖拼成一張大圖。
優點:開photoshop檔案修改後,直接轉成一張大圖。
缺點:開發時需要將每張圖有規律地排列定位、修改時需重新設定圖片座標,維護有點麻煩。

備註:GuideGuide 是一個免費的 Photoshop 外掛程式,
可以快速產生參考線,輔助你定位圖片。
參考文章:http://dclick.fourdesire.com/2013/03/08/css-sprite?ref=extended

2. 透過線上或軟體的小工具。
優點:只要簡單上傳修改後的圖片,就可以幫你拼成一張圖片,
並產生完整的css程式碼給你。
缺點:每次修改要開photoshop檔案,轉存修改的小圖,
再上傳到工具裡,維護上也是比較麻煩。

例如:CSS Sprites Generator

3. 藉由Sass 和 Compass 自動產生CSS Sprites。
優點: 修改圖檔後,無需上傳圖檔,自動幫你拼成一張大圖,並產生CSS程式碼。
缺點:需要額外具備Sass 技能。

小結:
這三種方法我都有使用過,第3種方法雖然一開始要學習Sass,
需要一些準備,可是CSS Sprites透過Sass 和 Compass來產生,真的很快速方便。

參考資料

w3schools-CSS Image Sprites
http://www.w3schools.com/css/css\_image\_sprites.asp

網頁圖片整理術:CSS Sprite的應用
http://dclick.fourdesire.com/2013/03/08/css-sprite?ref=extended

How to automatically generate CSS sprites with Sass and Compass
http://www.codechewing.com/library/automatically-generate-css-sprites-with-sass/

How to use CSS sprites
http://www.feedthebot.com/pagespeed/combine-images-css-sprites.html

今日 Google 塗鴉:CSS Sprites 的原理
http://www.techbang.com/posts/5803-today-google-doodle-css-sprites-principle

baidu-css sprite
http://baike.baidu.com/view/2173476.htm


上一篇
Day9– 前端小字典三十天【每日一字】– Base64
下一篇
Day11– 前端小字典三十天【每日一字】– Cookies
系列文
前端小字典三十天【每日一字】30

尚未有邦友留言

立即登入留言