標籤：圖片
App大小是受產品經理關注的，因為部分使用者會由於下載時間、流量耗費等而傾向於較小的app，這點尤其在網路速度較差或資費較貴的國家比較明顯，比如印度。
有不少的app，其中占空間最大的是資源檔，通常是圖片。
我們最近的一個app就比較關注圖片資源的大小，並有了以下幾點的經驗，包括iOS和Android。
1. 不用圖片實現
有些簡單的圖形，是可以通過一些簡單的編程做出來的，比如分割線、四周圓角。
在iOS裡，一些簡單的折線用Bezier Path也可以很容易的畫出來的。
當然這裡要有個限度，太複雜的圖形，用代碼來實現，很不好理解，倒不如用圖片來得直接。
2. 清除掉沒有用的圖片
開發的過程中，某個功能改變或不要了，開發人員經常忘了刪除掉不用的資源，它們就這樣遺留了下來。
這些對使用者沒有用處，應該清除掉。
iOS方面，我只用過一個工具叫fauxpas，我相信應該還有其他的。
要注意的是，這些工具有可能會誤判，原因是我們有可能是通過動態方式構造要載入的圖片資源，所以這些工具判斷不出來。記得在刪掉圖片資源前要小心確認。
插一句，關於上面提到的fauxpas，它是收費軟體，有三十天試用期。如果只是用來清除圖片，試用一下就足夠，但它同時也提供了很多很好的提升app品質的檢測，值得購買來長期用。
3. 用向量圖代替部分圖片
現在的螢幕解析度越來越高，iPhone有了3倍大小圖片，Android的則往xxhdpi/xxxhdpi一路上去。
向量圖片是個很好的解決辦法，它能不失真地放大。不過它無法完全替代點陣圖，因為它只支援一些形狀。
通常簡單圖形方面（比標）就很適合用向量圖。
提到向量圖，通常是SVG。iOS和Android都需要通過第三方library來支援，比如：
iOS：https://github.com/SVGKit/SVGKit
Android：https://code.google.com/p/androidsvg/
同時，iOS和Android分別有自己的向量圖支援。
iOS：支援向量圖做成的PDF，具體見這裡的介紹文章。要注意，PDF是有個初始大小的，iOS在把PDF轉為圖片時是根據這個大小資訊來產生1倍/2倍/3倍大小的圖片，而不支援我們自己無失真放大。
Android：在5.0上引入了向量圖的支援，是通過xml的resource方式，具體見這裡。我沒用過，但感覺這樣的方式很不友好，要是能指定一個svg的資源檔就好了。
4. 最佳化點陣圖
點陣圖，通常我們用的是PNG。當我們從PS中儲存一張圖片為PNG後，這圖片實際上還有最佳化空間的。
iOS項目的預設配置是有最佳化png的，但那效果貌似很一般。所以我們可以藉助別的其他工具來最佳化，記得要同時禁用掉配置裡的最佳化png選項。
我們用了一款叫ImageOptim的，效果很不錯。
用正在開發的App做測試，未最佳化前圖片的總大小是13.1M，最佳化後是2.9M。打包成App後，未最佳化前的app是19.7M，注意這時png被xcode最佳化過了，而最佳化過後是10M，接近為原來的一半，效果很好。開啟app看最佳化過的圖片，正常。
把上面提到的ImageOptim用在Android上，效果則很小。未最佳化前圖片的總大小是十多M，壓縮後是5M多，最佳化後是2.4M。乍看不錯，但打包成App後，最佳化過的app只比未最佳化的小22K，而app的大小是4.5M左右。
我猜測，可能是打包過程中Google的最佳化功力比較厲害。這猜測的一個支援點是Google有能力推出自己的更小更好的webp格式，下面會詳細介紹。
5. 用tint color來著色
以前，我們會有兩張只有顏色有差別的圖片，用來分別表示兩種狀態。
但現在我們有tint color，iOS和Android都支援，就可以給一張圖片著色，這樣的結果就是，我們可以用一張圖片的不同tint color來表示不同的狀態，差不多能節省一半。
當然，這個技術無法應用到兩種狀態的形狀不同的情況。
參考文章：
iOS: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/ （尋找Template Images這一節）
Android: http://blog.danlew.net/2014/08/18/fast-android-asset-theming-with-colorfilter/
其他考慮：
1. 有損壓縮
上面提到的最佳化點陣圖，都是指無損的。
如果稍微的品質損失可以接受的話，就可以得到更小的圖片。
相關工具比如像上面提到的ImageOptim的姐妹軟體ImageAlpha，不過我沒有用過，沒有實際測試資料可提供。
2. webp
webp是Google推出的一款據說比png更好更小的點陣圖格式，參見官網。
據Google說，webp的無損圖片比png的小26%以上，我們的UED部門的同學的實際使用感受是30%以上，所以還是很不錯的。
webp在Android 4.0以上得到有限的支援，具體見這裡。
webp在ios上則需要Google提供的library，可以直接在github上找別人打包好的，比如這裡。
要注意的是，如果你的app是混合型的，有內嵌web view，且web裡面有webp圖片，則需要對uiwebview做擴充支援，參見這裡。而這篇是相關介紹文章。
歡迎留言討論。
減小App大小：圖片篇
