從PNG格式和透明度來看PC端和手機(jī)端該用哪種Png圖片

時間：2022-05-25 20:03:02 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-25 20:03:02 來源：網(wǎng)絡(luò)營銷

相信經(jīng)常做圖片的朋友對Png格式圖片都很熟悉了，Png是圖像文件存儲格式，在網(wǎng)頁設(shè)計(jì)中已經(jīng)不是一個陌生的名詞，在前端開發(fā)中經(jīng)常使用到它。PNG格式有8位、24位、32位三種形式，其中8位PNG支持兩種不同的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位PNG在24位基礎(chǔ)上增加了8位透明通道，因此可展現(xiàn)256級透明程度。

雖然有很多人每天都在用Png格式圖片，也每天都會提到Png圖片，但是卻很少有人能完全的了解Png有多少種格式？有哪些特點(diǎn)？PNG的透明度分類？PC端中常用的Png格式是哪些？手機(jī)端最合適的Png格式是什么呢？如果你也是其中的一員的話，對這些問題仍有疑問的話，那么今天我要在億企邦上分享的這篇文章里就有你需要的答案。

一、PNG的格式和透明度

關(guān)于PNG的格式和透明度，我們使用Fireworks開查看會比較清楚，打開Fireworkd優(yōu)化面板，可以清楚看到png有3種不同深度的格式：png8、png24、png32。如下圖所示：

1、PNG的3種格式

其中，在優(yōu)化面板選擇png8，可發(fā)現(xiàn)png8包括不透明、索引色透明、alpha透明3種格式。如下圖所示：

（1）、PNG8

8位的png最多支持256（2的8次方）種顏色，8位的png其實(shí)8支持不透明、索引透明、alpha透明。

（2）、PNG24

支持2的24次方種顏色，表現(xiàn)為不透明。

（3）、PNG32

支持2的32次方種顏色，32位是我們最常使用的格式，它是在png在24位的png基礎(chǔ)上增加了8位的透明信息，支持不同程度的半透效果。

其實(shí)PNG8的3種格式不透明、索引透明、alpha透明，正好把png的所有格式都?xì)w類好了：

（1）、『png 不透明』格式

（2）、『png 索引透明』格式

（3）、『png alpha透明』格式

2、PNG的不透明格式

說到不透明，就像jpg格式一樣，『png 不透明』只能為不透明，代表格式有：『png8 不透明』和『png24』，導(dǎo)出軟件有：Photoshop、Fireworks。不推薦使用『png 不透明』格式，建議用jpg圖片來代替它。

可能會有同學(xué)會問為什么png24是不透明的，我使用photoshop導(dǎo)出來的就是png24?。靠蓪?shí)際Png24為不透明圖片。

打開photoshop，任意打開一個帶透明的psd文件，存儲為web所有格式(ctrl+shift+alt+s)，如下面板所示：

不勾選透明度單選框，圖片的透明背景會被默認(rèn)的白色填充，如下圖所示：

導(dǎo)出來的png圖片深度為24位，圖片為不透明，表現(xiàn)跟jpg圖片相似：

如果勾選了透明度(alpha通道)，導(dǎo)出深度為32位的透明圖片。如下圖所示：

從photoshop存儲為web所有格式面板中這樣理解，png24深度其實(shí)為24位，再勾選上8位的alhpa通道，24+8=32，即『png32』 = 『png24+alpha』，這也許是photoshop軟件開發(fā)者不添加png32位格式的原因，如下圖所示：為Photoshop存儲為web所有格式界面的圖片格式選擇，并沒有png32位的選項(xiàng)。

3、PNG的索引透明格式

說到索引顏色透明，我們可以了解下什么是索引顏色，『png 索引透明』代表格式有『png8 索引透明』，導(dǎo)出軟件有：Photoshop、Fireworks，它的特點(diǎn)總結(jié)如下：

a、挑選一副圖片中最有代表性的若干種顏色（通常不超過256種）。

b、只能為不透明或全透明。

c、文件體積小。

d、帶有雜邊鋸齒。

e、支持IE6。

（1）、如何使用Photoshop導(dǎo)出『png8 索引透明』

使用Photoshop，存儲為web所有格式，按照如下圖片的紅色邊框配置，可導(dǎo)出png8索引透明。

億企邦注：使用Photoshop導(dǎo)出『png8 索引透明』的效果比Fireworks導(dǎo)出的效果良好，這里不介紹使用Fireworks導(dǎo)出『png8 索引透明』

（2）、『png8 索引透明』產(chǎn)生雜邊鋸齒原因

『png8 索引透明』只有透明索引顏色，沒有半透明索引顏色，下圖左側(cè)為帶半透明像素的圖片，在瀏覽器中打開不會有鋸齒，而右側(cè)圖片為全透明或不透明的像素，在瀏覽器打開后有鋸齒。

