網頁效能優化-圖片篇
1. 在嵌入圖片的時候設定尺寸
例如：
<img src=”login.png” width=”52px” height=”20px”>
取代
<img src=”login.png”>
說明：因為瀏覽器在讀取圖片的時候，如果沒有告訴瀏覽器圖片大小，瀏覽器就必須自行計算圖片大小，計算後才讀出來
2. 依照原始尺寸呈現
例如：
download.png 圖片規格是 52*20 px
放在網頁上的大小就使用 width=”52px” height=”20px”
說明：因為不管是放大或縮小，瀏覽器都必須花費時間和效能(使用者的電腦效能)去處理(壓縮或放大)這張圖，因此效能大為降低
碎碎念：尤其是大圖變小圖的狀況更為明顯
3. 用小圖代替大圖
例如：
在網頁裡面經常會出現一個長形的工具Bar，如下圖
因為這個長形的色塊，其實他的顏色都一樣，而且以水平的方式延伸，這時候我們就可以取代成
background.png圖片規格是 1*20
#title{
background-image:url(“background.png”);
background-repeat:repeat-x;
}
像下面這張圖，Facebook 也是這麼處理的
說明：其實兩者呈現效果一樣，但是因為瀏覽器在讀取大圖的時候使用的效能和時間會比小圖來的吃重，而且只要伺服器的設定做好，小圖載入第一次之後，剩下repeat的部分可以使用緩存，大大減少伺服器和瀏覽器的負荷量
P.S.：垂直的方式指要改成 repeat-y，漸層的色塊也可以使用哦
4. 把圖片優化
說明：設計師使用專業軟體設計好的圖片，會加上許多的不必要資訊，而且網頁上有大部分的圖片都不需要太高品質的圖片，例如色塊、按鈕…等，因此這時候可以透過一些工具軟體將圖片優化，把品質降低一點、檔案變小一點，但是整體瀏覽速度快一點，詳細操作可以參考這篇文章 Kraken.io 網頁圖片優化工具
5. 善用 RGB 色碼
說明：如果背景或底圖是很單純的單一顏色，那就使用CSS吧，不要再把它變成圖片了
以上是一些經驗分享，讓大家參考
如果覺得對你有幫助的話. 麻煩幫小弟按個讚哦～
相關文章參考：
留言列表
