Web性能優化圖片優化

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

Google Web Fundamentals的說法我很喜歡：

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

真的要用圖片嗎？

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

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

備選技術

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

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

圖片格式的選擇

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

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

(編輯：小酷)