由于『png8 索引透明』沒有半透明索引顏色，使用Photoshop導(dǎo)出時，原有的半透明轉(zhuǎn)化為不透明，從而產(chǎn)生鋸齒。

（3）、如何避免『png8 索引透明』的雜邊鋸齒

方法：設(shè)置雜邊與背景色顏色一致可達(dá)到視覺上透明。

相信不難理解，利用雜邊與背景色一致，可以來滿足視覺上的透明，缺點(diǎn)是只能適應(yīng)一種背景色，在其它背景色下同樣會產(chǎn)生雜邊。如下圖所示：



那么我們該怎么設(shè)置呢？在此億企邦推薦的方法是：打開Photoshop，在存儲為web格式面板中進(jìn)行如下操作，在雜邊選項(xiàng)中選擇與背景色一致的顏色。

4、PNG的Alpha透明格式

說到alpha透明，我們就要先了解下什么是alpha通道，『png alpha透明』代表格式有『png8 alpha透明』和『png32』，導(dǎo)出軟件有Fireworks，它的特點(diǎn)總結(jié)如下：

a、一個8位的灰度通道，該通道用256級灰度來記錄圖像中的透明度信息，定義透明、不透明和半透明區(qū)域。

b、支持全透明和半透明。

c、Png8的alpha透明文件體積小

d、Png8的alpha透明在IE6下有毛邊

如何使用Fireworks導(dǎo)出PNG的Alpha透明？

Firewoks中，在優(yōu)化面板，按照如下圖片的紅色邊框配置，可導(dǎo)出png8 alpha透明。



億企邦注：Firewoks支持導(dǎo)出『png8 alpha透明』，Photoshop不支持導(dǎo)出『png8 alpha透明』

二、手機(jī)端選擇哪種Png？

說到手機(jī)，考慮流量的問題是必不可少的，所選png需要滿足體積小和視覺效果良好，那么哪種png格式符合這2個要求呢？在此億企邦不妨來跟大家做個實(shí)驗(yàn)吧！

不同Png格式測試

測試平臺：ios&android webkit瀏覽器。

測試圖片：彩種雪碧圖。如下圖所示：

測試內(nèi)容：同一張雪碧圖導(dǎo)出不同png格式的大小、透明度、雜邊以及在retina顯示屏和普通顯示屏下的對比。

測試結(jié)果如下表所示：

從上圖我們可見png32和png24體積太大了，十分消耗手機(jī)用戶流量，不是我們選擇的范圍，那么可以鎖定目標(biāo)在『png8 alpha透明』和『png8 索引透明』中，2者對比，可以看出『png8 alpha』在手機(jī)端的支持是良好，可能有童鞋會認(rèn)為，單憑一張圖片也不能下結(jié)論。

而經(jīng)過億企邦使用多圖片測試后使用Fireworks導(dǎo)出的『png8 alpha』，在手機(jī)端的支持是比較好的~不僅文件體積小，節(jié)省流量，而且半透明效果良好。

于是，移動端采用『Png8 alpha透明』，億企邦也堅(jiān)信未來使用『Png8 alpha透明』將是一種趨勢！

三、PC端選擇哪種Png？

PC端使用哪種png，其實(shí)這個話題很早就有結(jié)論了，這里簡單介紹下。

1、使用png8的方案

使用photoshop打開雪碧圖，分別導(dǎo)出一張png32和一張『png8 索引透明』的圖片，高級瀏覽器使用png32位圖片，針對IE6使用『png8 索引透明』，并設(shè)置『png8 索引透明』雜邊與背景色顏色一致可達(dá)到視覺上透明。

.bg{
background:url(global.png?v=20130530) no-repeat;
_background:url(global_png8.png?v=20130530) no-repeat;//IE6使用的背景圖
}

億企邦注：為啥使用png32而不使用『png8 alpha透明』？因?yàn)閜c端的網(wǎng)速大多良好，建議使用表現(xiàn)更佳的png圖片，顯然png32是最合適的，當(dāng)然你也可以使用『png8 alpha透明』，但是在高清顯示器下的質(zhì)量不如png32。

2、使用IE濾鏡的方案

比較耗性能，而且存在不支持背景平鋪，導(dǎo)致鏈接失效等缺點(diǎn)，不推薦該方案，不要為了IE而把自己搞得像IE~

.bg{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img. png", sizingMethod="scale");}

另外還有js和打補(bǔ)丁的辦法，這里就暫時不做介紹，以后我會在億企邦上為大家再做詳細(xì)的介紹。

億企邦知識擴(kuò)展總結(jié)：

Png的格式、顏色種類、位數(shù)、透明度、瀏覽器支持一覽表：

億企邦點(diǎn)評：

PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道數(shù)據(jù)。

總的來說，png可以說是一種無損耗的圖像格式，這也意味著你可以對png圖片做任何操作也不會使得圖像質(zhì)量產(chǎn)生損耗。這也使得png可以作為jpeg編輯的過渡格式。