SEO優化:自建站圖片優化攻略

  • A+
所屬分類:SEO技術
點擊進入成都川嬌

圖像優化是電商網站運營中非常重要的一環,可以幫助網站吸引消費者點擊,減少網站加載時間。圖像優化也和搜索引擎優化有關,利用產品圖片、裝飾圖片能使店鋪在搜索引擎上排名前列。

我們是否曾有這樣的疑問:為什么圖片總是不能上谷歌圖片搜索?是否需要將alt屬性添加到我的圖像?JPEG、GIF和PNG圖像有什么區別?應該在什么時候使用哪一種格式?不用擔心,跨境小編這就來答疑解惑!8種網站圖像優化方法安利給大家,攻略在手,天下我有!

1

圖片命名簡單直白

使用相關關鍵詞描述圖片可以幫助網頁被搜索引擎收錄,因為搜索引擎不僅會檢索網頁上的文本,還能檢索出描述圖片的關鍵詞。因此,創造性的描述、包含關鍵詞的文件名對圖像優化至關重要。

拿這張圖片舉個例子:

一般默認命名為“DCMIMAGE10.jpg”,但是如果把圖片命名為2012-Ford- Mustang-LX-Red.jpg就能提高被搜索到的機率。

想想消費者在搜索產品時會輸入什么關鍵詞,我們就可以據此命名。比如,想購買汽車的消費者可能會輸入以下關鍵詞:

2012 Red Ford Mustang LX(2012年紅色福特野馬LX)

Ford Mustang LX Red 2012(福特野馬LX紅2012)

Red Ford Mustang LX 2012(紅色福特野馬LX 2012)

我們可以查看網站分析來了解用戶的關鍵詞搜索習慣,或者查看用戶最常用的命名模式,并按照該模式來命名我們的圖片。

2

仔細優化alt屬性

Alt屬性是瀏覽器無法正確顯示圖像時,代替圖像的文本,它們也可以增加網頁可訪問性。如果網頁無法顯示圖像,根據瀏覽器設置,將鼠標懸停在圖像上,用戶也將看到alt屬性文本。

alt屬性也會為網站增加SEO價值。在網站上添加合適的包含關鍵詞的Alt屬性,可以提高網站在搜索引擎上的排名。事實上,添加alt屬性可能是電商產品要在Google圖片和網絡搜索中顯示的最佳方式。

下圖為一個Alt屬性的源代碼:

圖像優化的首要任務就是添加網站上每個產品圖片的alt屬性。

以下是一些簡單的alt屬性規則:

●和圖片文件名一樣,用通俗的語言描述圖片。

●如果產品有型號或序列號,請在alt屬性中標明。

●不要在Alt屬性中加入過多關鍵字(比如alt =“福特野馬肌肉車現在購買便宜的最優惠價格”)。

●請勿將alt屬性用于裝飾性圖像。這樣可能會因為過度優化而受到搜索引擎的懲罰。

●請定期進行健全性檢查。查看我們網頁的來源并檢查我們的alt屬性是否正確填寫。

3

合理選擇圖像尺寸和產品角度

通常產品圖片包含多個角度,比如我們想賣掉福特野馬,那我們可以加入內飾、后部(尤其是空氣擾流板)、輪輞、發動機等等的特寫照,并為每張圖片創建獨特的alt屬性,比如:

2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg - >使用alt屬性:alt =“2012 Ford Mustang LX Red Leather Interior Trim”

2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg - >使用alt屬性:alt =“2012 Ford Mustang LX Red Rear View Air Spoiler”

這樣做可以增加產品被搜索到的概率。

我們可能會覺得越大的圖片會為用戶帶來更好的瀏覽體驗,但是要小心謹慎。不管怎樣,不要將最大的圖片放在網頁上,然后通過源代碼縮小尺寸。因為太大的圖片會加長圖片的加載時間。我們可以放上小一點的圖片,把較大的圖片放在彈出窗口或者是單獨的頁面上。

4

調整圖像的文件大小

一半的消費者都不愿意等待電商網站加載超過3秒鐘。亞馬遜一項研究發現,如果他們的網站運行慢1分鐘,每年就會損失16億美元。谷歌也把頁面加載時間作為其算法中的排名因子。由此可見,網站加載時間至關重要。如果普通電商網站加載時間需要15秒,就會損失大量潛在消費者。

網站的內容大小不同,需要加載的時間也不同。文件越大,加載時間就越長。如果商家縮小圖片文件的大小、提高網頁加載速度,那么訪客就會留下來。

