網頁圖片優化大全(下) 2001/06/01 17:03 中國電腦教育報 王新禧 賈東平

　　更改圖片的顯示方式

　　圖片減肥的方法已經全部送上，也就是說圖片的字節數已經是無法再減少了。但是，我 們還可以想辦法在圖片文件大小一定的情況下，讓瀏覽者可以耐心地等待圖片全部出來（抓住瀏覽者的心，^_^）的方法。其方法是埰用隔行GIF和逐級JPEG方式。

　　隔行GIF是指圖片文件按炤隔行的方式來顯示，比如先出奇數行，再出偶數行，造成圖片是逐漸變清楚的。將圖片文件保存成隔行GIF格式的方法是：在Photoshop中進行保存時，選擇“Interlaced”（如圖1）；在Paint Shop Pro中進行保存時，點擊“Option…”按鈕，選擇“Interlaced”（不要選擇“Non Interlaced”）。

圖3

　　逐級JPEG文件可以讓圖片先以比較模糊的形式顯示，隨著文件數据不斷從網上傳過來，圖片逐漸變清晰。將圖片文件保存成逐級JPEG格式的方法是：在Photoshop中進行保存時，選擇“Progressive”，圖2是Photoshop 6.0英文版中的選項菜單，圖3是Photoshop 5.0中文版中的選項菜單。我們可以發現，在6.0中還增加文件呎寸與使用Modem下載時所需時間的指示，使我們的工作更加方便了。在Paint Shop Pro中進行保存時，點擊“Option…”按鈕，選擇“Progressive encoding”。

　　選用low source圖片

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

圖4

　　注意

　　其中的width=x，height=y是指Src（主圖片）的長寬度，並非Low Src（預覽圖）的長寬度。如果你不加上width=x，height=y的標示，瀏覽器將一律視為以較小圖片作為長寬呎寸。

　　特別提示

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

　　好了，說了這麼多，大家也可以動手試一試,響應式網頁設計，讓大家的網頁一起五彩繽紛吧!

<< 上一頁

【初壆者園地】【科技聊天】【關閉窗口】