建站知識(shí)
網(wǎng)站設(shè)計(jì)知識(shí) 網(wǎng)站建設(shè)知識(shí) 網(wǎng)絡(luò)營(yíng)銷知識(shí) 微信資訊 常見(jiàn)問(wèn)題 網(wǎng)站備案 近期客戶網(wǎng)站建設(shè)套餐
標(biāo)準(zhǔn)型網(wǎng)站建設(shè) 精美型網(wǎng)站建設(shè) 營(yíng)銷型網(wǎng)站建設(shè) 高端品牌網(wǎng)站建設(shè) 電子商務(wù)型網(wǎng)站建設(shè) 行業(yè)門戶型網(wǎng)站建設(shè) 手機(jī)網(wǎng)站建設(shè) 微信網(wǎng)站建設(shè)網(wǎng)頁(yè)設(shè)計(jì)中對(duì)于圖像格式的選用技巧
GIF意為Graphics Interchange format(圖形交換格式),GIF圖片的擴(kuò)展名是gif,F(xiàn)在所有的圖形瀏覽器都支持GIF格式,而且有的圖形瀏覽器只認(rèn)識(shí)GIF格式。GIF是一種索引顏色格式,在顏色數(shù)很少的情況下,產(chǎn)生的文件極小,它的優(yōu)點(diǎn)主要有:
GIF格式支持背景透明。GIF圖片如果背景色設(shè)置為透明,它將與瀏覽器背景相結(jié)合,生成非矩形的圖片。
GIF格式支持動(dòng)畫。在Flash動(dòng)畫出現(xiàn)之前,GIF動(dòng)畫可以說(shuō)是網(wǎng)頁(yè)中唯一的動(dòng)畫形式。GIF格式可以將單幀的圖象組合起來(lái),然后輪流播放每一幀而成為動(dòng)畫。雖然并不是所有的圖形瀏覽器都支持GIF動(dòng)畫,但是最新的圖形瀏覽器都已經(jīng)支持GIF動(dòng)畫。
GIF格式支持圖形漸進(jìn)。漸進(jìn)是指圖片漸漸顯示在屏幕上,漸進(jìn)圖片將比非漸進(jìn)圖片更快地出現(xiàn)在屏幕上,可以讓訪問(wèn)者更快地知道圖片的概貌。
GIF格式支持無(wú)損壓縮。無(wú)損壓縮是不損失圖片細(xì)節(jié)而壓縮圖片的有效方法,由于GIF格式采用無(wú)損壓縮,所以它更適合于線條、圖標(biāo)和圖紙。
GIF格式的缺點(diǎn)同樣相當(dāng)明顯。索引顏色是歷史遺留的產(chǎn)物,在DOS下的老游戲幾乎無(wú)一例外的采用索引顏色,這種格式本來(lái)早就應(yīng)該淘汰了。但是由于帶寬的限制,GIF從DOS時(shí)代紅到了Internet時(shí)代。GIF這種索引顏色格式最大的缺點(diǎn)就是它只有256種顏色,這對(duì)于照片質(zhì)量的圖片是顯然不夠的。
JPEG代表Joint Photograhic Experts Group(聯(lián)合圖像專家組),這種格式經(jīng)常寫成JPG,JPG圖片的擴(kuò)展名為jpg。
JPG最主要的優(yōu)點(diǎn)是能支持上百萬(wàn)種顏色,從而可以用來(lái)表現(xiàn)照片。此外,由于JPG圖片使用更有效的有損壓縮算法,從而使文件長(zhǎng)度更小,下載時(shí)間更短。有損壓縮會(huì)放棄圖像中的某些細(xì)節(jié),以減少文件長(zhǎng)度。它的壓縮比相當(dāng)高,使用專門的JPG壓縮工具其壓縮比可達(dá)180:1,而且圖像質(zhì)量從瀏覽角度來(lái)講質(zhì)量受損不會(huì)太大,這樣就大大方便了網(wǎng)絡(luò)傳輸和磁盤交換文件。JPG較GIF更適合于照片,因?yàn)樵谡掌袚p失一些細(xì)節(jié)不像對(duì)藝術(shù)線條那么明顯。另外,JPG對(duì)照片的壓縮比例更大,而最后的質(zhì)量也更好。
但是從長(zhǎng)遠(yuǎn)來(lái)看,JPG隨著帶寬的不斷提高和存儲(chǔ)介質(zhì)的發(fā)展,它也應(yīng)該是一種被淘汰的圖片格式,因?yàn)橛袚p壓縮對(duì)圖像會(huì)產(chǎn)生不可恢復(fù)的損失。所以經(jīng)過(guò)壓縮的JPG的圖片一般不適合打印,在備份重要圖片時(shí)也最好不要使用JPG。還有,JPG也不如GIF圖像那么靈活,它不支持圖形漸進(jìn)、背景透明,更不支持動(dòng)畫。
PNG是20世紀(jì)90年代中期開(kāi)始開(kāi)發(fā)的圖像文件存儲(chǔ)格式,其目的是企圖替代GIF和TIFF文件格式,同時(shí)增加一些GIF文件格式所不具備的特性。流式網(wǎng)絡(luò)圖形格式(Portable Network Graphic Format,PNG)名稱來(lái)源于非官方的“PNG's Not GIF”,是一種位圖文件(bitmap file)存儲(chǔ)格式,讀成“ping”。PNG用來(lái)存儲(chǔ)灰度圖像時(shí),灰度圖像的深度可多到16位,存儲(chǔ)彩色圖像時(shí),彩色圖像的深度可多到48位,并且還可存儲(chǔ)多到16位的α通道數(shù)據(jù)。PNG使用從LZ77派生的無(wú)損數(shù)據(jù)壓縮算法。
PNG文件格式保留GIF文件格式的下列特性:
使用彩色查找表或者叫做調(diào)色板可支持256種顏色的彩色圖像。
流式讀/寫性能(streamability):圖像文件格式允許連續(xù)讀出和寫入圖像數(shù)據(jù),這個(gè)特性很適合于在通信過(guò)程中生成和顯示圖像。
逐次逼近顯示(progressive display):這種特性可使在通信鏈路上傳輸圖像文件的同時(shí)就在終端上顯示圖像,把整個(gè)輪廓顯示出來(lái)之后逐步顯示圖像的細(xì)節(jié),也就是先用低分辨率顯示圖像,然后逐步提高它的分辨率。
透明性(transparency):這個(gè)性能可使圖像中某些部分不顯示出來(lái),用來(lái)創(chuàng)建一些有特色的圖像。
輔助信息(ancillary information):這個(gè)特性可用來(lái)在圖像文件中存儲(chǔ)一些文本注釋信息。
獨(dú)立于計(jì)算機(jī)軟硬件環(huán)境。
使用無(wú)損壓縮。
PNG文件格式中要增加下列GIF文件格式所沒(méi)有的特性:
每個(gè)像素為48位的真彩色圖像。
每個(gè)像素為16位的灰度圖像。
可為灰度圖和真彩色圖添加α通道。
添加圖像的γ信息。
使用循環(huán)冗余碼(cyclic redundancy code,CRC)檢測(cè)損害的文件。
加快圖像顯示的逐次逼近顯示方式。
標(biāo)準(zhǔn)的讀/寫工具包。
可在一個(gè)文件中存儲(chǔ)多幅圖像。
網(wǎng)頁(yè)頁(yè)面中對(duì)于圖像格式的選用
文件結(jié)構(gòu)
這三種格式各有優(yōu)缺點(diǎn),其中PNG優(yōu)點(diǎn)多多。雖然普及得還很一般,但是其特殊的優(yōu)越性已經(jīng)讓我們對(duì)其產(chǎn)生非常大的興趣。至少我現(xiàn)在很喜歡這種格式。當(dāng)然了對(duì)于制作頁(yè)面的制作人員來(lái)說(shuō),頁(yè)面總體積的大小那就是競(jìng)爭(zhēng)力。所以我們還是必需要注意這三種格式的混合使用。那以什么時(shí)候用GIF什么時(shí)候用PNG什么時(shí)候用JPG呢?我們下面一一來(lái)分析。
在實(shí)際的工作中,我發(fā)現(xiàn)一般的純色的圖形,比如一些小圖標(biāo)、平鋪背景其中的色彩比較少,那么作為GIF格式雖然只有256種色彩,但是應(yīng)對(duì)這種類型的圖片那一定是非常的合適的。當(dāng)然了,不排除有一些特別的小圖標(biāo)色彩的豐富性,但是相信作為小圖標(biāo)其色彩有點(diǎn)損失也不會(huì)影響到整體的視覺(jué)效果,所以GIF的適用范圍是:小圖標(biāo)、平鋪背景等色彩比較少的小型圖片。
那么大圖片又怎么選擇呢,首先我們先了解一下JPG,我們使用Photoshop的朋友都知道,在最后導(dǎo)出圖片時(shí)會(huì)有一個(gè)地方讓我們選擇這個(gè)JPG圖片的圖片品質(zhì),100%是表示無(wú)壓縮,當(dāng)我們拿同一張圖片導(dǎo)出不同的品質(zhì)圖片對(duì)比時(shí)我們發(fā)現(xiàn)品質(zhì)低的很明顯會(huì)比品質(zhì)高的臟了很多,這樣照片看起來(lái)就很不好,當(dāng)然我們也發(fā)現(xiàn)這種情況在偏大色塊的圖片中猶為突出。所以比如天空、人像。特別人像面部就會(huì)出現(xiàn)很難看的黑斑。當(dāng)然如果對(duì)于照片質(zhì)量要求不嚴(yán)格可以使用JPG并且降低品質(zhì)。但是不適用于背景、小圖標(biāo)。
我個(gè)人覺(jué)得PNG是介于GIF與高品質(zhì)JPG之間的一種選擇,如果是簡(jiǎn)純的小圖標(biāo),PNG會(huì)比GIF大這么一點(diǎn),但是品質(zhì)上是差不多的。如果是普通的圖片,那么PNG還是要比高品質(zhì)的JPG要小一點(diǎn)的,但是PNG還是有點(diǎn)色彩損失的。不過(guò)如果圖片不放大基本上看不出來(lái)。我們做頁(yè)面基本上不是為了讓人放大了挑刺。所以PNG也就是介于中間的一種選擇。當(dāng)然了,PNG還有一個(gè)很偉大的優(yōu)點(diǎn),那就是透明,雖然IE6之前還不支持這一特性。GIF也有透明,但是GIF只支持絕對(duì)的透明,不支持半透明,所以GIF的圖片的邊緣常會(huì)有一圈的白色的小點(diǎn)。而PNG就沒(méi)有這些問(wèn)題,隨著時(shí)代的發(fā)展當(dāng)IE6成為歷史的時(shí)候我想我們就可以看到PNG的真實(shí)的威力。
- 網(wǎng)頁(yè)設(shè)計(jì)如何做到與企業(yè)形象一致
- CSS網(wǎng)頁(yè)設(shè)計(jì)中常遇到的問(wèn)題
- 2012優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)手法鑒賞
- 一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)師是怎樣練就的
- 網(wǎng)頁(yè)設(shè)計(jì)師如何搭配好網(wǎng)頁(yè)顏色
- 在網(wǎng)頁(yè)設(shè)計(jì)中如何嵌入字體
- 良好的網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)
- 網(wǎng)頁(yè)設(shè)計(jì)2012年的趨勢(shì)
- 關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的九項(xiàng)注意
- 大型網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)越簡(jiǎn)單越好