網頁製作中，使用多張圖片、icon再正常不過，但製作中的你是否有實際算過，你到底用了多少張圖片嗎? 影響到底有那些嗎?
網站圖片優化 – Web Image Sprite
圖片，是影響網站效能最大、最常見的原因之一，所以【優化圖片】就成為了網站優化中最直接、最有感的一種方式。
優化圖片的方法有多種，針對不同類型有不同的優化方式，這邊先來講其中一種 Sprite 優化。
什麼是 Sprite
Sprite 中文翻譯叫【精靈圖】，網頁圖片優化中，稱此優化為 Web Image Sprite，用比較通俗的話說，就是將多張圖片組合成一張，所以又被稱為拼合圖。
想了解官方的定義，可以看看維基百科 – 精靈圖的解說。
為什麼要用 Sprite
為什麼要使用 Sprite，好處在於減少零散的檔案，有助於加快你的網頁載入速度，提升用戶體驗。
Sprite 優化的原理是什麼?
要講解為什麼要使用 Sprite，你得先了解圖片的兩個基本概念，分別為：
- 圖片的組成
- 網頁圖片顯示的過程
以下會講解 Sprite 如何基於這兩個概念，達到優化的目的。
淺談圖片的組成
要知道，電腦的世界裡，一切都是一串代碼組成，你所看到的圖片也不例外，圖片中的名稱、格式、大小、顏色…等等的資訊，在一張圖片裡都會記錄到。
用個淺白的舉例，下圖是一張是意圖:
在上圖中，裡面的色塊，代表著圖片相關所佔據的檔案大小，試著想想，假如在製作網頁時，用到了多張圖片會是怎麼樣?
在圖二中，假設圖片都是 JPG 檔案，當你使用 6 張圖片時，其實有5個 JPG 檔案資訊是重複的，理想上重複的東西，能省略的話也不錯。
Sprite 運用圖片組成概念進行優化
所以，依據上面的概念，假設把5張圖片統合成一張，會發生什麼事呢?
圖四示意圖中，你可以看到，將6張圖片整合成一張後，實際少了5張圖片的基本資訊，也因此，實際圖片的 Size ，會比 6 張個別圖片加起來還小，只要圖片檔案變小了，自然就能讓圖片在傳輸中更快，達到圖片優化的目的。
淺談網頁圖片顯示的過程
在這我們先來簡單了解一下，一張圖片要在網頁呈現，實際上經過的流程：
上圖你可以看到，一張圖片要顯示，會經歷發送請求 > 接收請求 > 查找圖片> 發送圖片 > 解析渲覽這6個步驟。
而其中比較特別的是【發送請求】與 【發送圖片】這兩個環節，不論你的圖片是大是小，是否存在，這兩個環節都會占用一定的時間，這時間不會隨著檔案的大小、格式改變，也不會隨著你的程式而變化。
這會與你在的地點、你租用的伺服器地點有關，你可以把這想像成【資料物理距離來回所需耗損的基本時間】會比較好理解(如圖五)。
如果你的所在地，離你的伺服器很遠，那圖五的紅色區塊，時間就會變長，相反，如果你就在你組機旁邊，時間就會變短，任何東西的移動，都逃不過物理距離的影響。
運用 Sprite 減少請求次數
製作網站，用於 icon、Button 、tag…等等的圖片決不會少，當你的圖檔請求數量增多，相對的 【資料物理距離來回所需耗損的基本時間】 也會隨之增加。
在這邊有人會問：「不是都是同步請求嗎？」
這是個好問題，理論上，圖片大多是同步請求，但實務上，多筆資料同步，會存在等待的時間，不管你是同步還非同步，當請求多了，勢必就會影響資料的取用，自然也會在短時間極大的消耗網路資源，擠壓到其他圖片的載入。
製作網頁，不只要考量當下的網路環境，還得考量在網路環境不佳的情況下，能順利加載預覽，其中平衡的拿捏，就有賴每個工程師的經驗了。
所以運用 Sprite，將零散的檔案合成一張，藉此減少請求次數，可以有效提升用戶的體驗、也加快了載入速度。
Sprite 精靈圖怎麼做?
早期製作 Sprite 精靈圖，會由設計將圖片合成一張，再由前端工程師寫好對應的 CSS，但時代進步了~，不用這麼麻煩，這邊推薦兩個辦法製作。
方法一 : 免費 Sprite 製作網站，快速製作你的 Web Image Sprites
推薦一款免費的 Sprite 精靈圖 網站，可以讓你快速製作出所需的 Sprite。
教學步驟
需要時間: 3 分鐘
開始使用 Sprite 精靈圖 網站吧
- 點開 Sprite 精靈圖 網站
- 點選 Clear 清除預設的圖片
- 點選 Open
- 選取你要的圖片
注意不要選太大張的圖片，但畢竟是優化，想必你的單張圖片本身不大。
- 依據個人需求，調整圖片間隔
這邊要注意，請不要設定 0，最少設定 > 2px，可以避免RWD縮放上偏移問題，至於為什麼是2px，經驗法則(如果你對瀏覽器顯示有興趣可以去研究)。
- 按下 Save 儲存你的設定值
- 按下 Download
- 下載 Sprite PNG 圖片與對應的 CSS
按下Download 後會出現下載面板，如果想看HTML 可以點選面板的HTML或 Example看用法
以上就是使用方法，有需要的可以試試看。
此方法適合對象 :
- 網頁新手
- 你的專案很小
- 你懶得寫腳本
- 你的專案太肥大，怕寫壞
方法二 : 透過程式套件自行產出
第二種方法，就是利用 JS 開發程式相關套件或腳本，自行定義產出，不過會需要一點程式基礎，有興趣的不訪多試試。
個人推薦官方網站、購物網站等中、大型專案可以採用此做法，但後續管控要多層心思，但可以為你省去不少麻煩。
此方法適合對象 :
- 新專案
- 想要有良好網站體驗
- 想要在開發階段就兼顧產品效能
- 想進行優化，並且之後自動產出的人
使用 Sprite 精靈圖的注意事項
網站有分為許多性質，而圖片優化中的 Sprite，雖然大多數網站都適用，但卻不能全部使用。
!!!切記，過度優化，也會成為效能殺手!!!
優化的角度，還是必須以網站本身的條件來考量，而 Sprite 圖片的使用方式，也需考量圖片的使用類別，與整個網站的結構規劃，以此來找出最適合的優化方式。
如果想更進一步了解，也可以在底下留言，或到 聯絡我 中留下你的疑問，我會在看到後回覆你，以 Email or 文章的形式回覆你。
結論
Sprite 精靈圖只是圖片優化中使用的其中一種方法，並不是說用了 Sprite 來統合零散的圖檔，網站效能就會直接一步到位，其中要如何達到最好的效能提升、體驗改善，都仰賴工程師不斷 try & error 的過程。
發表迴響