免費策略諮詢

如果你經營一家網上商店,圖片優化是一門你需要掌握的藝術。從吸引消費者瀏覽Google圖片到縮短網站加載時間,圖片優化是建設一個成功的電子商務網站的重要因素,因為產品攝影正正是電商的基礎。

什麼是圖片優化?
圖片優化是指在不犧牲圖片質量的前提下,盡可能減少圖片文件大小,從而減少頁面加載時間。這亦都與圖片搜尋引擎優化有關。亦即是說,讓你的產品圖片和裝飾圖片在Google及其他圖片搜尋引擎上排名更加靠前。

你有沒有曾經被以下這些問題所困擾?
為什麼我用Google圖片搜尋時,我的產品照片從沒出現過?
我需要在圖片中加入 alt 屬性嗎?
JPEG、GIF和PNG有什麼區別?什麼時候應該使用其中一個來代替另外一個?
這些問題都會得到解答,因為今天會深入研究這些問題。
以下是優化網頁圖片的方法:

1. 用淺顯易懂的語言描述圖片

將成千上萬的產品照片以相機默認的文件命名是非常容易(因為只使用自動預設的名稱),但其實,你應該為網站上的圖片創建含有關鍵字的文件名稱,因為關乎到圖片搜尋引擎優化:因為搜尋引擎不僅會抓取網頁上的文本,還會抓取圖片文件名。
就拿以下這張圖片來說:
你可以使用相機分配給圖片的通用名稱(例如DCMIMAGE10.jpg)。不過,更理想的做法是將文件命名(為2012款-福特-野馬-LX-紅色.jpg)。
考慮圖片的文件名稱時,應該首先思考一下客戶搜尋產品時會使用什麼樣的命名模式及關鍵字?在上面的例子中,汽車購買者可能會搜尋以下的詞語:
2012 Red Ford Mustang LX
2012款紅色福特野馬 LX
Ford Mustang LX Red 2012
福特野馬LX 紅色2012款
Red Ford Mustang LX 2012
紅色福特野馬LX 2012款
通過網站分析,看一下你的客戶遵循什麼樣的關鍵字搜尋模式。確定他們所使用的命名模式,就可以使用該模式來命名圖片文件。
如果你不打算以客戶搜尋的數據為導向,那麼在命名圖片時一定要確保使用相關關鍵詞(即盡量描述圖片的內容)。
SEO顧問公司Moz亦曾指出網站的圖片文件進行戰略性命名的重要性:它不僅可以提高你的網頁搜尋引擎優化,也可以幫助你的網頁和圖像在搜尋引擎結果頁(SERP)中排名更高。

2. 仔細優化alt屬性

當瀏覽器無法正確加載圖片時,alt 屬性是圖像的替代文本,即使圖片已加載,只要將鼠標懸停在圖片上,就可以看到alt屬性文本(取決於瀏覽器設置)。
Alt 屬性也為你的網站增加了 搜尋引擎優化價值。在網站上的圖片中添加適當的alt屬性,包括相關的關鍵字,可以幫助你在搜尋引擎中獲得更好的排名。實際上,使用alt屬性可能是令你的電子商務產品出現在Google圖片及網絡搜尋中的最佳方式。
對於圖片優化來說,首要的任務是為網站上的每個產品圖片填寫 alt 屬性。
以下是一些關於 alt 屬性的簡單規則:
1/ 用淺顯易懂的語言描述你的圖片,就像你給圖片文件命名一樣。
2/ 如果您銷售的產品有型號或序列號,可在 alt 屬性中使用這些型號或序列號。
3/ 避免用關鍵詞填滿alt 屬性。(例如,alt=「福特,野馬,肌肉車,現在買,便宜,極佳,最低價出售」)。
4/ 不要在裝飾圖片中使用 alt 屬性。過渡優化有機會被搜尋引擎的演算法懲罰。
5/ 最後,要習慣經常檢查,查看網頁的源代碼,檢查 alt 屬性是否填寫正確。


3. 謹慎選擇圖片尺寸和產品角度

展示產品的多個角度是常見的做法。回到福特野馬的例子,如果你想賣掉一輛車,你絕對不會只想展示汽車的一張圖片,而是會展示以下照片:
汽車內部圖片
汽車後部圖片
車輪圖片
引擎圖片
充分利用這些額外圖片的最好方法,就是填寫 alt 屬性。你需要做的就是為每個產品圖片創建獨特的 alt 屬性。
2012款-福特-野馬-LX-紅色-真皮-內飾.jpg->使用alt屬性:alt=「2012款福特野馬LX紅色真皮內飾」。
2012款-福特-野馬-LX-紅色-後視鏡-空氣擾流板.jpg->使用alt屬性:alt=「2012福特野馬LX紅色後視鏡空氣擾流板」。
這裡的關鍵是添加對基本alt屬性的描述,以便潛在的搜尋者登陸你的網站。如果你做了額外的工作,Google就會獎勵你提供更多搜尋流量。

