最近在Widget開發中，發現有一些PNG圖片在E72手機上顯示不正常，原本懷疑是手機的問題。但是我今天把圖片重新用Photoshop保存了一下之后，顯示就正常了。可能是美工在制作圖片的時候沒有考慮手機的一些特殊需求。

[ 編輯 ] 基本概念

在Photoshop里面編輯圖片的時候一般都是使用默認的真彩色模式（圖像->模式->RGB顏色），保存的PSD文件也都是用這種模式，優點是所有圖像的顏色信息都能保存，缺點是文件尺寸比較大。如果大家都使用PSD文件格式，那世界就完美了，不存在這么多麻煩的事情。但是，在現實世界里，因為手機或者互聯網的速度有限，不能讓用戶下載過大的圖像文件，所以一般網頁上或者手機軟件上要求PNG或者JPG或者GIF一類的壓縮圖像文件。這些文件是壓縮過的，有可能會造成圖像質量下降，但好處是文件尺寸小。所以， 美工的一個非常大的職責就是盡可能平衡圖片質量與文件大小之間的關系，用盡可能小的文件尺寸展現盡可能好的圖片質量 。影響圖片質量和文件大小的幾個關鍵因素是顏色數、格式和壓縮方式，每次輸出文件給程序員的時候，都需要考慮這幾個問題：

1、圖片的格式

• PSD：這是原版的設計圖，每張圖片都應該至少保存一個PSD文件，每次修改都是修改PSD文件。只有最終輸出的時候才考慮其他格式。
• JPG：是有損壓縮，意思是通過損失質量來換取高壓縮率。所以，JPG每保存一次，圖片質量就下降一次。所以，不要反復保存同一張JPG。不支持透明
• PNG：現在比較流行的格式，無損壓縮，如果顏色數不改變的話，不會犧牲圖像質量。支持透明
• GIF：只支持256色，支持透明，支持動畫。

2、圖片的顏色數。是使用24位真彩色還是使用固定顏色數（如256或128或64或32種或2種顏色）

顏色數越小，圖片的文件尺寸越小，圖片的質量越低。所以，每次保存的時候，要根據圖片的具體情況來決定使用多少種顏色數。 如果是顏色豐富的照片，那可能必須使用真彩色才能保持原始的質量。如果有大量的漸變色，也很難用少量顏色數來表現。如果是顏色較少的圖標，那就需要多試驗幾次，看看最少用幾種顏色數就可以表現出設計的原貌。如果是純黑白圖，那用2種顏色就夠了。

如果有透明的話，情況稍復雜。有些透明圖只有透明不透明兩種狀態，那只需要用1種顏色代表透明即可，可以使用256色以下的顏色數。但是，有些圖是有半透明的情況存在的，例如圓形的圖標，如果邊緣是透明的，就必須有半透明的存在才能比較圓滑。如果有半透明，就必須使用真彩色模式，因為只有真彩色模式才可能用很多種不同的顏色代表不同的透明度。

3、圖片的壓縮方式

還有一些設置會影響圖片壓縮后的質量和大小

首先，如果不是輸出成真彩色，那就需要選擇調色板。同樣是256色，到底選擇哪256種顏色結果是不一樣的。例如一張藍天的圖，顯然調色板里就沒必要有紅色。而早期的一些手機和計算機，調色板是固定的，就是說只有固定好的標準256種顏色可以用，這個叫Web Safe調色板。幸運的是，現在這些老設備基本可以不用考慮了。但是Photoshop還是提供了幾種不同的調色板，例如“可感知”、“可選擇”、“受限”等等，有時候可能需要試試不同的選項，看看哪種調色板對當前的圖片最合適。

其次，圖片抖動算法，或者在Photoshop里叫仿色。真彩色的圖片，如果用256色來表示，必然有一些顏色會顯示不出來，這時候就是用抖動算法來解決的。就是用某一個圖案來模仿某種顏色。例如報紙上的照片，用放大鏡看都是小黑點，這就是用黑白兩色來模仿更豐富的灰度。彩色也是一樣，可以用一些圖案來模擬顏色的過度。例如下面的圖片，第一張是真彩色圖片，第二張是不經過抖動，直接轉成256色的結果，第三張是經過抖動之后，同樣使用256色的結果。經過這樣處理，可以使用256色或者更少的顏色來模擬真彩色的效果。

最后，即使都是PNG，顏色數也一樣，也會有不同的文件大小。這是因為圖片文件里面可以包含了一些其他信息，例如拍照日期、使用的相機等等。這些信息也會占地方。而對于最終的顯示來說，沒有什么意義。所以，有一些圖片優化工具的存在，就是可以去掉這些不必要的信息，讓圖片更精簡。

[ 編輯 ] 具體操作方法

幸運的是，Adobe顯然也意識到上面這些是美工經常要使用的功能，所以在Photoshop 最近的版本中，專門增加了一個菜單選項，整合了上面這些功能。這就是“存儲為Web或設備所用格式”，英文版式"Save for web & devices"。這里，設備指的就是手機一類的設備。

每次需要輸出圖片的時候，先保存PSD，然后就選擇這個菜單。在彈出的窗口里，先選擇使用哪種圖片格式，例如PNG-8代表PNG格式的256色圖片，PNG-24代表PNG格式真彩色圖片。GIF格式只支持256色，JPEG格式只支持真彩色，所以就沒有其他選擇。然后，如果選擇了真彩色格式，就沒什么太多可以設置的了，直接保存即可。如果選擇了PNG-8或者GIF格式，那就可以選擇顏色數、調色板和仿色算法。例如下面的圖片，只有黑白，就沒必要使用真彩色格式，但是如果使用2色也不太好看，因為邊緣是有一些灰度的。我經過試驗，發現32色跟真彩色的區別幾乎肉眼就分辨不出來了，所以最終選擇了32色。其他的調色板和仿色沒做太多調整，就用的默認選項。因為這個圖片不復雜，調整也看不出來。經過這個調整之后，原始的真彩色圖片是10.4K大小，而32色的看起來完全一樣的優化后的圖片，只有1.6K，文件尺寸小了6倍！這只是頁面中的一張圖，同樣的頁面下還有另外兩張圖，原來3張圖一共要26.1K，優化之后只有5K！

而另一個看不到的好處是，這個功能會把圖片中一些不必要的信息扔掉，使得尺寸更加精簡，同時也避免了一些手機可能沒有實現完整的PNG格式解析，導致某些圖片顯示不正常，例如E72。

所以，請大家以后在輸出圖片的時候，一定都要使用“存儲為Web和設備所用格式”這個功能，而不要使用“存儲為”這個功能。雖然“存儲為”這里也能選擇PNG格式，但是這里保存的PNG文件帶有很多Photoshop自己的標記和冗余信息，文件過大，同時有些設備可能顯示不正常。

總之，要聰明地選擇顏色數和各種壓縮選項，讓圖片既精美又可以迅速下載。