今日 Google 塗鴉：CSS Sprites 的原理

黑眼bobo

蝦米！今天都過了一大半還來講解Google塗鴉衝蝦米？很多人可能都已經欣賞完今天的瑪莎葛蘭姆117歲誕辰動畫，關於她為什麼會動起來，其實並不是用以往常見的GIF動畫製成，背後也有一些好玩的背景知識，且聽我們娓娓道來：

如果我們以滑鼠右鍵來點選瑪莎女士的圖片，找到的只是一張她靜止不動的「起手式」而已，你得進一步查看原始碼，或者透過加裝Firebug擴充套件的Firefox瀏覽器（Chrome也有Firebug Lite）來找出其他的隱藏圖片，以及控制他們的程式碼。用Firebug解析會比較簡單，所以我們就用它來當小柯南。

▲在瑪莎的圖片上按右鍵＞檢視圖片看看。

▲結果只有一張靜止不動的起手式，看來另有玄機。

▲安裝Firebug後，只要按右鍵＞觀察元素，左下視窗就會彈出對應的原始碼。

Google首頁雖然簡潔，裡頭的原始碼也不少，透過Firebug便可直接跳到剛剛瑪莎的起手式圖片位置，這張graham11-hp-start.png的前後除了超連結的<a>標籤，再上一層還有一個<div>標籤，也就是被<div id=”hplogo”>和</div>包起來的，都是和瑪莎跳舞圖片相關的物件。

了解這一點之後，再往超連結關閉的</a>標籤往下看，會有一大串像這樣的圖片元件：

<div id="hplogo0" style="left: 307px; top: 48px; width: 88px; height: 89px; background: url("logos/2011/graham11-hp-sprite.png") no-repeat scroll 0px 0px transparent;"></div>

這些圖片從編號「hplogo0」一直遞增到了「hplogo154」，總共有155張，除了編號和其後的座標相關參數不斷微調之外，其中的「background: url("logos/2011/graham11-hp-sprite.png")」這一段是完全不變的，這是為什麼呢？把「logos/2011/graham11-hp-sprite.png」這張圖接到www.google.com網址後面，相信聰明如你一定可以馬上想到答案。

 

▲在瑪莎的圖片上按右鍵，再按「觀察元素」。

▲在起手式的圖片下方會有一大串後續的「分鏡圖」。

▲在網址列輸入www.google.com，再貼上logos/2011/graham11-hp-sprite.png就能看到隱藏版大圖（看原圖）。

發現了嗎？瑪莎跳舞的動畫，簡單的說就是把各個動作（frames）畫在同一張大圖上，再透過不同的座標和位移參數，串成一幅連環動畫而已。這時候好學的朋友舉手發問了：「為什麼不畫成一堆小圖，而是全部拼成一張呢？」這是因為你的瀏覽器每載入一張圖片，就會提出一次HTTP request，155張就是155次，在背景載入一張大圖，透過參數去變換它，會遠比傳155次request有效率得多，這樣的做法就叫做CSS Sprites。

Sprites這個字也相當有梗，喜歡研究遊戲設計的人應該會略知一二，在硬體資源有限的遊戲時代，比方說紅白機裡的瑪莉歐，會把瑪大叔所有的動作：跳躍、走路、蹲下等等拼成一張大圖，然後預先載入記憶體，再根據程式的指示秀出相關的部位。所以如果你在Google裡搜sprites，可以找到不少懷舊遊戲主角的各種姿勢圖片集，甚至有人已經幫你剪接成GIF檔，可以在論壇裡的大頭貼秀一下。

▲這是Google圖片搜尋Sprites的結果。

沒錯，這跟CSS Sprites做的事完全是異曲同工。而後期由於3D繪圖的盛行，Sprites也可以延伸解釋為將2D點陣圖片嵌入在3D場景的技術，回想一下你是不是曾經在遊戲場景裡看到一棵樹或一朵花，走近之後發現只是「紙片樹」或「紙片花」，那就是Sprites了。

當然啦，T客邦網站也有活用到Sprites的技術，你也找到了嗎？（Oops，好像完全沒提到瑪莎女士，再見）