編者按：有同學(xué)問切完圖還是太大了該怎么辦，今天@Matuo__Basyou?介紹了幾種常用的方法，從PNG到WebP，再到JPG都有相關(guān)的技巧經(jīng)驗分享，最后還附上一個SVG的免費福利，來收！

首先如果只是壓縮的話，建議使用 ImageAlpha（專門壓縮PNG）

以網(wǎng)上的一副海報為例（侵刪）

正常從PS導(dǎo)出的PNG大?。?/p>

原本是 1.1 MB

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

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

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

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

另外還有一些在線的圖片壓縮工具，最常用的也就是：TinyPNG?。和 ImageAlpha 的壓縮默認壓縮率差不多，所以具體喜歡用哪個來壓縮還是看個人習(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)分離來進一步壓縮圖片的大小：

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

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

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

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

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

「有哪些看上去很高大上，實際很簡單的PS技巧？」

1. 《有哪些看上去很高大上，但實際很簡單的PS技巧？》
2. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（入門篇）》
3. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（酷炫火焰篇）》
4. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（人像篇）》
5. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（漸變色篇）》
6. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（二次元篇）》

原文地址：zhihu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量112萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com