當前位置:才華齋>計算機>SEO網站優化>

2017年電商網站圖片優化技巧彙總

SEO網站優化 閱讀(3.03W)

運營線上商城又或是大型電商網站,圖片優化是你必須要掌握的。不僅僅是從吸引潛在消費者,還是增加圖片搜尋流量,又或是提升網站載入速度,圖片優化扮演者非常關鍵的角色。但說到圖片優化,很多傳統意義上的SEO人會說,圖片要加alt標籤,圖片要壓縮…這樣的粗線條顯然是不行的。

2017年電商網站圖片優化技巧彙總

  1. 用結構化資料寫產品圖片ALT

我們很容易使用照相機預設的圖片編號當做圖片們的命名,這樣的話對於搜尋引擎來說,可能就沒有辦法辨識圖片的內容,從而我們就失去了從圖片搜尋那塊兒帶來的流量,這是非常可惜的,特別是當你的產品有數以萬計的話。通常我們可以制定結構化資料規則讓技術人員設計程式批量替換圖片的alt屬性,而無需我們手工操作。

對於產品圖片的描述來說,不建議寫過多冗餘內容,保持資料結構化,做到關鍵詞辨識度高,關鍵詞資訊豐富就可以了,千萬不要做關鍵詞堆積。

  2. 圖片拍攝角度問題

基本上拍攝產品照片不會只拍一個角度,訪客肯定不會滿足於只有一張正面照,多角度的去展示才能更好的吸引訪客在你的網站上停留更多的時間,這個時候如何寫alt標籤?

最好的方法也是保持alt標籤的結構化,繼承主圖的格式,千萬不要去給這些圖片一個全新的寫法。

  3. 關於大圖的顯示問題

如果你希望提供更大的圖片讓使用者爽一下,這個思路很好,但要非常小心,不建議將大圖直接放在網頁上然後用css將圖片縮小,雖然你看上去圖片變小了,但是圖片的尺寸還是實實在在存在的,這會影響載入速度。相反,你可以先放一張較小的圖片,然後提供檢視大圖功能的選項,不管是點選彈出大圖還是另外新頁面顯示。

當然,還有一些人會把大圖切成一張張小圖做拼接,這樣做可以讓圖片快速顯示,但同時一張圖片切成小圖之後,伺服器的請求數會增加,從而會影響網頁載入速度。所以,如果圖片的體積實在過大的話,建議為圖片專門配置新伺服器。

  4. 給圖片減減肥

如果你大量的網站圖片非常臃腫,這將嚴重影響網站載入速度,如果超過10秒鐘,那你等著和你的客戶說byebye把。

圖片檔案應該多大?

有些理論說圖片的大小應該保持在70kb以下,不過這個有時候是很困難的,特別對於大圖片來說幾乎是不可能的.,除非你不求清晰度。我個人倒是覺得,不要用一個標準去限制每一張圖片的大小,關鍵在於,我們有沒有去執行,有沒有看到我這篇博文後去真正壓縮圖片,這才是關鍵。

  5. 用對圖片格式

目前有三種非常流行的圖片格式,他們是JPEG,GIF,和PNG。讓我們來看看他們有何不同,

JPEG (或者說 .jpg) 是最常用的圖片壓縮格式,支援最高級別的壓縮。通常,對於顯示要求比較高的圖片來說,JPEG格式展示的圖片效果較GIF和PNG有明顯的優勢。

GIFs (.gif) 的圖片顯示質量要比JPEGs遜色很多,通常用作非常簡單的圖片展示,比如素材或者裝飾性圖案,gif也可以用來製作動畫。gif不適合用作高顯示質量的圖片。

PNG圖片是比gif更好的選擇,因為PNG圖片支援的色彩要比GIFs多。此外,和JPEG一樣,PNG反覆儲存也不會影響圖片質量,而且對於小圖來說,PNG佔用的體積極小,PNG完美支援透明背景,所以一般logo或一般裝飾性圖案都會選擇PHG格式。注意PNG-24圖片體積要超3倍地大於同樣情況下的PNG-8版本,對待PNG你要十分小心,看仔細了。

順便提一句,大部分的圖片編輯軟體可以轉換以上三種形式的圖片格式。

  6. 正確看待縮圖

大部分電商網站都有縮圖展示,它可以讓訪客迅速的掃描到儘可能多的商品樣式而不需要再去點選一個額外的頁面。

縮圖很棒,但是要小心,他們可能是你網站的速度殺手。他們通常會出現在關鍵的購物流程之中,若因此影響了購物流程的流暢性,額… 就可能又損失了一個顧客。

儘可能壓縮縮圖體積,縮圖的圖片不要過高的追求顯示質量,當用戶點選到下一層詳情頁面的時候再給他一張高質量的圖片。

儘量不要為縮圖設定alt標籤,通常我們並不希望搜尋引擎索引的是縮圖而應是產品詳情頁的高質量原圖。

  7. 使用圖片地圖

如果你的網站用JS做圖片效果來更好的提升使用者體驗,你是否擔心圖片是否還能收錄?當然通常來說蜘蛛是不會爬取不顯示在原始碼裡面的圖片檔案的,但是谷歌對於這點已經很有經驗了,通過圖片地圖的提交,即把圖片地址一個個老老實實地列出來,搜尋引擎就可以爬行了。

  8. 留心裝飾性圖片

如果只是一些邊框類的、或是簡單的樣式圖片,使用PNG-8或者GIFs,你可以建立非常好看的圖片並且只佔幾百bytes的體積。

如果可能的話,儘量使用css來建立一些特殊效果,而非圖片。

不建議為網站設定背景圖片,如果一定要有的話,在保證清晰度的前提下最大程度去壓縮體積。還可以把背景圖當中鏤空或保持透明來壓縮體積。