網頁效能最佳化要點之一 圖片處理最佳化要點

網頁效能最佳化要點之一 圖片處理最佳化要點

1.使用正確的圖檔壓縮格式與優化要點
1.1 選擇正確的圖檔格式 : 例如 簡單的插圖(少於256色)或包含文字的圖形應採用GIF或PNG-8格式，顯示百萬種顏色的相片應採用JPEG(JPG)格式，簡單的動畫採用GIF格式，顯示高品質不失真的相片採用PNG-24格式
1.2 進行圖檔壓縮 : 100 × 100 pixels的圖檔，通常在3到5KB以內，250 × 250 pixels的圖檔，也儘可能限定在20KB以內，採用工具如Pngcrush : PNG檔最佳化處理, Jpegtran : JPEG檔案最佳化處理，gifsicle : GIF檔案最佳化處理，或其他圖檔處理軟體。
1.3 降低色板 : 如果圖片只需要四種顏色而卻使用256色調色板的圖檔，應進行圖片的優化以減少下載量。
1.4 盡量將圖檔的修邊修到最小，減少不必要的空間浪費。
1.5 適度犧牲樹葉及髮絲的完美呈現，可大幅提升執行速度，在美觀與效能間取得平衡。
1.6 如果有WCMS上稿系統應限制上稿圖檔的大小。

2.大型圖片最佳化 : 一些網站的活動網頁使用圖片通常很大，採取的方式有三種
2.1 將一大圖切割成多個小圖 : 分成多個小圖平行下載。需分放兩個Domain，不建議此方式。
2.2 交錯式（Interlace）圖片 : 瀏覽器在載入圖檔時以隔行方式下載，像是電視掃描線，讓瀏覽網頁時逐步顯示圖片內容，在未全部載入時即可預先看圖，提供較佳的使用者體驗。一些圖形處理軟體可以將JPEG,GIF,PNG存成交錯式的圖檔。
2.3 漸進式圖片顯示技術 : 圖片載入過程中，先顯示圖片的輪廓或者草圖，甚或是將圖片的縮略圖放大顯示，即在放大顯示後會圖片會出現模糊等效果。小圖片或者漸進式圖片的大小，遠遠小於原圖片本身的大小。以此提高網站的用戶體驗。

3.使用CSS Sprites : 利用 CSS sprites 將小圖拼合後利用background來定位。可以大量減少圖片的Http requests。CSS Sprites 最佳化的方法
3.1 Sprite可以被Cached，時常要修改或更動的圖片就不適合放在Sprite中。
3.2 橫向佈局Sprite中的圖片往往比縱向佈局會減少文件大小。
3.3 Sprite中組合相近的顏色以降低顏色的數量，從而達到適合PNG8的低於256色的標準。
3.4 為了適用於移動設備，不在Sprite裡留下大的空隙。雖然空白不十分影響文件的大小，但會減少客戶端代理(proxy)將圖片解壓為像素映射(bitmap)的記憶體消耗，100*100的圖片是一萬像素，而1000*1000則是一百萬像素。