前言： 之前個(gè)人對(duì)于圖片的問(wèn)題，一直還是顯得不是很重視。但其實(shí)對(duì)于互聯(lián)網(wǎng)來(lái)說(shuō)，可能圖片的內(nèi)容已經(jīng)占據(jù)了整個(gè)互聯(lián)網(wǎng)的大半部分，因此我們很大一部分流量的消 耗，都是用在了圖片上面，因此，對(duì)于圖片有一些認(rèn)識(shí)肯定是現(xiàn)在所必須的。所以趁今天這個(gè)不太忙的機(jī)會(huì)，打算對(duì)于圖片的問(wèn)題做一個(gè)簡(jiǎn)單地總結(jié)，也算是對(duì)之前 沒(méi)掌握到的東西的一個(gè)學(xué)習(xí)與備忘過(guò)程。

常見(jiàn)的圖片格式

圖片格式壓縮方式動(dòng)畫適應(yīng)瀏覽器

JPG	有損	不支持	所有
PNG	無(wú)損	不支持	所有
GIF	無(wú)損	支持	所有
APNG	無(wú)損	支持	firefox、safari
WebP	有損/無(wú)損	支持	chrome、opera

APNG，作為想取代gif的新格式，他比我們常用的gif更為優(yōu)秀。從其名稱中可以看出，APNG其實(shí)可以說(shuō)是會(huì)動(dòng)png，因?yàn)閜ng支持24位 的顏色，而gif最多僅支持8位的顏色，因此，APNG的顯示效果比gif更為清晰。可惜APNG并沒(méi)有加入png標(biāo)準(zhǔn)，因此我們?nèi)粘Ｉa(chǎn)中很難將其納入 使用。

WebP，是由谷歌推出的圖片格式，想讓其作為web中專用的圖片格式。與jpg作對(duì)比，WebP有對(duì)透明的支持，以及完全不亞于JPG的壓縮率。而與PNG對(duì)比，WebP更小，加載更快。不過(guò)可惜的是，其兼容性也是不太友好。

上面兩種格式，因?yàn)槭褂貌惶?#xff0c;因此僅僅提及一下。下面將對(duì)我們常用的JPG，PNG，以及GIF來(lái)做討論。

JPG

由于jpg的壓縮方式為有損，而我們之前有提及到，圖片所消耗的流量已經(jīng)占據(jù)了互聯(lián)網(wǎng)的半壁江山，因此，jpg自然就成為了web開發(fā)中的寵兒。對(duì) 于圖片中，沒(méi)有透明效果的，以及圖片更為顏色豐富的圖片，我們多可以采用壓縮60%-80%的jpg圖像。這樣可以保證使得圖片更小，網(wǎng)頁(yè)加載更快。不過(guò) 需要注意的是jpg的每一次壓縮，對(duì)圖片都是有損的。因此，對(duì)于一些有線條，或者文字的圖片，jpg壓縮之后，看起來(lái)并不理想，因此，在這種情況下，應(yīng)該 盡量避免對(duì)jpg的使用

GIF

GIF僅有256種顏色，并且對(duì)透明對(duì)支持僅僅局限于全透明或者不透明，因此，gif若作為非動(dòng)圖來(lái)說(shuō)，只能用于顏色不太復(fù)雜的圖片。不過(guò)一般來(lái) 說(shuō)，我們用gif都是由于其對(duì)動(dòng)畫的友好支持，在APNG兼容性十分不友好的情況下，如果僅僅想引入一個(gè)動(dòng)圖的話，gif是目前很好的選擇。

PNG

• 格式

  格式位數(shù)透明支持

  png8	8	不支持
  png8+索引透明	8	僅支持完全透明
  png8+alpha透明	8	支持
  png24	24	不支持
  png32	32	支持

  png的格式可以分為以上幾種，而我們常用的便是png8與png32了（即是我們常在ps中導(dǎo)出的png24）

• 透明

• png32

我們?cè)趐s中導(dǎo)出的png24勾上透明選項(xiàng)后，即是這里所說(shuō)的png32了，而 png32實(shí)際上是指的png24位的深度，以及8位的alpha透明通道。因?yàn)閜ng32顏色的豐富性（2^24種顏色）,以及對(duì)各種透明的友好支持。 png32是我們?cè)S多人最常用的格式之一。其導(dǎo)出方法也很簡(jiǎn)單，只用在ps中選擇導(dǎo)出為web所用格式，選中png24+透明即可。然而png32在 ie6上并不能表現(xiàn)為透明

• png24

其實(shí)png24本身是不透明的，因?yàn)槠洳](méi)有那8位的alpha通道。在fireworks中我們可以很好地看到這一特點(diǎn)

圖中下面為png32，上面為png24

• png8png8由于僅有2^8種顏色，因此體積較小，同時(shí)，他還對(duì)透明有比較友好的支持，因此，png8也是很多人喜歡使用的圖片格式。

  • png8+alpha透明png8的alpha透明，由于不能夠使用ps來(lái)進(jìn)行導(dǎo)出，因此我們需要使用fireworks來(lái)導(dǎo)出。這次，我選擇了一張黑色的透明背景來(lái)對(duì)透明的支持做一次比對(duì)

圖中下為png32，上為png8+alpha透明

