HTTP Archieve有個統(tǒng)計，圖片內容已經占到了互聯(lián)網內容總量的62%，也就是說超過一半的流量和時間都用來下載圖片。從性能優(yōu)化的角度看，圖片也絕對是優(yōu)化的熱點和重點之一，Google PageSpeed或者Yahoo的14條性能優(yōu)化規(guī)則無不把圖片優(yōu)化作為重要的優(yōu)化手段，本文覆蓋了Web圖片優(yōu)化的方方面面，從基本的圖片格式選擇、到尚未被廣泛支持的響應式圖片均有所提及。

Google Web Fundamentals的說法我很喜歡：

圖片優(yōu)化既是一門藝術，也是一門科學，圖片優(yōu)化是一門藝術，是因為單個圖片的壓縮不存在最好的特定性方案，而圖片優(yōu)化之所以是一門科學，是因為許多開發(fā)得很出色的方法和算法可以明顯減小圖片的大小。要找到圖片的最優(yōu)設置，需要按照許多維度進行認真分析：格式能力、編碼數(shù)據內容、像素尺寸等。

真的要用圖片嗎？

要實現(xiàn)需要的效果，真的需要圖片嗎？這是首先要問自己的問題。瀏覽器和Web標準的發(fā)展速度極快，記得數(shù)年前我在用微軟Silverlight 1.0寫視頻播放器的時候，中文還不能使用自定義字體顯示，所以那時候寫了很多糟糕的代碼把需要的文字在服務器上生成圖片并緩存起來。用戶下載起來很慢，搜索引擎也完全無法檢索這些文字。

但是現(xiàn)在不一樣了，很多特效（漸變、陰影、圓角等等）都可以用純粹的HTML、CSS、SVG等加以實現(xiàn)，實現(xiàn)這些效果少則寥寥數(shù)行代碼，多則加載額外的庫（一張普通的照片比非常強大的效果庫也大了許多）。這些效果不但需要的空間很小，而且在多設備、多分辨率下都能很好的工作，在低級瀏覽器上也可以實現(xiàn)較好的功能降級。因此在存在備選技術的情況下，應該首先選擇這些技術，只有在不得不使用圖片的時候才加入真正的圖片。

備選技術

• CSS效果、CSS動畫。提供與分辨率無關的效果，在任何分辨率和縮放級別都可以顯示得非常清晰，占用的空間也很小。
• 網絡字體�，F(xiàn)在連很多圖標庫都是用字體方式提供，保持文字的可搜索性同時擴展顯示的樣式。

前端工程師最好能和設計師、產品經理保持溝通，幫助他們了解到什么樣的效果比較“簡潔、高效、可維護”，畢竟對于CSS來說改變圓角矩形的Radius可以實時看到效果，用圖片的話至少要重新生成圖片、切圖并替換資源。Retina、高分辨率屏幕、多尺寸的設備，這些都加快了非圖片特效的發(fā)展，想想在高分辨率屏幕下Windows 7的慘不忍睹，就知道原生的圖片資源絕對不是多多益善。

圖片格式的選擇

如果效果真的需要圖片來表現(xiàn)，那么選擇圖片格式是優(yōu)化的第一步。我們經常聽到的詞語包括矢量圖、標量圖、SVG、有損壓縮、無損壓縮等等，我們首先說明各種圖片格式的特點：

其中APNG和WebP格式出現(xiàn)的較晚，尚未被Web標準所采納，只有在特定平臺或瀏覽器環(huán)境可以預知的情況下加以采用，雖然均可以在不支持的環(huán)境中較好的功能降級，但本節(jié)暫不討論這兩種格式。圖片格式選擇過程如下：

標簽： 響應式圖片 Web性能優(yōu)化 圖片優(yōu)化 

版權申明：本站文章部分自網絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。