從網(wǎng)頁設(shè)計(jì)角度，應(yīng)該如何優(yōu)化網(wǎng)站圖片

　　1、去掉無意義的修飾。

　　除了內(nèi)容圖片，其他的圖片的作用是修飾，也就是對(duì)于傳達(dá)信息來說并非本質(zhì)性的。最大的優(yōu)化就是壓根不要圖片！所以在優(yōu)化之前要做的，首先是確認(rèn)設(shè)計(jì)，設(shè)計(jì)本身是否需要用那么多圖片？還是說可以更簡(jiǎn)潔？

　　2、不用圖片。

　　切圖是一件扯淡的事情，直接使用CSS替代圖片來實(shí)現(xiàn)修飾效果吧！如半透明、邊框、圓角、陰影、漸變等，在當(dāng)前主流瀏覽器中都可以用CSS達(dá)成。將來CSS濾鏡得到廣泛支持后，還可以做到alpha混合、正片疊底等各種效果。

　　3、使用矢量圖替代位圖。

　　對(duì)于絕大多數(shù)圖案、圖標(biāo)等，矢量圖更小，且可縮放而無需生成多套圖?，F(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用！

　　4、使用恰當(dāng)?shù)膱D片格式。

　　我們常見的圖片格式有JPEG、GIF、PNG?；旧?，內(nèi)容圖片多為照片之類的，適用于JPEG。而修飾圖片通常更適合用無損壓縮的PNG。而GIF基本上除了GIF動(dòng)畫外不要使用。且動(dòng)畫的話，也更建議用video元素和視頻格式，或用SVG動(dòng)畫取代。

　　除了這些格式之外，Chrome、新版Opera、Android 4 支持WebP格式，IE 9 、IE mobile 10 支持JPEG XR。這兩個(gè)新格式都支持無損和有損壓縮，都具有更良好的壓縮比。當(dāng)然這需要為不同的瀏覽器返回不同的圖片，增加了開發(fā)成本，也增加存儲(chǔ)成本。不過你省了流量或者相同流量下改善了圖片質(zhì)量，提升了用戶體驗(yàn)。你會(huì)如何取舍呢？

　　對(duì)了，別忘了使用優(yōu)秀的圖片編碼器及合適的參數(shù)。好的圖片編碼器，尤其是有損圖片格式的編碼器（推薦Caesium），能通過算法或手動(dòng)調(diào)整，獲得更高的壓縮比。

　　5、按照HTTP協(xié)議設(shè)置合理的緩存。

　　具體的緩存策略（如永久緩存 重命名）、部署策略（如反向代理、CDN等）這里就不展開了。