设计之家 > 靈感 > 網頁UI > 網頁理論 >

主頁圖形快速顯示的方法

作者:佚名 來源:設計之家 時間:2006-04-27
現在介紹加速網頁圖形顯示速度的六種方法,為你解決這個難題。其最基本的宗旨就是,讓你用買魚的價錢,品嘗到熊掌的美味和營養。   

  1.首先要確定圖像的格式。這一點很重要,在HTML文件中,使用*.jpg、*.gif、*.bmp等文件格式均是可以瀏覽的。我們只選擇前面的兩種,因為這兩種文件格式能對圖像進行很大程度的壓縮,使得在產生相近視覺效果的前提下,圖像文件的容量會小很多。但是,我們到底是使用JPG格式呢,還是使用GIF格式?如果圖像是使用掃描儀輸入進計算機的(當然也包括用數字相機),通常這種圖像都是一些人物照片,風景照片什么的,這種圖片中所用到的色彩比較多,就是說圖像中既有淺紅色,又有深紅色,還有綠色、藍色、黃色等等,這時候我們應該選擇使用JPG格式來存儲圖像。如果圖形是由你自己使用Photoshop,Paint Shop Pro等軟件制作的,如標題文字等,這時圖像中所使用的色彩通常會比較少,我們可以選擇GIF格式。要想知道圖像中到底使用到了多少種顏色,只要使用Paint Shop Pro軟件(筆者使用的是5.00版)中的“Color / Count Colors Used ”功能即可以得到準確的答案。   

   2.在Paint Shop Pro軟件的Color下拉菜單中,還有一項“Decrease Color Depth”功能,它是用來減少圖像所用顏色數目的,你可以選擇其中的16 Colors,即將圖片所使用的色彩數量減到16種顏色。當顏色數目減少后,如果你認為圖像質量變化不大,那么就選用GIF格式。要知道,JPG格式對待彩色圖像可是一律使用16M色呦。   

   3.如果你認為色彩數量減少后圖像的視覺效果明顯變差,讓你不能忍受,那么我們就采用JPG壓縮格式。無論是使用什么樣的圖形處理軟件,它都會在你存盤時向你詢問JPG的壓縮比。當然,壓縮得越狠,文件越小,但是圖像質量也越差。通常,采樣50%到70%的壓縮率比較好(百分數越大,文件越小),當壓縮率從0%上升到50%時,文件大小會急劇下降,而圖像質量卻變化不大,再加大壓縮率后,圖像會明顯變差,而文件的大小卻減少得十分有限,有時甚至只減少幾十個字節。不過有一點要告訴你,凡事都沒有絕對情況,你不妨在這時試著? 256色的格式將圖片存儲成GIF格式,與JPG格式的文件比一比哪個字節數更少,圖像質量如何,最終才決定使用什么圖像格式。

前面幾乎將圖像減肥的方法都說出來了,也就是說圖像的字節數已經是無法再減少了。但是,我們可以想辦法在圖像文件大小一定的情況下,讓瀏覽者可以耐心等待圖像全部出來。其方法是采用隔行GIF和逐級JPG方式。隔行GIF是指圖像文件是按照隔行的方式來顯示的,比如先出奇數行,再出偶數行,造成圖像是逐漸變清楚的。將圖像文件保存成隔行GIF格式的方法是,在Photoshop中進行保存時,選擇“Interlaced”(不要選擇“Normal”),在Paint Shop Pro中進行保存時,點擊“Option…”按鈕,選擇“Interlaced”(不要選擇“Non Interlaced”)。逐級JPG文件可以讓圖像先以比較模糊的形式顯示,隨著圖像文件數據不斷從網上傳過來,圖像會逐漸變清晰。這樣做的好處是圖像可以盡快地顯示出來,雖然圖像不很完美,但是卻讓瀏覽者看到了希望,并且圖像在不斷地變好。將圖像文件保存成逐級JPG格式的方法是,在Photoshop中進行保存時,選擇“Progressive”,在Paint Shop Pro中進行保存時,點擊“Option…”按鈕,選擇“Progressive encoding”。    
   5.還有一種讓瀏覽者可以耐心等待圖像顯示出來的辦法,那就是使用預覽圖像。即在顯示原圖之前,先顯示一幅字節數比較小,畫面質量相對較差的圖片。由瀏覽者決定是否瀏覽原圖。通常,預覽圖像都是主圖像的低分辨率、高壓縮率的版本。使用預覽圖像的方法是:<img src="temp.gif" lowsrc="preview.gif"$>,其中temp.gif是原圖,而preview.gif是預覽圖。   

   6.在可以達到預期目的的情況下,盡量把圖形尺寸做小,圖形尺寸越小,則字節數相應就會越少。在制作圖像時,還要盡量將圖形四周無用的信息去掉,比如說你制作了一個非常漂亮的美術字的圖片,它的背景是黑色,而網頁的底色也是黑色,這時你就一定要讓美術字盡量充滿整個圖像,不要讓圖片中黑色的底色邊框過大,因為圖片的底色最終要與網頁的底色融為一體,在美術字大小一定的情況下,圖片做得越大,圖像文件大小的字節數就會越多,在網上傳輸起來就越費時間。還有就是在*.html文件中使用圖像時,可以添加WIDTH和HEIGHT屬性,它們分別代表圖像在頁面上顯示時的寬度和高度。需要說明的是,這個寬度和高度與圖像本身的尺寸無關。例如,你可以在*.html文件中這樣使用尺寸為88×31的圖像文件logo.gif。
标签:主頁

推薦設計

最新文章