html頁(yè)面中圖像格式的選用之我見第2/2頁(yè)
這三種格式各有優(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ì)影響到整體的視覺效果,所以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è)人覺得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就沒有這些問(wèn)題,隨著時(shí)代的發(fā)展當(dāng)IE6成為歷史的時(shí)候我想我們就可以看到PNG的真實(shí)的威力。
當(dāng)然了有一種特別的情況可能會(huì)很特別,那就是背景圖片與前景圖片的切合處,這種地方需要色彩結(jié)構(gòu)一致才能產(chǎn)生良好的視覺效果。那么這種時(shí)候注意盡可能的不要使用不同格式混合使用。
相關(guān)文章
firefox background-image垂直平鋪問(wèn)題的解決方法
firefox下background-image的垂直平鋪repeat-y不設(shè)置height的解決辦法2008-07-07
超級(jí)連接的提示中換行效果實(shí)現(xiàn)代碼
前段時(shí)間有網(wǎng)友在論壇發(fā)帖問(wèn)"如何實(shí)現(xiàn)超級(jí)連接的多行顯示",其實(shí)方法很簡(jiǎn)單就是使用title 和 alt就可以實(shí)現(xiàn)。2008-05-05
Internet Explorer 8 beta 中文版與IE7共存的解決方法
今天安裝了IE8,去微軟網(wǎng)站下載的時(shí)候發(fā)現(xiàn)已經(jīng)提供中文版的beta了,哈哈 發(fā)現(xiàn)IE8沒有傳說(shuō)中的那么妖魔化,不錯(cuò)的瀏覽器,新增功能不錯(cuò)。2008-05-05
《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)(二)
這篇文章主要介紹了《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)(二,需要的朋友可以參考下2016-05-05
網(wǎng)頁(yè)制作中十個(gè)最好的CSS hacks
轉(zhuǎn)自國(guó)外網(wǎng)站,本想翻譯成中文,但是細(xì)看文章實(shí)在是簡(jiǎn)單,如果看不懂這個(gè),我想也就沒必要繼續(xù)做前端了。2008-02-02