縮小圖像文件大小的方法之一是在Adobe Photoshop中使用“Save for Web”命令。電商網站圖片最好不要超過70kb,我們可以用Photoshop把圖像盡量調小,但是同時也要注意圖片質量。

質量:位于右上角(即70)

文件格式:位于右上角(即JPEG)

優化:位于右上角的復選框(即Optimized)

顏色:位于右上角此復選框(即轉換為sRBG)

縮小和銳化:位于底部右側(即W:和H :)

預期的文件大小:位于左下角(即136.7K)

我們也可以選擇“導出為”

除了Photoshop以外,還有許多在線工具可以編輯圖片。Adobe還提供Photoshop的免費平板和手機版應用軟件。雖然移動版沒有電腦版Adobe Photoshop功能全,但它涵蓋了圖像編輯的基礎工具,且是免費的。

5

選擇合適的文件類型

網絡上有三種圖片文件常用格式:JPEG、GIF和PNG。

(1)JPEG

JPEG(或.jpg)是互聯網上圖片的標準格式。JPEG圖像可以在保證圖片質量的情況下壓縮成更小的格式。以上示例圖片,JPEG格式也能保證高質量。

(2)GIF格式

GIF(.gif)圖像質量比JPEG圖像低,適合更簡單的圖像,如圖標和裝飾圖像,GIF也支持動畫。

GIF非常適合網頁上的簡單圖像(僅包含幾種顏色),但不太適合復雜的圖像和圖片,也不適合大圖。

(3)PNG

PNG作為GIF的替代品,使用越來越廣泛。PNG支持比GIF更多的顏色,并且不會像JPEG一樣因為重復保存而降低質量,但是文件大小仍然比JPEG圖像大得多。

另外需要注意,PNG-24圖像的文件大小比PNG-8大三倍以上。

下面是一個極端的例子,三中文件類型的大小都為24kb。可以看出,JPEG在三者中完勝,而GIF和PNG必須降低質量才能保證相同的文件大小。

在大多數情況下,JPEG是最好的選擇。它們為最小的文件尺寸提供的質量最佳。

千萬別將GIF用于大圖,那樣圖片尺寸會非常大,而且沒辦法降低。GIF可以用來作為縮略圖和裝飾圖片的格式。

PNG可以成為JPEG和GIF之間很好的選擇。如果我們只能用PNG格式,請使用PNG-8,而不是PNG-24。PNG格式的圖片比較小,所以適合簡單的裝飾圖像。

大多數圖像編輯軟件可以將圖像保存為上述任何文件格式。

6

優化縮略圖

許多電商網站都會使用縮略圖,特別是在類別頁,縮略圖可以幫助網站快速展示產品。

縮略圖一般會出現在購物的關鍵點,如果它們使我們的類別頁面不能快速加載,客戶可能就會因此流失。因而盡可能縮小縮略圖文件的大小。

7

謹慎使用裝飾性圖像

網站通常有各種各樣的裝飾圖片,例如背景圖片、按鈕和邊框。所有與產品無關的東西都可能被視為裝飾形象。

雖然裝飾圖像可以增加網頁的美感,但它們會擴大文件大小、延長加載時間。所以,賣家需要謹慎使用裝飾圖片,以免客戶訪問量降低。

賣家可以檢查網站上所有裝飾圖像的文件大小,或使用最小化文件模板。

以下是一些縮小裝飾圖像文件大小的方法:

●構成邊框或簡單圖案的圖片可以用PNG-8或GIF,這樣做出的美觀邊框和圖案只需要幾百字節。

●盡可能使用CSS創建彩色區域,而不是使用圖像。盡量用CSS樣式來替換裝飾圖像。

●大型壁紙風格的背景圖片文件可能會很大,盡可能在不破壞圖像質量的前提下縮小文件。

●縮小背景圖像大小的一種技巧是剪切背景圖像的中間部分,使其成為平坦的顏色,甚至透明。

8

測試我們的圖像

優化圖像的最終目的是提高銷量,最后我們需要測試什么樣的圖像以及多少圖像可以提高銷量。一些自主電商平臺的加載時間很長,而減少網頁的圖片數量可就以降低加載時間,提高點擊量和銷售量。而有的時候更多的圖片可以給消費者帶來更好的瀏覽體驗,從而提高銷量。因此,相應的測試可以幫助我們找出最合適的圖片數量。

點擊進入成都川嬌
廣告也精彩

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: