筆記 前端需要了解的優化圖像的方法

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等格式，非常適合用於網絡等圖片傳輸。