有同學(xué)問切完圖還是太大了該怎么辦，今天MatuoBasyou介紹了幾種常用的方法，從PNG到WebP，再到JPG都有相關(guān)的技巧經(jīng)驗分享，喜歡的朋友一起來學(xué)習(xí)吧。

首先如果只是壓縮的話，建議使用ImageAlpha(專門壓縮PNG)，以網(wǎng)上的一副海報為例(侵刪)

正常從PS導(dǎo)出的PNG大小：

原本是1.1 MB

在ImageAlpha中打開后可以看到在默認(rèn)參數(shù)下可壓縮65%。

壓縮后 379 KB。而且是幾乎無損畫面細(xì)節(jié)的。我一般在輸出切圖資源的時候都是靠 ImageAlpha 來完成素材的壓縮。

而且 ImageAlpha 還可以通過調(diào)節(jié)顏色數(shù)位來進(jìn)一步壓縮，但是這樣是有損的。

比如夸張一些將顏色數(shù)位調(diào)節(jié)到 4，細(xì)節(jié)就已經(jīng)丟失的差不多了，但是能極大限度的壓縮圖像。

另外還有一些在線的圖片壓縮工具，最常用的也就是：TinyPNG 。和 ImageAlpha 的壓縮默認(rèn)壓縮率差不多，所以具體喜歡用哪個來壓縮還是看個人習(xí)慣了。

還有一種壓縮方式是講 PNG 轉(zhuǎn)為 WebP 格式。

工具有 Webponize 等。

(圖侵刪)網(wǎng)上的測試結(jié)果壓縮率還是非常可觀的。

然而 WebP 還沒有普及開來，大部分公司內(nèi)部還是主要使用 PNG 來輸出，所以還是要看公司大多數(shù)人的使用習(xí)慣來選擇具體輸出的格式。

另外如果是一些不帶 Alpha (透明)通道的圖，可以使用 JPG 來輸出，比如移動端產(chǎn)品的引導(dǎo)頁，一般情況同樣大小的 JPG 格式文件都會比 PNG 小，還是以之前的圖為例。

JPG 只有 338KB。直接導(dǎo)出 JPG 不用額外壓縮，而且通過 PS 還可以直接選擇你想輸出的質(zhì)量，通過降低質(zhì)量來減小圖片大小。

同時如果覺得降低 JPG 導(dǎo)出質(zhì)量仍然還是偏大，還可以在 PS 里通過色調(diào)分離來進(jìn)一步壓縮圖片的大小：

當(dāng)然這個也是有損的，這里將參數(shù)設(shè)置到40時，已經(jīng)出現(xiàn)了一些肉眼可見的質(zhì)量損失：

所以具體怎么平衡質(zhì)量與大小的平衡還是看實際情況來決定。

還有一種情況是圖標(biāo)素材的壓縮，最理想的情況是將圖片處理為矢量的 SVG 格式。一方面可以無損放大縮小，而且體積也相較于未壓縮的文件來說有很大的減小。網(wǎng)上有很多轉(zhuǎn) SVG 的教程，我這里就不過多描述了，附上鏈接：Iconfont-阿里巴巴矢量圖標(biāo)庫，在幫助里面有如何制作 SVG 圖標(biāo)的詳細(xì)教程。

最后關(guān)于系統(tǒng)中控件的輸出，有一條原則就是能用代碼來實現(xiàn)就用代碼，最好不要用圖片，一方面用素材輸出就需要好幾套素材來適配 xhdpi、xxhdpi、xxxhdpi，后期維護(hù)起來非常麻煩。而且程序在加載這些素材的時候也會占用內(nèi)存，對穩(wěn)定性和性能都會有影響，一張圖可能不太明顯，但是一個頁面中如果大量的使用圖片素材，那么影響就是非常巨大的了。

一般軟件工程師都可以對矢量圖形的圓角參數(shù)，描邊，填充色，投影大小，投影距離，投影顏色進(jìn)行定義，所以只要素材可以轉(zhuǎn)換為實際可用的參數(shù)，都是建議寫清楚參數(shù)，然后由軟件工程師通過程序來實現(xiàn)。

最新評論