前端開發中對圖片的優化技巧總結

dackel 發布于2019-08-30 15:52 / 1200人閱讀

摘要：使用矢量圖替代位圖。對于絕大多數圖案圖標等，矢量圖更小，且可縮放而無需生成多套圖。基本上，內容圖片多為照片之類的，適用于。而修飾圖片通常更適合用無損壓縮的。使用減少對圖片的請求次數。將圖片轉換為編碼字符串到或頁面中，減少的請求次數。

1.去掉無意義的修飾。優化之前首先確認一下設計本身是否需要用這么多圖片，是否可以更簡潔！

2.不用圖片。如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用CSS達成。將來CSS濾鏡得到廣泛支持后，還可以做到alpha混合、正片疊底等各種效果。

3.使用矢量圖替代位圖。對于絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了，所以可放心使用！

4.使用恰當的圖片格式。我們常見的圖片格式有JPEG、GIF、PNG。基本上，內容圖片多為照片之類的，適用于JPEG。而修飾圖片通常更適合用無損壓縮的PNG。而GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。除了這些格式之外，Chrome、新版Opera、Android 4+支持WebP格式，IE 9+、IE mobile 10+支持JPEG XR。這兩個新格式都支持無損和有損壓縮，都具有更良好的壓縮比。當然這需要為不同的瀏覽器返回不同的圖片，增加了開發成本，也增加存儲成本。不過省了流量或者相同流量下改善了圖片質量，提升了用戶體驗。

5.使用data url。資源內嵌于CSS或HTML中，而不必多帶帶請求。注意，多個地方都要使用的資源不一定適合用此優化方式，因為圖片數據重復多了，增加流量。另外許多瀏覽器對data url有長度限制，注意資源的大小。注意：如果 CSS 還是放在head里，使用data URL時文件的增大必然導致性能（開始渲染時間、首屏）變差。

6.設置緩存。緩存策略（如永久緩存+重命名）、部署策略（如反向代理、CDN等）。

7.資源的lazyload或postpone。（lazyload：延遲到其他資源下載完成后再加載，postpone：延遲到元素可見再加載。）目前基本上都要用腳本控制。未來HTML和CSS會增加相關的控制屬性，見：Resource Priorities。

8.CSS Sprites。使用CSS Sprites,減少對圖片的請求次數。

9.使用base64編碼代替圖片。適用于圖片小于2KB，頁面引用圖片不多的情況。將圖片轉換為base64編碼字符串inline到CSS或頁面中，減少http的請求次數。

10.更好的圖片格式，使用webp、bpg、sharpP等新圖片格式具有更好的壓縮比。

GPU云服務器云服務器前端開發技巧前端開發性能優化技巧總結應用技巧總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116442.html

前端開發中對圖片的優化技巧總結

摘要：使用矢量圖替代位圖。對于絕大多數圖案圖標等，矢量圖更小，且可縮放而無需生成多套圖。基本上，內容圖片多為照片之類的，適用于。而修飾圖片通常更適合用無損壓縮的。使用減少對圖片的請求次數。將圖片轉換為編碼字符串到或頁面中，減少的請求次數。 1.去掉無意義的修飾。優化之前首先確認一下設計本身是否需要用這么多圖片，是否可以更簡潔！ 2.不用圖片。如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽...

李義 2019-08-01 16:14 評論0 收藏0
前端每周清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

摘要：工程實踐立足實踐，提示實際水平內聯函數與性能很多關于性能優化的文章都會談及內聯函數，其也是常見的被詬病為拖慢性能表現的元兇之一不過本文卻是打破砂鍋問到底，論證了內聯函數并不一定就會拖慢性能，過度的性能優化反而會有損于應用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

mikasa 2019-08-01 18:18 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

李世贊 2019-08-29 14:08 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

MudOnTire 2019-08-21 18:25 評論0 收藏0