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

[ 編輯 ] 基本概念

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

1、圖片的格式

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

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

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

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

3、圖片的壓縮方式

還有一些設(shè)置會影響圖片壓縮后的質(zhì)量和大小

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

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

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

[ 編輯 ] 具體操作方法

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

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

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

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

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