4. 提供更大的圖片

製作網站時,您可能希望為訪問者提供更大更清楚的圖片,以提供獲得更好的用戶體驗,但是要注意避免把尺寸過大的圖片放在你的網頁上,也不要只是簡單地通過源代碼縮小尺寸。相反,應該將其設置為較小的圖片,並提供在彈出窗口或單獨網頁上查看較大圖片的選項。

5. 減小圖片的文件大小

載入一個電子商務網站時,將近50% 的消費者不會等待超過3秒鐘。
在全球範圍內,平均頁面加載時間實際上正在增加。
亞馬遜發現,如果他們的網頁減慢一秒鐘,他們每年將損失16億美元。
Google的演算法會將頁面加載時間列為排名因素。
所以,如果網站上的圖片加載時間超過15秒,你基本上可以和潛在客戶說拜拜了。
那麼,你應該做什麼?
當客戶訪問你的網站時,可能需要一段時間才能加載所有內容,這取決於您的文件有多大。文件越大,加載網頁所需的時間就越長。(注意:如果您是Shopify商家,網站會自動壓縮圖像,因此這對您來說不是問題。)
如果你能縮小網頁上圖片文件的大小並提高頁面加載速度,就可以減低網站跳離率。
坊間有很多在線工具可以用來編輯圖片,Adobe甚至為智能手機和平板電腦提供了免費的圖片編輯應用程序Photoshop Express。這個工具不具備 Adobe Photoshop 桌面版的所有功能,但它涵蓋了圖片編輯的所有基本知識,而且免費。
其他實用的在線圖像編輯工具包括:
專家稱 PicMonkey 是一款「非常棒的照片編輯工具」。
PIXLR易於掌握,並為您的智能手機提供了100%免費的應用程式 ,因此您可以隨時隨地編輯圖片。
Canva是另一個相當先進的在線圖片編輯器。
最後還有GIMP。GIMP是一套跨平台開放源代碼圖片處理的軟件,可以在Windows、Mac或Linux上運行。它幾乎含有Photoshop所有的圖片處理功能,但是相比Photoshop可能會有點生硬。不過作為一個免費的圖片編輯應用程序,它還是相當不錯的。
圖片文件應該有多大?
對於電子商務網站的圖片,根據經驗來說,盡量保持圖片文件大小在70 kb 以下是比較好的。不過這有時會有點不容易,尤其是對於較大的圖片來說。

選擇正確的文件類型。
一般來說,要將圖像發佈到網頁上時,有三種常用的文件類型可用:JPEG、GIF和PNG。
來看看這三種文件類型,它們會如何影響同一張圖片:
JPEG(或.jpg)圖片算是比較舊的文件類型。提及網上的圖片時,JPEG 已經成為互聯網的行業標準。JPEG圖片可以被大幅度壓縮,從而產生檔案較小的高質量圖像。
GIF(.GIF)圖片的質量低於JPEG圖片,可用於更簡單的圖片,如圖標和裝飾圖片。相信大家都知道,GIF 亦支持動畫。
關於圖片優化,GIF非常適合那些簡單的網頁圖片。但是對於複雜的圖片和照片,GIF並不總是那麼有吸引力。對於檔案較大的圖片尤其如此。
PNG圖片作為GIF的替代格式越來越受歡迎。PNG比 GIF 支持更多的顏色,而且它不會像JPEG 一樣於重新保存後色調出現問題。儘管 PNG文件類型開始得到更頻繁的使用,但是文件大小仍然可以比JPEG圖像大得多。
以下是選擇文件類型時要記住的一些提示:
在構建一個電子商務網站的大多數情況下,JPEG將是你最好的選擇,可以用最小的檔案大小提供最好的質量。
切勿將GIF格式用於大型產品圖片。檔案會變得非常大,而且沒有好的方法來縮小它,因此應該只將GIF用於預覽圖和裝飾圖片。
PNG是JPEG和GIF的一個很好的替代格式。如果你只能獲取PNG格式的產品照片,請嘗試使用PNG-8而不是PNG-24。PNG文件非常小,因此可以作為簡單的裝飾圖片使用。
大多數圖片編輯軟件都可以將圖片保存為上面所說的任何文件格式。

6. 優化縮圖

許多電子商務網站都會使用縮圖,尤其是在分類頁面上,縮圖可在不佔用太多空間的情況下快速展示產品,但要小心,它們可能是頁面加載速度的無聲殺手,因為縮圖累積將對頁面載入時間產生巨大影響。縮圖通常在購物過程中的關鍵點出現。如果他們導致分類頁面無法快速加載,你可能會失去一個潛在的客戶。
那麼,你要做的就是盡可能縮小縮圖文件的大小。放棄少許質量來換取較小的文件大小很多時候都是值得的。

7. 使用網站導覽