可以看出，png8對(duì)于半透明，有不錯(cuò)的支持性。同時(shí)，因?yàn)槠浔容^小的體積。在現(xiàn)代瀏 覽器上，對(duì)于顏色不太復(fù)雜的小按鈕之類的的東西，以及對(duì)于圖片的要求并沒(méi)有那么高的移動(dòng)端端來(lái)說(shuō)png+alpha透明也是顯得十分友好的。當(dāng)然，對(duì)于顏 色較為復(fù)雜，以及要求較為嚴(yán)格的pc端上需要采用的東西，我認(rèn)為還是應(yīng)該采用png32的好。不過(guò)alpha透明的png8在ie6上的表現(xiàn)并不如人意， 在ie6上，其半透明處會(huì)以全透明來(lái)顯示，并且毛邊嚴(yán)重。之前也提及到了，png8的alpha透明對(duì)于半透明，只是有不錯(cuò)的支持性，其真正的表現(xiàn)事實(shí)上 還是不如png32。在我測(cè)試過(guò)程中發(fā)現(xiàn)，png8采用alpha透明，依然會(huì)出現(xiàn)一些毛邊

比對(duì)可以發(fā)現(xiàn)，上面png8+alpha透明的圖片比起下面png32的圖片還是多了一些鋸齒。不過(guò)整體影響不算太大。

• png8+索引透明

png8的索引透明終于可以用ps來(lái)進(jìn)行導(dǎo)出了，導(dǎo)出方式也很簡(jiǎn)單。導(dǎo)出的時(shí)候直接選擇ps的png8或者ps預(yù)設(shè)的png-8 128仿色。此時(shí)我們就可以導(dǎo)出索引透明的png8了。如下圖

從上面的圖可以看到，我們將導(dǎo)出圖片，四周部分變?yōu)榱税咨?#xff08;當(dāng)然，你一打開看到的也可能是沒(méi)有白邊的）。這個(gè)時(shí)候，把圖片右邊那個(gè)雜邊改為無(wú)，就可以去掉圖片的白邊。如下

左邊的png32的圖與右邊png8的圖對(duì)比可以看出，右邊的圖明顯有一些鋸齒。原因是索引透明對(duì)于透明的支持并不完善，其僅僅支持全透明以及全不透明，而不支持半透明。當(dāng)選擇了雜邊為無(wú)的時(shí)候，所有的半透明轉(zhuǎn)換為了不透明，也就產(chǎn)生了鋸齒。那如何解決這些鋸齒呢？

剛剛將四周白色，變?yōu)闊o(wú)的雜邊的選項(xiàng)，其實(shí)就是ps對(duì)于鋸齒的一個(gè)解決方法。如果這張圖的需求是在純色的背景下的話，我們可以將雜邊，改為該圖在網(wǎng) 頁(yè)中所在的背景的顏色，以做到在視覺(jué)上的一種無(wú)鋸齒的感覺(jué)。這種方案在ie6下也可以很好地實(shí)現(xiàn)，不過(guò)也有他的局限性——倘若背景顏色比較復(fù)雜，那么這種 方案將會(huì)無(wú)效。

圖片的選擇

那么就總體來(lái)說(shuō)下圖片格式的選擇應(yīng)用場(chǎng)景吧（雖然上面多少都有些提到了）

• 關(guān)于jpg由于其可壓縮的特點(diǎn)，對(duì)于背景顏色較為復(fù)雜（比如照片等圖）并且沒(méi)有透明的圖片，建議采用jpg。這樣在保證了圖片肉眼幾乎看不出很大區(qū)別的情況下，把圖片壓得更小，壓縮更快。不過(guò)對(duì)于有線條及文字的內(nèi)容，不推薦用jpg。

• 關(guān)于gif如果需要?jiǎng)訄D的話，由于APNG對(duì)兼容性對(duì)不友好gif依然還是首選。

• 關(guān)于png

  • png8+alpha可以加入日常的開發(fā)中。對(duì)于桌面端，在不用考慮ie6的情況下，alpha透明的png8可以用在一些圖片顏色較為簡(jiǎn)單的地 方。對(duì)于移動(dòng)端，可以考慮直接采用alpha透明的png8，而不采用png32，因?yàn)橐苿?dòng)端的網(wǎng)絡(luò)相較pc端較差，因此，采用png8+alpha可以 節(jié)省流量。

  • png32在桌面端中，還是可以作為主要的圖片格式。因?yàn)樽烂娑讼噍^于移動(dòng)端，網(wǎng)速更友好，同時(shí)，顯示器的瀏覽對(duì)于圖片的精細(xì)程度要求更高，因此，一些比較復(fù)雜的按鈕，logo還是應(yīng)當(dāng)采用png32來(lái)處理

  • png8+索引透明可以用來(lái)處理桌面端對(duì)于低版本瀏覽器的（ie6）的兼容問(wèn)題，雖然采用背景雜邊的方式只能解決部分鋸齒問(wèn)題，但總好過(guò)于無(wú)。 ie6已然是很早之前的瀏覽器，本身對(duì)其的兼容就勢(shì)必會(huì)犧牲一些東西。因此，個(gè)人感覺(jué)還是對(duì)于背景簡(jiǎn)單的，直接采用雜邊的方式來(lái)解決，而對(duì)于背景較為復(fù)雜 的，目前我也只能想到采用去掉雜邊的方法去解決（其實(shí)也就是說(shuō)鋸齒直接不管了）。

文章源自：http://web.jobbole.com/83670/

總結(jié)

以上是生活随笔為你收集整理的图片问题的一些总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。