1、不用圖片，盡量用css3代替。 比如說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用CSS達成。
2、 使用矢量圖SVG替代位圖。對於絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了，所以可放心使用！
3.、使用恰當的圖片格式。我們常見的圖片格式有JPEG、GIF、PNG。
基本上，內容圖片多為照片之類的，適用於JPEG。
而修飾圖片通常更適合用無損壓縮的PNG。
GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。
4、按照HTTP協議設置合理的緩存。
5、使用字體圖標webfont、CSS Sprites等。
6、用CSS或JavaScript實現預加載。
7、WebP圖片格式能給前端帶來的優化。WebP支持無損、有損壓縮，動態、靜態圖片，壓縮比率優於GIF、JPEG、JPEG2000、PG等格式，非常適合用於網絡等圖片傳輸。
圖像格式的區別：
矢量圖：圖標字體，如 font-awesome；svg
位圖：gif,jpg(jpeg),png
區別：
1、gif:是是一種無損，8位圖片格式。具有支持動畫，索引透明，壓縮等特性。適用於做色彩簡單(色調少)的圖片，如logo,各種小圖標icons等。
2、JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用於允許輕微失真的色彩豐富的照片，不適合做色彩簡單(色調少)的圖片，如logo,各種小圖標icons等。
3、png:PNG可以細分為三種格式:PNG8，PNG24，PNG32。后面的數字代表這種PNG格式最多可以索引和存儲的顏色值。
關於透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎上增加了8位（256階）的alpha通道透明;
優缺點：
1、能在保證最不失真的情況下盡可能壓縮圖像文件的大小。
2、對於需要高保真的較復雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。