紀錄工作經驗、相關知識,解決技術相關問題。

網站優化

【網站優化】你用 Sprite 優化圖片了嗎? 淺談圖片優化原理與思路

Web Image Sprite

Web Image Sprite

網頁製作中,使用多張圖片、icon再正常不過,但製作中的你是否有實際算過,你到底用了多少張圖片嗎? 影響到底有那些嗎?

網站圖片優化 – Web Image Sprite

圖片,是影響網站效能最大、最常見的原因之一,所以【優化圖片】就成為了網站優化中最直接、最有感的一種方式。

優化圖片的方法有多種,針對不同類型有不同的優化方式,這邊先來講其中一種 Sprite 優化。

什麼是 Sprite

Sprite 中文翻譯叫【精靈圖】,網頁圖片優化中,稱此優化為 Web Image Sprite,用比較通俗的話說,就是將多張圖片組合成一張,所以又被稱為拼合圖

想了解官方的定義,可以看看維基百科 – 精靈圖的解說。

為什麼要用 Sprite

為什麼要使用 Sprite,好處在於減少零散的檔案,有助於加快你的網頁載入速度,提升用戶體驗。

Sprite 優化的原理是什麼?

要講解為什麼要使用 Sprite,你得先了解圖片的兩個基本概念,分別為:

  • 圖片的組成
  • 網頁圖片顯示的過程

以下會講解 Sprite 如何基於這兩個概念,達到優化的目的。

淺談圖片的組成

要知道,電腦的世界裡,一切都是一串代碼組成,你所看到的圖片也不例外,圖片中的名稱、格式、大小、顏色…等等的資訊,在一張圖片裡都會記錄到。

用個淺白的舉例,下圖是一張是意圖:

圖一 – 圖片資料佔比示意圖

在上圖中,裡面的色塊,代表著圖片相關所佔據的檔案大小,試著想想,假如在製作網頁時,用到了多張圖片會是怎麼樣?

圖二 – 多張圖片資料佔比示意圖

在圖二中,假設圖片都是 JPG 檔案,當你使用 6 張圖片時,其實有5個 JPG 檔案資訊是重複的,理想上重複的東西,能省略的話也不錯。

Sprite 運用圖片組成概念進行優化

所以,依據上面的概念,假設把5張圖片統合成一張,會發生什麼事呢?

圖三 – Sprite 6張圖片

圖四示意圖中,你可以看到,將6張圖片整合成一張後,實際少了5張圖片的基本資訊,也因此,實際圖片的 Size ,會比 6 張個別圖片加起來還小,只要圖片檔案變小了,自然就能讓圖片在傳輸中更快,達到圖片優化的目的。

淺談網頁圖片顯示的過程

在這我們先來簡單了解一下,一張圖片要在網頁呈現,實際上經過的流程:

圖四 – 網頁圖片顯示過程

上圖你可以看到,一張圖片要顯示,會經歷發送請求 > 接收請求 > 查找圖片> 發送圖片 > 解析渲覽這6個步驟。

而其中比較特別的是【發送請求】【發送圖片】這兩個環節,不論你的圖片是大是小,是否存在,這兩個環節都會占用一定的時間,這時間不會隨著檔案的大小、格式改變,也不會隨著你的程式而變化。

這會與你在的地點、你租用的伺服器地點有關,你可以把這想像成【資料物理距離來回所需耗損的基本時間】會比較好理解(如圖五)。

圖五 – 【發送請求】與 【發送圖片】

如果你的所在地,離你的伺服器很遠,那圖五的紅色區塊,時間就會變長,相反,如果你就在你組機旁邊,時間就會變短,任何東西的移動,都逃不過物理距離的影響。

運用 Sprite 減少請求次數

製作網站,用於 icon、Button 、tag…等等的圖片決不會少,當你的圖檔請求數量增多,相對的 【資料物理距離來回所需耗損的基本時間】 也會隨之增加。

圖六 – 多筆請求,來回所需耗損的基本時間增加示意圖

在這邊有人會問:「不是都是同步請求嗎?」

這是個好問題,理論上,圖片大多是同步請求,但實務上,多筆資料同步,會存在等待的時間,不管你是同步還非同步,當請求多了,勢必就會影響資料的取用,自然也會在短時間極大的消耗網路資源,擠壓到其他圖片的載入。

製作網頁,不只要考量當下的網路環境,還得考量在網路環境不佳的情況下,能順利加載預覽,其中平衡的拿捏,就有賴每個工程師的經驗了。

所以運用 Sprite,將零散的檔案合成一張,藉此減少請求次數,可以有效提升用戶的體驗、也加快了載入速度。

Sprite 精靈圖怎麼做?

早期製作 Sprite 精靈圖,會由設計將圖片合成一張,再由前端工程師寫好對應的 CSS,但時代進步了~,不用這麼麻煩,這邊推薦兩個辦法製作。

方法一 : 免費 Sprite 製作網站,快速製作你的 Web Image Sprites

推薦一款免費的 Sprite 精靈圖 網站,可以讓你快速製作出所需的 Sprite。

教學步驟

所需時間: 3 分.

開始使用 Sprite 精靈圖 網站吧

  1. 點開 Sprite 精靈圖 網站

  2. 點選 Clear 清除預設的圖片

  3. 點選 Open

  4. 選取你要的圖片

    注意不要選太大張的圖片,但畢竟是優化,想必你的單張圖片本身不大。

  5. 依據個人需求,調整圖片間隔

    這邊要注意,請不要設定 0,最少設定 > 2px,可以避免RWD縮放上偏移問題,至於為什麼是2px,經驗法則(如果你對瀏覽器顯示有興趣可以去研究)。

  6. 按下 Save 儲存你的設定值

  7. 按下 Download

  8. 下載 Sprite PNG 圖片與對應的 CSS

    按下Download 後會出現下載面板,如果想看HTML 可以點選面板的HTML或 Example看用法

以上就是使用方法,有需要的可以試試看。

此方法適合對象 :

  • 網頁新手
  • 你的專案很小
  • 你懶得寫腳本
  • 你的專案太肥大,怕寫壞

方法二 : 透過程式套件自行產出

第二種方法,就是利用 JS 開發程式相關套件或腳本,自行定義產出,不過會需要一點程式基礎,有興趣的不訪多試試。

個人推薦官方網站、購物網站等中、大型專案可以採用此做法,但後續管控要多層心思,但可以為你省去不少麻煩。

此方法適合對象 :

  • 新專案
  • 想要有良好網站體驗
  • 想要在開發階段就兼顧產品效能
  • 想進行優化,並且之後自動產出的人

使用 Sprite 精靈圖的注意事項

網站有分為許多性質,而圖片優化中的 Sprite,雖然大多數網站都適用,但卻不能全部使用。

!!!切記,過度優化,也會成為效能殺手!!!

優化的角度,還是必須以網站本身的條件來考量,而 Sprite 圖片的使用方式,也需考量圖片的使用類別,與整個網站的結構規劃,以此來找出最適合的優化方式。

如果想更進一步了解,也可以在底下留言,或到 聯絡我 中留下你的疑問,我會在看到後回覆你,以 Email or 文章的形式回覆你。

結論

Sprite 精靈圖只是圖片優化中使用的其中一種方法,並不是說用了 Sprite 來統合零散的圖檔,網站效能就會直接一步到位,其中要如何達到最好的效能提升、體驗改善,都仰賴工程師不斷 try & error 的過程。

發表迴響