一個(gè)好的站點(diǎn)，不但要有精彩的內(nèi)容，還需要有一個(gè)美觀的頁面。談到美觀離不開圖片，在頁面中適當(dāng)?shù)赜靡恍┚赖膱D片作為點(diǎn)綴，會(huì)使你的網(wǎng)頁大放異彩。但是，圖片使用不當(dāng)，也會(huì)適得其反，把你的訪問者給嚇跑。主要原因在于圖片尺寸太大，訪問者還沒等打開早已不耐煩了。 現(xiàn)在向大家介紹一些對(duì)圖片進(jìn)行處理的方法，以使圖片能在網(wǎng)頁中迅速顯示出來�！ ∵x好圖片格式 圖片文件的格式有很多，如GIF、JPEG（文件擴(kuò)展名為.jpg）、BMP、PNG等，它們都是可以用瀏覽器瀏覽的，但到底選擇哪種圖片格式比較好呢？其實(shí)在一般情況下我們只需選擇前面的兩種，即GIF格式與JPEG格式。因?yàn)檫@兩種文件格式能對(duì)圖像進(jìn)行很大程度的壓縮，使得在產(chǎn)生相近視覺效果的前提下，圖像文件尺寸卻小很多。如果圖像是通過掃描儀或者數(shù)碼相機(jī)獲取的，這種圖片中所用到的色彩比較多，這時(shí)候我們應(yīng)該選擇使用JPEG格式來存儲(chǔ)圖像。如果圖片色彩比較少，一般選擇GIF格式�！ p少圖片色彩數(shù)量 圖片內(nèi)色彩數(shù)量愈多，文件尺寸愈大，在PaintShopPro軟件的“Color”下拉菜單中，有一項(xiàng)“DecreaseColorDepth”功能，它是用來減少圖像所用顏色數(shù)目的，你可以選擇其中的“16Colors”，即將圖片所使用的色彩數(shù)量減到16種顏色。當(dāng)顏色數(shù)目減少后，如果你認(rèn)為圖像質(zhì)量變化不大，這時(shí)你可以選用GIF格式�！ �(duì)圖片進(jìn)行適當(dāng)壓縮 如果你認(rèn)為色彩數(shù)量減少后圖像的視覺效果明顯變差，讓你不能忍受，那么我們可以采用JPEG壓縮格式。無論是使用什么樣的圖形處理軟件，在以JPEG格式存盤時(shí)，都要向你詢問JPEG的壓縮比。通常，采樣50%到70%的壓縮率比較好。你不妨在這時(shí)試著使用256色的格式將圖片存儲(chǔ)成GIF格式，與JPEG格式的文件比一比哪個(gè)字節(jié)數(shù)更少、圖像質(zhì)量如何，最終再?zèng)Q定使用什么圖像格式�！ D1 控制圖片的尺寸 圖形尺寸越小，則字節(jié)數(shù)相應(yīng)會(huì)越少。這要求在制作圖像時(shí)，應(yīng)盡量將圖形四周無用的信息去掉，比如說你制作了一個(gè)非常漂亮的標(biāo)題文字的圖片，這個(gè)圖片的背景與網(wǎng)頁的底色相同或者用透明色，這時(shí)你制作的圖片一定要讓美術(shù)字盡量充滿整個(gè)圖像，不要讓圖片中底色邊框過大。還有是在制作網(wǎng)頁使用圖片時(shí)，可以添加“Width”和“Height”屬性，即標(biāo)注原始圖片的長(zhǎng)度與寬度。這樣可以幫助瀏覽器迅速、準(zhǔn)確地對(duì)網(wǎng)頁的版面進(jìn)行安排，避免瀏覽器在顯示圖片的過程中重新調(diào)整、配置網(wǎng)頁的版面。圖2 圖片長(zhǎng)寬度的標(biāo)注方法為：width=x，height=y。其中的“x”、“y”表示圖片的長(zhǎng)寬各為多少像素（Pixels）。需要說明的是，這個(gè)寬度和高度與圖片本身的尺寸無關(guān)。也是說，在一個(gè)大的圖片上我們可通過更改圖片這兩個(gè)屬性使圖片在顯示的時(shí)候變形，可以變大，也可以變小�！ 「膱D片的顯示方式 圖片的方法已經(jīng)全部送上，也是說圖片的字節(jié)數(shù)已經(jīng)是無法再減少了。但是，我們還可以想辦法在圖片文件大小一定的情況下，讓瀏覽者可以耐心地等待圖片全部出來（抓住瀏覽者的心，^_^）的方法。其方法是采用隔行GIF和逐級(jí)JPEG方式�！ 「粜蠫IF是指圖片文件按照隔行的方式來顯示，比如先出奇數(shù)行，再出偶數(shù)行，造成圖片是逐漸變清楚的。將圖片文件保存成隔行GIF格式的方法是：在Photoshop中進(jìn)行保存時(shí)，選擇“Interlaced”（如圖1）；在PaintShopPro中進(jìn)行保存時(shí)，點(diǎn)擊“Option…”按鈕，選擇“Interlaced”（不要選擇“NonInterlaced”）�！ D3 逐級(jí)JPEG文件可以讓圖片先以比較模糊的形式顯示，隨著文件數(shù)據(jù)不斷從網(wǎng)上傳過來，圖片逐漸變清晰。將圖片文件保存成逐級(jí)JPEG格式的方法是：在Photoshop中進(jìn)行保存時(shí)，選擇“Progressive”，圖2是Photoshop6.0英文版中的選項(xiàng)菜單，圖3是Photoshop5.0中文版中的選項(xiàng)菜單。我們可以發(fā)現(xiàn)，在6.0中還增加文件尺寸與使用Modem下載時(shí)所需時(shí)間的指示，使我們的工作更加方便了。在PaintShopPro中進(jìn)行保存時(shí)，點(diǎn)擊“Option…”按鈕，選擇“Progressiveencoding”。 選用lowsource圖片 如果在網(wǎng)頁上要放一個(gè)較大的圖片的時(shí)候，不妨選用“l(fā)owsource”（預(yù)覽圖）圖片的方法。即在顯示原圖之前，先提供一個(gè)解析度略差或長(zhǎng)寬度略小的圖片當(dāng)做“l(fā)owsource”，使得瀏覽器可以先快速地展現(xiàn)出這個(gè)“l(fā)owsource”圖片，圖4是Dreamweaver中的圖片屬性面板。然后再漸漸地以高畫質(zhì)或較大圖片取代之。通常，“l(fā)owsource”圖片都是主圖片的低分辨率、高壓縮率的版本。4 注意 其中的width=x，height=y是指Src（主圖片）的長(zhǎng)寬度，并非LowSrc（預(yù)覽圖）的長(zhǎng)寬度。如果你不加上width=x，height=y的標(biāo)示，瀏覽器將一律視為以較小圖片作為長(zhǎng)寬尺寸�！ √貏e提示 ，還要說明一點(diǎn)的是：在制作圖片時(shí)，單張圖片不要超過30KB，每個(gè)網(wǎng)頁的圖片總量不要超過60KB（一般情況）。據(jù)統(tǒng)計(jì)分析，每頁不超過60KB圖片的網(wǎng)頁，其下載速度是可以讓人接受的。所有的圖片都必須“”為小圖片（100×40），一般可以控制在6KB以內(nèi)，動(dòng)畫控制在15KB以內(nèi)，較大的圖片可以分割成小圖片。
上一篇：
Flash 5.0使用技巧十四則