如果你的網站使用Javascript圖庫、彈出式圖片或其他比較「招搖」的方式來改善整體購物體驗,那麼使用網站導覽會有助於Google注意到你的圖片。
網絡爬蟲無法抓取網頁源代碼中沒有特別標示的圖片。所以,為了讓網絡爬蟲識別不明圖片,你必須在網站導覽上列出他們的位置。
可以在 robots.txt 文件中插入以下行來顯示網站導覽的路徑:
Sitemap: http://example.com/sitemap_location.xml
或者你可以使用Search Console來將網站導覽提交給Google。
Google有許多關於圖片發佈的指導方針,這可能會幫助你的網站在搜尋結果頁上獲得更高的排名。此外,你亦可以使用Google網站導覽向Google提供更多關於你網站上圖片的資訊,這可以幫助Google找到更多你網站上的圖片。
使用網站導覽並不能保證你的圖片會被Google索引,但這肯定是圖片搜尋引擎優化的一個有效步驟。Google Webmaster工具對於網站導覽的格式有很多建議,不妨參考。
為所有的圖片添加特定的標籤是很重要的。你還可以創建另一個網站導覽來單獨列出圖片。重要的是要為任何你已經或將要創建的網站導覽添加所有必要的信息,同時使用特定的標籤。按照Google建議的這些指導原則來創建一個包含圖片信息的站點地圖:
https://developers.google.com/search/docs/advanced/sitemaps/image-sitemaps

8. 謹慎使用裝飾性圖片

網站通常有各種裝飾圖片,比如背景圖片、按鈕和邊框。任何與產品無關的東西都可以被認為是裝飾性的。
雖然裝飾性的圖片可以給網頁增加美觀度,但是它們會導致文件大小過大和加載時間過慢。因此,你可能仔細審視網站所使用的裝飾圖片,以避免拖累削弱網站的轉換率。
你需要檢查網站上所有裝飾性圖片的文件大小,並使用能夠最小化文件大小的網站模板。
以下是一些縮小裝飾圖片文件大小的技巧:
對於用作邊框或簡單圖案的圖片,可以使用 PNG-8或 GIF格式,就可創建只有幾百位元組大小而又美觀的圖像。
如果可能的話,使用CSS來製作有色區域,而不是使用圖片。盡可能使用CSS樣式來取代任何裝飾性圖片。
另外亦要留意網站的背景圖片,這些文件可能很大,所以在不破壞圖像質量的前提下要盡可能縮小它們。
你可以用一個小技巧來縮小背景圖片的大小,那就是把背景圖片的中間部分裁走,使它變成單調的顏色,甚至是透明的。這可以大大縮小文件的大小。

9. 謹慎使用內容傳遞網路(CDNs)

使用Shopify的商家其實不必擔心這一點,因為它們自身就是一個托管解決方案。內容傳遞網路(CDNs)是托管圖片和其他媒體文件的首選場所。它們可以提高頁面加載速度,幫助解決頻寬問題。不過內容傳遞網路缺點之一就是反向連結。大家可能都知道,反向連結是搜尋引擎優化的關鍵,網站擁有越多的反向連結,在搜尋引擎中的表現就越好。
將圖像放在內容傳遞網路(CDN)上,代表你會將圖片從網域中移除,並將其放在內容傳遞網路(CDN)的網域中。所以當有人連結到你的圖片時,他們實際上是連結到內容傳遞網路(CDN)。
因此,最佳做法是:
轉用內容傳遞網路前,先決定這是不是對生意最好的選擇。
如果你的網站每個月都有大量業務,那麼內容傳遞網路(CDN)很可能是個好主意,因為它可以幫助解決頻寬問題。
如果你的網站暫時每天有大約數千訪問者,那麼目前的托管情況大多都能夠處理這個負荷。
有很多方法可以解決與內容傳遞網路(CDNs)相關的圖像搜尋引擎優化問題,但一定要有專業人士幫助你制定你的第一步行動策略。

10. 圖片測試

優化圖片的最大目標就是令網站營業額提升。我們已經討論過縮小文件大小和讓搜尋引擎為您的圖片編制索引,但是應該如何測試才能瞭解哪些內容可以轉化為更多的客戶呢?
測試每個頁面的產品圖片數:由於加載時間是一些非托管電子商務網站的問題,你可能會發現,減少網頁上的圖片數量將增加點擊率和銷售。不過與此同時,每個頁面提供大量圖片也有可能改善用戶體驗並帶來更多銷售,而找到答案的唯一方法就是進行測試。
通過提供客戶想看到的產品視角,可能會幫助提高客戶忠誠度。解決這個問題的一個好方法是進行客戶調查,了解他們觀看產品照片時最喜歡什麼。一般來說,調查和與客戶交談是一個很好的習慣。不過,還是要通過測試來驗證,例如測試一下你在分類頁面上應該有多少產品列表:一次顯示10、20還是100個產品?測試一下你在分類頁面上列出的產品數量,看看哪個數量最適合你的客戶。