振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
網頁圖片優化大全
2010/03/16
網頁圖片優化大全

一個好的網站,不但要有精彩的內容,還需要有一個美觀的頁面。談到美觀就離不開圖片,在頁面中適當地用一些精美的圖片作為點綴,會使你的網頁大放異彩。但是,圖片使用不當,也會適得其反,把你的訪問者給嚇跑。主要原因在於圖片尺寸太大,訪問者還沒等打開就早已不耐煩了。

現在向大家介紹一些對圖片進行處理的方法,以使圖片能在網頁中迅速顯示出來。

選好圖片格式:
圖片檔的格式有很多,如GIF、JPEG(檔副檔名為.jpg)、BMP、PNG等,它們都是可以用瀏覽器瀏覽的,但到底選擇哪種圖片格式比較好呢?其實在一般情況下我們只需選擇前面的兩種,即GIF格式與JPEG格式。因為這兩種檔案格式能對圖像進行很大程度的壓縮,使得在產生相近視覺效果的前提下,影像檔尺寸卻小很多。如果圖像是通過掃描器或者數碼相機獲取的,這種圖片中所用到的色彩比較多,這時候我們應該選擇使用JPEG格式來存儲圖像。如果圖片色彩比較少,一般選擇GIF格式。

減少圖片色彩數量:
圖片內色彩數量愈多,檔尺寸就愈大,在Paint Shop Pro軟體的“Color”下拉式功能表中,有一項“Decrease Color Depth”功能,它是用來減少圖像所用顏色數目的,你可以選擇其中的“16 Colors”,即將圖片所使用的色彩數量減到16種顏色。當顏色數目減少後,如果你認為圖像品質變化不大,這時你就可以選用GIF格式。

對圖片進行適當壓縮:
如果你認為色彩數量減少後圖像的視覺效果明顯變差,讓你不能忍受,那麼我們可以採用JPEG壓縮格式。無論是使用什麼樣的圖形處理軟體,在以JPEG格式存檔時,都要向你詢問JPEG的壓縮比。通常,採樣50%到70%的壓縮率比較好。你不妨在這時試著使用256色的格式將圖片存儲成GIF格式,與JPEG格式的檔比一比哪個位元組數更少、圖像品質如何,最終再決定使用什麼圖像格式。
 
控制圖片的尺寸:
圖形尺寸越小,則位元組數相應就會越少。這就要求在製作圖像時,應儘量將圖形四周無用的資訊去掉,比如說你製作了一個非常漂亮的標題文字的圖片,這個圖片的背景最好與網頁的底色相同或者用透明色,這時你製作的圖片一定要讓美術字儘量充滿整個圖像,不要讓圖片中底色邊框過大。還有就是在製作網頁使用圖片時,可以添加“Width”和“Height”屬性,即標注原始圖片的長度與寬度。這樣可以幫助瀏覽器迅速、準確地對網頁的版面進行安排,避免瀏覽器在顯示圖片的過程中重新調整、配置網頁的版面。 

圖片長寬度的標注方法為:width=x,height=y。其中的“x”、“y”表示圖片的長寬各為多少圖元(Pixels)。需要說明的是,這個寬度和高度與圖片本身的尺寸無關。也就是說,在一個大的圖片上我們可通過更改圖片這兩個屬性使圖片在顯示的時候變形,可以變大,也可以變小。 

更改圖片的顯示方式:
圖片減肥的方法已經全部送上,也就是說圖片的位元組數已經是無法再減少了。但是,我們還可以想辦法在圖片檔大小一定的情況下,讓瀏覽者可以耐心地等待圖片全部出來(抓住瀏覽者的心)的方法。其方法是採用隔行GIF和逐級JPEG方式。

隔行GIF是指圖片檔按照隔行的方式來顯示,比如先出奇數行,再出偶數行,造成圖片是逐漸變清楚的。將圖片檔保存成隔行GIF格式的方法是:在Photoshop中進行保存時,選擇“Interlaced”;在Paint Shop Pro中進行保存時,點擊“Option…”按鈕,選擇“Interlaced”(不要選擇“Non Interlaced”)。

逐級JPEG檔可以讓圖片先以比較模糊的形式顯示,隨著檔資料不斷從網上傳過來,圖片逐漸變清晰。將圖片檔保存成逐級JPEG格式的方法是:在Photoshop中進行保存時,選擇“Progressive”。在Paint Shop Pro中進行保存時,點擊“Option…”按鈕,選擇“Progressive encoding”。

選用low source圖片:
如果在網頁上要放一個較大的圖片的時候,不妨選用“low source”(預覽圖)圖片的方法。即在顯示原圖之前,先提供一個解析度略差或長寬度略小的圖片當做“low source”,使得瀏覽器可以先快速地展現出這個“low source”圖片,Dreamweaver中的圖片屬性面板。然後再漸漸地以高畫質或較大圖片取代之。通常,“low source”圖片都是主圖片的低解析度、高壓縮率的版本。

注意:
其中的width=x,height=y是指Src(主圖片)的長寬度,並非Low Src(預覽圖)的長寬度。如果你不加上width=x,height=y的標示,瀏覽器將一律視為以較小圖片作為長寬尺寸。

特別提示:
最後,還要說明一點的是:在製作圖片時,單張圖片不要超過30KB,每個網頁的圖片總量不要超過60KB(一般情況)。據統計分析,每頁不超過60KB圖片的網頁,其下載速度是可以讓人接受的。所有的圖片都必須“減肥”為小圖片(100×40),一般可以控制在6KB以內,動畫控制在15KB以內,較大的圖片可以分割成小圖片。

 

相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