移動(dòng)應(yīng)用程序圖片格式:PNG還是JPEG
![](http://image.woshipm.com/wp-files/img/77.jpg)
在這篇移動(dòng)設(shè)備設(shè)計(jì)教程里,Jen Gordon闡述了為移動(dòng)應(yīng)用程序?qū)С鯬NG還是JPEG圖片格式。
我最近收到一個(gè)很好的問題,提問的人正在創(chuàng)建一個(gè)應(yīng)用程序,這個(gè)程序需要加載畫有葡萄的圖片。準(zhǔn)確的說,他的問題是這樣的:
“我應(yīng)該將我的葡萄圖片保存為.png格式還是.jpg格式?”
非常好的問題!不管怎么樣,文檔很好的說明了.png的圖片是iOS平臺推薦的圖片格式,然而對于基于Web的項(xiàng)目大家都知道.jpg是比較好的照片格式。
JPG, GIF, 以及PNG – 有什么不同?
首先,讓我們來看看每種格式的細(xì)微差別。如果要了解真正的討厭的細(xì)節(jié),點(diǎn)擊這里。
JPEG—照片的標(biāo)準(zhǔn)格式,不支持透明。
GIF—被限制在256色因此對于大塊純色和簡單圖像非常好。它支持透明但是會產(chǎn)生鋸齒邊緣。
PNG—.jpg和.gif的漂亮結(jié)合,具有.jpg圖片的質(zhì)量和.gif的透明度,而且沒有鋸齒。
如何選擇,為什么
對于iOS本地應(yīng)用程序來說最簡單的答案就是始終使用PNG,除非你有非常非常好的理由不用它。
當(dāng)iOS應(yīng)用構(gòu)建的時(shí)候,Xcode會通過一種方式優(yōu)化.png文件而不會優(yōu)化其它文件格式。它優(yōu)化得相當(dāng)?shù)暮?,你可以在這里查看細(xì)節(jié)。引自 Jeff Larmarche’s 博客的話最好地解釋了這一點(diǎn):
“當(dāng)你使用任何其它文件類型(或者你加載一個(gè)未優(yōu)化的PNG文件),你的iPhone需要在加載時(shí)做字節(jié)交換和阿爾法預(yù)乘(還可能在顯示時(shí)重做阿爾法乘法)。你的應(yīng)用程序基本上需要做與Xcode做的同樣的事情,但是這是在運(yùn)行時(shí)做而不是在構(gòu)建時(shí)做。這同時(shí)會消耗掉處理器和內(nèi)存資源。”
Web圖片的加載呢?
不是所有你在iOS程序里看到的圖片都是應(yīng)用程序二進(jìn)制文件的一部分。這就是說圖片可能從網(wǎng)上下載下來并且從真正的應(yīng)用程序外面插入到應(yīng)用程序中服務(wù)。在這種情況下,可能有必要將圖片優(yōu)化到最小的尺寸,也就可能意味著通常使用PNG以外的格式。
下面是我們討論的例子。你可以看到我為iPhone的屏幕創(chuàng)建一張葡萄圖片,320*489px,72dpi:
當(dāng)“存儲為Web和設(shè)備所用格式”對話框彈出時(shí)(文件->存儲為Web和設(shè)備所用格式)你可以對比地看到將圖片保存為.png與.jpg的不同。
文件大小—這可能是最顯著的區(qū)別了。.png的大小是258k,而.jpg只有小小的18k。這是一個(gè)巨大的差別。如果你的程序要從網(wǎng)絡(luò)上下載這些圖片,你的用戶可能會受不了等待.png下載的額外時(shí)間。
顏色和對比度—.jpg的顏色更豐富,更飽和。.png看起來像褪了色的。
所以這里有一些關(guān)于網(wǎng)絡(luò)下載時(shí)什么時(shí)候使用.jpg及.png的實(shí)用技巧:
使用JPG
- 如果你不需要保存圖片的透明背景;
- 如果你的圖片需要保存圖像質(zhì)量,色彩以及飽和度。
使用PNG
- 當(dāng)你的圖片需要透明時(shí)
- 當(dāng)使用純繪圖圖片時(shí)。.png格式渲染照片效果沒有那么好。
GIF和TIF何如?
好吧,我們不能不談?wù)撍麄儼伞?br />
TIF
.tif(或是.tiff)文件在“存儲為Web和設(shè)備所用格式”環(huán)境下是找不到的。一般來說,.tif文件是高質(zhì)量圖片,你可以同時(shí)保存透明度和圖層信息。他們非常多的用于打印設(shè)計(jì)。
GIF
.gif文件一直用于網(wǎng)頁設(shè)計(jì),并且可以像.png一樣保留透明度。使用.gif的問題主要有兩點(diǎn):
1、如果你導(dǎo)出一張照片(如下所示),.gif無論是文件大小還是圖片質(zhì)量上都無法與.jpg競爭:
2、如果你再次考慮用.gif導(dǎo)出繪圖。.gif保留透明的方式與.png不同。看一下下面的例子,我希望保留按鈕周圍的鮮艷色彩。我切出這個(gè)按鈕,隱藏了格子背景,并且點(diǎn)擊“文件>存儲為Web和設(shè)備所用格式”彈出對話框:
在對話框中你可以看到當(dāng)?shù)竭x擇“gif”時(shí)按鈕展現(xiàn)成什么樣。按鈕被我在“雜邊”下拉菜單中選擇的顏色所圍繞。.gif格式要求任何透明漸變都需要一個(gè)背景(或雜邊)色以使?jié)u變可以過渡。想像一下這個(gè)按鈕在我的格子背景中會長成什么樣,唉。
這也就是.png為什么是一個(gè)很棒的東西的原因??吹绞裁词钦嬲耐该髁税桑考由弦粋€(gè)所選背景層,它還是會樣本中所看到的一樣!
結(jié)論
概括地說,對于提供二進(jìn)制的圖片并使用Xcode構(gòu)建的本地iOS程序,使用.png格式。唯一的例外就是你需要從網(wǎng)絡(luò)上下載圖片到程序中。這樣就最大的優(yōu)化吧!
查看英文源文
來源:http://rockux.com/
- 目前還沒評論,等你發(fā)揮!