什么時候應該使用JPG

示例1

從JPG的特性介紹我們知道JPG更適合用來存儲攝影或?qū)憣崍D像，所以我們不妨先拿一張攝影作品做嘗試。

下圖是一副巴士車的照片，我們嘗試用JPG 60%（左上）、PNG8 256色 無仿色（右上）、PNG8 256色 擴散仿色（左下）、PNG32（右下）分別進行了存儲。可以看出當用JPG存儲圖像時不僅能夠達到最大的壓縮率，也能盡量保證原圖的還原效果。而采用PNG8進行保存時圖像文件大小更大，失真也較嚴重。只有在PNG24的格式下才能保證品質(zhì)，然而文件大小卻比JPG要大很多。

產(chǎn)生這種結(jié)果的原因也與JPG和PNG各自的壓縮算法有關。

對于攝影或者寫實作品，由于受環(huán)境光線的影響，圖像上的色彩層次十分豐富。比如巴士車上的紅色區(qū)域由于反光、陰影以及透視效果會形成明暗、深淺各異的區(qū)域，如果用PNG去保存，則需要不同明暗度的紅色去存儲這個區(qū)域。對于整張圖片來說，PNG8的256色無法完全索引圖像上出現(xiàn)的所有顏色，于是在存儲時就會丟失許多顏色而產(chǎn)生失真。如果要保證圖像的效果，則需要色彩范圍更廣的PNG24進行存儲，相應的文件大小也會增加。

而JPG的壓縮算法則更利于對真實世界中這些復雜的色彩變化進行壓縮處理，從而在盡量壓縮文件大小的情況下比較好的還原圖像的視覺效果。

示例2

那么是不是只有在存儲照片的時候才需要用到JPG呢？我們不妨來看另外一個例子。

下圖是最近比較火爆的某微博頁面，在這里我們可以選擇不同的風格，每種風格都會有一個非常有特色的背景圖片。我們嘗試用不同圖片格式對背景進行保存時可以發(fā)現(xiàn)：當用JPG進行保存時（直接背景另存為）文件大小僅36.3K；而用PNG8 256色無仿色去保存時大小增加到57.7K，不僅如此由于顏色的缺失在圖像上還出現(xiàn)了一些帶鋸齒的色塊；為了降低這些色塊對圖像質(zhì)量的影響我們對PNG8增加了擴散仿色的效果，此時文件大小達到了156.3K；而當采用PNG24完全不失真的保存時文件大小是231.9K。

盡管這幅背景圖也是通過photoshop制作，但我們可以發(fā)現(xiàn)由于在圖像上采用了很多的真實素材（比如白云、螞蟻、綠葉等），而這些真實素材和攝影圖像一樣也會存在非常豐富的色彩層次，所以也不適合用PNG格式進行保存。這個時候我們就應該采用JPG格式。

由此我們可以得出結(jié)論：對于寫實的攝影圖像或是顏色層次非常豐富的圖像采用JPG的圖片格式保存一般能達到最佳的壓縮效果。

根據(jù)經(jīng)驗我們在頁面中使用的商品圖片、采用人像或者實物素材制作的廣告Banner等圖像更適合采用JPG的圖片格式保存。

總結(jié)

由此可見在存儲圖像時采用JPG還是PNG主要依據(jù)圖像上的色彩層次和顏色數(shù)量進行選擇。一般層次豐富顏色較多的圖像采用JPG存儲，而顏色簡單對比強烈的則需要采用PNG。但也會有一些特殊情況，例如有些圖像盡管色彩層次豐富，但由于圖片尺寸較小，上面包含的顏色數(shù)量有限時，也可以嘗試用PNG進行存儲。而有些矢量工具繪制的圖像由于采用較多的濾鏡特效也會形成豐富的色彩層次，這個時候就需要采用JPG進行存儲了。

另外還有一個原則就是用于頁面結(jié)構(gòu)的基本視覺元素，如容器的背景、按鈕、導航的背景等應該盡量用PNG格式進行存儲，這樣才能更好的保證設計品質(zhì)。而其他一些內(nèi)容元素，如廣告Banner、商品圖片等對質(zhì)量要求不是特別苛刻的，則可以用JPG去進行存儲從而降低文件大小。

3、思考與實踐

什么樣的設計更適合web頁面？

慎用較“重”的視覺設計元素

Web2.0時代網(wǎng)頁設計的一大趨勢就是越來越“輕”。除了對那些高光和圓角效果的審美疲勞之外，設計師們也開始意識到好的設計應該是內(nèi)容與形式的完美結(jié)合，而非形式的堆砌。所以設計師在應用那些較“重”的視覺效果時，一定要想清楚這樣做的目的和意義，以及是否與產(chǎn)品的特點和受眾的氣質(zhì)相契合。

“輕量“設計一個比較典型的例子就是國內(nèi)某知名網(wǎng)站，幾乎沒有采用任何需要圖片的視覺元素，而是通過簡單的CSS樣式去實現(xiàn)，這樣不僅能夠突出內(nèi)容，更能提升頁面的訪問速度。所以我十分強烈的建議視覺設計師也掌握一定的html和css知識（尤其是CSS3實現(xiàn)了很多過去需要圖片才能實現(xiàn)的效果，例如圓角和漸變），這樣在做設計的時候能夠全面的去考慮產(chǎn)品效果。

下面這個電子商務網(wǎng)站則采用過多無意義的視覺元素堆砌，不僅沒有實現(xiàn)很好的設計效果，反而由于需要太多的圖片元素而影響了頁面的性能。

如果由于產(chǎn)品需要在設計中不得不使用較”重“的視覺元素，我們也可以根據(jù)圖片格式的特點選擇適當?shù)谋憩F(xiàn)形式以達到更好的效果。

例如在下面這個例子中，第一個Banner應用了更適合PNG格式的設計風格（較多純色和簡單漸變的應用）不僅能達到熱烈、突出的視覺效果，在保證圖片質(zhì)量的同時也更好的壓縮了文件大小；而第二個Banner由于應用了過于復雜的漸變色和強烈對比，并且在局部區(qū)域采用太多的高光和陰影效果，導致圖片的色彩層次過多，不論采用PNG還是JPG格式保存都無法實現(xiàn)圖像質(zhì)量和文件大小的最優(yōu)化。

當然舉這個例子并不是要設計師在做設計的時候過分考慮頁面性能問題，而是要清楚不同設計形式的效果和實現(xiàn)成本，在設計過程中多問自己為什么要這樣做？