眾所周知,圖片是網頁中表現主題與內容的重要表現元素,對于用戶來說,網站漂亮不漂亮,是否賞心悅目最大的看點還是在圖片.既然如此重要,要去除它就不太現實了.深圳學文培訓黃老師建議:應該怎么對它進行設置,以達到搜索引擎的要求,讓用戶看著賞心悅目的同時也讓搜索引擎能看懂圖片表達的含義.

    首先,我們要了解到:人類能看懂圖片是因為人類的眼睛與思想可以感受到圖片所表達的內容也含義.而搜索引擎在派蜘蛛抓取網頁的時候,發現一個img標簽才會看到這里有一張圖片,這時候它能看懂的就是〈img alt="" src="" /〉這樣一個標簽,而不能很明確的看到圖片的顏色、表達的內容等相關信息.所以,我們應該做以下的優化措施:

    在網頁中插入圖片的XHTML標記是 img ,具體的語法為:〈img alt="這里寫圖片的說明信息" width="200" height="200" src="1.jpg" /〉 .

    一、給圖片加上 ALT 屬性

    ALT屬性簡單理解為對圖片進行文字性的說明,在IE瀏覽器中,只要指定了ALT屬性值,當鼠標移上去時就會出現圖片說明.在搜索引擎在收錄網頁時也會看到ALT屬性,并且會將ALT屬性作為圖片表達內容的參考.在W3C標準中,也明確要求必須要為所有圖片加上 ALT屬性,以便于不可顯示圖片的瀏覽器也能看懂圖片表達的內容.

    二、圖片的格式盡量采用GIF、JPG、PNG

    有三種常見的網頁圖片格式分別是:.gif .jpg .png ,每一種圖片格式都有其獨有特點,.gif這種圖片格式主要應用于兼容IE6的透明圖片格式;.jpg圖片是目前互聯網上主流的應用圖片;.png是一種優秀的圖片格式,質量非常高.但遺憾的是默認情況下IE6無法顯示其透明特性,由于質量很高,所以占用硬盤空間也較JPG圖片大一些.

    三、圖片尺寸不宜太大、太多

    圖片太大會導航網頁打開速度變慢,而且遲遲不能加載完成,導致用戶在未打開網站的情況下就已經離開了.所以圖片的使用與網站的用戶體驗要取得平衡或兩全其美.如果網站要表現很多小圖標或小圖片,建議可以使用CSS精靈的模式來表現,把許多的小圖片整合到一個圖片中,再通過背景定位將其導出,這樣可以有效降低圖片請求數據,加快網頁打開速度.

    四、插入圖片時必須要指定圖片的寬度和高度

    網頁在瀏覽器渲染展示的過程中,會按網頁指定的屬性來顯示.如果只在CSS里面設置圖片的寬度或高度,就會導致渲染時間長,打開速度慢.具體屬性為: width="200" 寬度為200象素, height="200" 高度為 200象素.所以在可以指定的情況下,建議應指定圖片的寬度和高度,以加快瀏覽器的渲染速度.

    五、img標簽是自關閉標簽

    任何的XHTML標簽都應該關閉,img標簽的關閉方法是在自己標簽結束之前加上反斜杠"/".這也是W3C標準所要求的,可以使網頁更規范,讓瀏覽器快速識別,提高打開速度.