輔助工具

圖片如何優化和選擇格式

圖片深深影響網頁效能深深影響網頁效能的
原來是圖片...

圖片在網頁上的組成占了絕大多數,上圖研究報告顯示,在過去一年,網頁裡所占圖片的比例,由此顯示,只要圖片是恰當格式並且最佳化,就能節省大量的位元組,不只省下您的網路空間,更提高網頁使用的效能。

01
為什麼上傳的圖片看起來很模糊?
圖片模糊可能是因為我們在上傳圖片時有自動壓縮圖片,以利達到優化造成,選擇正確的檔案格式可降低此機率,另外,如果電腦螢幕解析度有放大過的話也可能會造成圖片看起來模糊 
 
如何正確選擇圖片格式?
如何正確選擇圖片格式?
放在網頁上的圖片組合無非是:色塊+照片+後製圖,不同的圖像構成元素要達到真正的最佳化,也會有一套最合適的演算方式,因為正確的檔案格式,才不會在圖像最佳化時有太過失真的情況發生;一般我們最常見的圖片格式有:PNG、JPG、GIF,可是您真的知道什麼時候要存甚麼檔案格式嗎?? 
 
GIF圖片示範  
GIF 優化指標 顏色不多的純色塊圖
減少顏色數量,適用於色塊圖案 
PNG檔案示範  
PNG 優化指標 後製色塊比例大於照片
PNG雖符合網頁格式,但圖片容量大小會比jpg來的要大得多
 
01    
JPG 優化指標 美麗的攝影照片
JPG是品質被壓縮較低的檔案格式,檔案也較小