
120
第十八章
圖像最佳化
除了避免 CSS 運算式(YSlow)與最佳化圖像(PageSpeed),效能優化指導原則與 I/O
比較有關,而非網站下載到裝置之後所發生的事。雖然以 gzip 方式壓縮檔案能夠增進下
載速度,它對記憶體管理卻沒有幫助。一旦資源放到裝置上之後,它們就不再是壓縮形式
了。圖像會耗用記憶體,大於 10240 px 的圖像會導致較大的記憶體問題。請以顯示時的
尺寸來提供對應大小的圖像,並且壓縮圖像,以減低你圖像檔的體積。在這一方面有幾個
工具可用。ImageAlpha(http://pngmini.com/)可以幫助你將你的透明(transparent)png
圖轉為完全透明的 8-bit png 圖。Sencha.io(http://www.sencha.com/learn/how-to-use-src-
sencha-io/)代理伺服器會判斷使用者裝置所需的圖像尺寸,並在送出給客戶端之前將它
們縮小(而不會增大)。
雖然降低圖像檔案大小對於 web 效能來說,一直都是很重要的,但提到行動裝置時,我
們不能只專注在 I/O 的檔案大小。你必須考慮圖像檔解壓縮後有多大,因為行動裝置上
的記憶體非常有限,所有的圖像都會耗費記憶體。合成圖像(composited images)用的是
GPU 的記憶體,而非 CPU 的記憶體,雖然這是釋放一些記憶體的技巧,但是合成圖像所
用的記憶體是非合成的相同圖像的四倍,所以請保守地使用這個技巧。
我建議在任何時間點都盡量把你 we