SEO之怎樣減小網頁體積

本文將介紹最佳化圖片的基礎知識。
一般搜尋引擎只關心網頁的html體積，而使用者則關心網頁整體的體積，因為則關係到網頁的開啟速度，前文中提到8秒中原則，如果你的網頁在8秒中內不能呈現在使用者面前，使用者就會產生延遲感，就有可能關閉視窗或標籤，放棄你的網頁。有些瀏覽器可以在狀態列中顯示頁面的開啟時間如TT，Firefox裝上 Yslow外掛程式後可以看到頁面的具體開啟時間，精確到0.001s！有興趣的朋友可以下載下來試試。好了，切入正題，首先我們從介紹網頁中常見的圖片格式開始！

一、 常見的圖片格式
可在網頁上顯示的常見的圖片格式有GIF，JPG或JPEG，PNG，BMP等。

1. GIF：圖形交換格式
GIF圖片以8位顏色或256色顏色儲存單個映像資料或多個映像資料（GIF動畫），GIF映像格式是無損壓縮格式，支援透明度、壓縮、交錯和動畫。常見的QQ動畫表情就是GIF動畫，GIF格式適用於儲存顏色較少的圖片，比如logo，可以達到最佳的最佳化效果，有最小的圖片體積完美的呈現你的圖片。

2. JPG或JPEG：聯合攝影專家組
JPG或JPEG圖片是以24位顏色儲存單個光柵映像，是與平台無關的通用圖片格式，支援最進階別的壓縮，不過這種壓縮是有損耗的。一般風景照片，人物相片適合用JPG格式來儲存，在對JPG圖片進行最佳化的時候可以對圖片效果和圖片體積大小之間做一下權衡，爭取在保證圖片效果的情況下最大程度降低圖片體積。

3. PNG：可移植網狀圖形
PNG圖片以任何色彩深度儲存單個光柵映像，PNG之所以稱為可移植網狀圖形，主要是因為這種格式與平台無關，可以在Windows、Linux等各種平台中正常顯示。PNG映像與GIF類似，支援透明背景，交錯，但其提供的壓縮量較少，相對於GIF和JPG映像，在相同效果片體積較大，且部分老的瀏覽器不知道PNG透明背景，但PNG受到最新的Web瀏覽器支援，是最有發展前途的圖片格式之一。

4. BMP：Windows 位元影像
Windows位元影像可以用任何顏色（從黑白到24位顏色）儲存單個光柵映像。Windows映像與其他微軟的程式相容，它不支援檔案壓縮，會造成檔案體積非常大，一般不適用於網頁。但一些網頁設計者或者編輯沒有注意到這一點，仍然使用BMP圖片格式來在網站上發布他們圖片，所以BMP圖片也成為了網頁中常見的圖片格式，但再次聲明一點：BMP圖片檔案不適用於網頁。如果條件容許，請盡量壓縮。

二、 圖片格式的選擇
此處根據利用案例來分析一下：

分析1：本站的logo圖片格式的 選擇：
本站logo圖片效果（GIF格式）：

 
http://www.hbsem.cn logo

Logo圖片顏色構成很簡單：只有兩種顏色，屬於顏色較少的範疇，如果使用jpg格式：如下面圖片：

 
http://www.hbsem.cn logo-jpg

在圖片寬度和高度不變的情況下，選擇80%的品質度，圖片體積為7K（可右擊圖片查看圖片屬性資訊、包括圖片名稱、類型、地址、大小、維度等資訊），而如果仔細比較兩個圖片還可以看出這個JPG格式效果稍遜於上面的GIF格式圖片。所以對於顏色較少的圖片，選擇GIF格式是非常合適的。常見顏色較少圖片有手繪畫、工程圖紙等。

分析2：人物圖片格式的選擇
此處分析人物圖片格式選擇方法：在限定圖片體積大小的情況下，比較各種JPG、GIF、PNG等格式的圖片效果。

百度搜尋”美女”，下面這個美女的圖片排在第一位，沒辦法就拿這位美女的相片來實驗了哦！

為JPG格式，26K

 
美女 JPG 26K

為GIF格式，26K

 
美女 gif 26k

為PNG格式，26K

 
美女 png 26k

有想法了吧？對於風景照、人物相片jpg格式將是比較理想的選擇。

三、 插入圖片到網頁時的注意事項
1. 使用真正的縮圖
這是許多許多網站常犯的錯誤！我幾乎在所有服務過的客戶網站上發現了這一毛病。看上去一個小小的圖片，等查看其圖片檔案的時候才知道小小縮圖後隱藏著巨大的秘密——清晰的原圖，有些甚至就是直接從數位相機裡拷出來的相片，體積達幾兆之多。網頁上如果有個十張八張這樣的縮圖，我想可能要用迅雷才能下載下來了。
要減小網頁體積，你得縮圖使用真正的，用圖片處理軟體縮小了尺寸的圖片就顯得非常重要！這是你必須要注意的問題。

2. 關於圖片交錯功能的使用
圖片交錯是指網頁在載入的時候先載入部分映像的內容，然後再慢慢載入，這樣使用者可以先看到一個大概的較差的效果，但等圖片完全載入後圖片就會完美展現。圖片交錯功能的使用可以提高網頁載入速度。對於體積較大的圖片，又不想做太多的壓縮以免影響效果，可以使用交錯功能來既保證效果又不影響速度。目前支援交錯的主要有GIF格式映像和PNG格式映像。

總結：本文介紹了常見的圖片格式、圖片格式選擇的方法、插入圖片到網頁時的注意事項，關於為了減小網頁體積而最佳化圖片的方法相信大家已經有了眉目。接下來的工作就是多多去實踐，網頁圖片最佳化推薦使用FireWorks，百度是否更懂中文還有待考證，但FireWorks確實更懂網頁（個人使用心得），不過Photoshop畢竟很好很強大，如果對最佳化要求不高的話，使用Photoshop最佳化即可。