HTTP Archieve有個統計，圖片內容已經占到了互聯網內容總量的62%，也就是說超過一半的流量和時間都用來下載圖片。從性能優化的角度看，圖片也絕對是優化的熱點和重點之一，Google PageSpeed或者Yahoo的14條性能優化規則無不把圖片優化作為重要的優化手段，本文覆蓋了Web圖片優化的方方面面，從基本的圖片格式選擇、到尚未被廣泛支持的響應式圖片均有所提及。
Google Web Fundamentals的說法我很喜歡：
圖片優化既是一門藝術，也是一門科學，圖片優化是一門藝術，是因為單個圖片的壓縮不存在最好的特定性方案，而圖片優化之所以是一門科學，是因為許多開發得很出色的方法和算法可以明顯減小圖片的大小。要找到圖片的最優設置，需要按照許多維度進行認真分析：格式能力、編碼數據內容、像素尺寸等。
真的要用圖片嗎？
要實現需要的效果，真的需要圖片嗎？這是首先要問自己的問題。浏覽器和Web標准的發展速度極快，記得數年前我在用微軟Silverlight 1.0寫視頻播放器的時候，中文還不能使用自定義字體顯示，所以那時候寫了很多糟糕的代碼把需要的文字在服務器上生成圖片並緩存起來。用戶下載起來很慢，搜索引擎也完全無法檢索這些文字。
但是現在不一樣了，很多特效（漸變、陰影、圓角等等）都可以用純粹的HTML、CSS、SVG等加以實現，實現這些效果少則寥寥數行代碼，多則加載額外的庫（一張普通的照片比非常強大的效果庫也大了許多）。這些效果不但需要的空間很小，而且在多設備、多分辨率下都能很好的工作，在低級浏覽器上也可以實現較好的功能降級。因此在存在備選技術的情況下，應該首先選擇這些技術，只有在不得不使用圖片的時候才加入真正的圖片。
備選技術
- CSS效果、CSS動畫。提供與分辨率無關的效果，在任何分辨率和縮放級別都可以顯示得非常清晰，占用的空間也很小。
- 網絡字體。現在連很多圖標庫都是用字體方式提供，保持文字的可搜索性同時擴展顯示的樣式。
前端工程師最好能和設計師、產品經理保持溝通，幫助他們了解到什麼樣的效果比較“簡潔、高效、可維護”，畢竟對於CSS來說改變圓角矩形的Radius可以實時看到效果，用圖片的話至少要重新生成圖片、切圖並替換資源。Retina、高分辨率屏幕、多尺寸的設備，這些都加快了非圖片特效的發展，想想在高分辨率屏幕下Windows 7的慘不忍睹，就知道原生的圖片資源絕對不是多多益善。
圖片格式的選擇
如果效果真的需要圖片來表現，那麼選擇圖片格式是優化的第一步。我們經常聽到的詞語包括矢量圖、標量圖、SVG、有損壓縮、無損壓縮等等，我們首先說明各種圖片格式的特點：
其中APNG和WebP格式出現的較晚，尚未被Web標准所采納，只有在特定平台或浏覽器環境可以預知的情況下加以采用，雖然均可以在不支持的環境中較好的功能降級，但本節暫不討論這兩種格式。圖片格式選擇過程如下：
顏色豐富的照片，JPG是通用的選擇
- 人眼的結構很適合查看JPG壓縮後的照片，可以充分的忽略並在腦中補齊細節
- JPG在壓縮率不高時保留的細節還是不錯的
- WebP能夠比JPG減少30%的體積，但目前兼容性較差
如果需要較通用的動畫，GIF是唯一可用的選擇
- GIF支持的顏色范圍為256色，而且僅支持完全透明/完全不透明
- GIF在顯示顏色豐富的動畫時可能出現顏色不全、邊緣鋸齒等問題
如果圖片由標准的幾何圖形組成，或需要使用程序動態控制其顯示特效，可以考慮SVG格式
- SVG是使用XML定義的矢量圖形，生成的圖片在各種分辨率下均可自由放縮
- SVG中可以通過JavaScript等接口自由變換圖片特效，可以完成其中部分元素的自由旋轉、移動、變換顏色等
如果需要清晰的顯示顏色豐富的圖片，PNG比較好
- PNG-8能夠顯示256種顏色，但能夠同時支持256階透明，因此顏色數較少但需要半透明的情景（如微信動畫大表情）可以考慮PNG-8
- PNG-24可以顯示真彩色，但不支持透明，顏色豐富的圖片推薦使用（如屏幕截圖、界面設計圖）
- PNG-32可以顯示真彩色，同時支持256階透明，效果最好但尺寸也最大
圖片尺寸的選擇
尺寸，曾經是最不需要討論的話題，但自從Retina出現之後世界就變得復雜多了。
這裡只說我們關心的部分和結論，我們需要分清不同類型的像素：C