圖像優化是電商網站運營中很重要的一部分，可以幫助網站吸引消費者點擊、減少網站加載時間。圖像優化和搜索引擎優化也有關，利用產品圖片、裝飾圖片使得店鋪在亞馬遜和其它電商平臺上排名前列。
你是不是遇到過這些問題：
為什么我的圖片總是不能上谷歌圖片搜索？我需要我是否需要將alt屬性添加到我的圖像？JPEG，GIF和PNG有什么區別？應該什么時候使用哪一種格式？
本文將介紹10個網站圖像的優化方法：
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屬性規則：
（1）和圖片文件名一樣，用通俗的語言描述圖片。
（2）如果產品有型號或序列號，請在alt屬性中標明。
（3）不要在Alt屬性中加入過多關鍵字（比如alt =“福特野馬肌肉車現在購買便宜的最優惠價格”）。
（4）請勿將alt屬性用于裝飾性圖像。這樣可能會因為過度優化而受到搜索引擎的懲罰。
（5）請定期進行健全性檢查。查看你網頁的來源并檢查你的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秒，那就會損失大量潛在消費者。
根據網站不同的內容大小，需要不同的加載時間。文件越大，加載時間就越長。（Shopify平臺會為電商賣家自動壓縮圖片）
如果商家減小圖片文件的大小、提高網頁加載速度，那訪客就會留下來。
減少圖像文件大小的一種方法是在Adobe Photoshop中使用“Save for Web”命令。你可以用Photoshop把圖像盡量調小一點，但是同時也要注意圖片質量。
質量：位于右上角（即70）
文件格式：位于右上角（即JPEG）
優化：位于右上角的復選框（即Optimized）。
顏色：位于右上角此復選框（即轉換為sRBG）。
縮小和銳化：位于底部右側（即W：和H :)。
預期的文件大小：位于左下角（即136.7K）。
你也可以選擇“導出為”。
除了Photoshop以外，還有許多在線工具可以編輯圖片。Adobe還提供Photoshop的免費平板和手機版應用軟件。雖然移動版沒有電腦版Adobe Photoshop功能全，但它涵蓋了圖像編輯的基礎工具，而且是免費的。
以下其他幾款不錯的照片編輯工具：
專家稱PicMonkey是“令人驚嘆的優秀照片編輯工具”。
PIXLR是一款免費的應用軟件，使用體驗很好，可以隨時隨地編輯圖片。
Canva是另一款不錯的在線圖像編輯器。
GIMP有著免費的資源，支持在Windows、Mac或者Linux系統。擁有和Photoshop一樣強大的功能，但反應會有點慢。不過這是免費的圖像編輯應用里最出色的一款了。
電商網站圖片最好不要超過70kb，但對大圖來說有點困難。
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和GIFS之間的很好的選擇。如果你只能用PNG格式，請使用PNG-8，而不是PNG-24。PNG格式照片比較小，所以適合簡單的裝飾圖像。
大多數圖像編輯軟件可以將圖像保存為上述任何文件格式。
6、優化縮略圖
許多電商網站都會使用縮略圖，特別是在類別頁，縮略圖可以幫助快速展示產品。
縮略圖一般會出現在購物的關鍵點，如果它們使你的類別頁面不能快速加載，客戶可能就會因此流失。
盡可能縮小縮略圖文件的大小。這里可能值得質量下滑，以支持更小的文件大小。請記住，縮略圖的累積影響會對你的網頁加載時間產生巨大影響。
改變你的alt屬性文本，以避免重復使用較大版本相同圖像的文本。事實上，讓你的替代文字大不相同。你最不想看到的就是你的縮略圖被索引而不是更大的圖像。你甚至可以完全忽略縮略圖的文本。
7、使用照片網站地圖
如果你的網站正使用Javascript圖庫、圖片彈出窗口或其他“花哨”的方式來改善整體的購物體驗，圖像站點地圖將有助于你的圖像在谷歌上被檢索到。
網頁爬蟲無法抓取在網頁源代碼中沒有被特別指出的圖片。因此，為了讓爬蟲識別到未命名的圖像，就必須在圖像站點地圖中標出位置。
你可以在robots.txt文件中插入以下網站，顯示站點地圖的路徑：
Sitemap：http : //example.com/sitemap_location.xml
或者你也可以使用Search Console 將網站地圖提交給谷歌。
Google有很多發布圖片的指導原則，這可能會幫助網站提高在SERP上的排名。另外，還可以使用谷歌站點地圖（Google sitemap）向谷歌提供更多網站圖片信息，使在谷歌上能搜索到更多的產品照片。
使用站點地圖并不能保證圖片能被在谷歌上被搜索到，但是可以優化圖片搜索。網站管理員工具有很多建議，以保證正確上傳網站地圖。
為所有圖片添加特定標簽也非常重要。你還可以創建一個獨立的站點地圖來專門列出圖像。重要的是在使用特定標簽的同時，將所有必要的信息添加到你擁有或將要創建的站點地圖中。
8、謹慎使用裝飾性圖像
網站通常有各種各樣的裝飾圖片，例如背景圖片，按鈕和邊框。所有與產品無關的東西都可能被視為裝飾形象。
雖然裝飾圖像可以增加網頁的美感，但它們會擴大文件大小、延長加載時間。所以，賣家需要謹慎使用裝飾圖片，以免客戶訪問量降低。
賣家可以檢查網站上所有裝飾圖像的文件大小，或使用最小化文件大小的模板。
以下是一些縮小裝飾圖像文件大小的方法：
構成邊框或簡單圖案的圖片可以用PNG-8或GIF。好看的邊框和圖案只需要幾百字節。
盡可能使用CSS創建彩色區域，而不是使用圖像。盡量用CSS樣式來替換裝飾圖像。
另外，大型壁紙風格的背景圖片，文件可能會很大，盡可能地在不破壞圖像質量的前提下縮小文件。
你可以用來消除背景圖像大小的一種技巧是剪切背景圖像的中間部分，使其成為平坦的顏色，甚至透明。這樣可以大大減少文件大小。
9、謹慎使用內容傳送網絡（CDN）
托管圖像和其他媒體文件可以使用內容傳送網絡（CDN），它們可以提高頁面加載速度并幫助解決帶寬問題。
但CDN的一個缺點就是反向鏈接。反向鏈接對搜索引擎優化至關重要，你擁有的反向鏈接越多，你的網站在搜索引擎中的效果就越好。
通過將圖像放在CDN上，圖像可能會從你的域名中移到CDN的域名中。所以如果有人點擊到網站圖片，他們實際上是被鏈接到CDN的域名上。
別人所謂的好方法不一定適合自己，所以用之前先確認是不是適合公司。
如果網站每個月業務量很大，那就可以選擇CDN，因為它可以解決帶寬問題。
如果網站現在每天只能獲得數千名訪問者，那就不適合CDN了。
10、測試你的圖像
優化圖像的最終目的的提高銷量，最后需要測試什么樣的圖像可以提高銷量。
測試每頁產品圖像的數量：一些自主電商平臺的加載時間很長，因此減少網頁的圖片數量可以降低加載時間，提高點擊量和銷售量。而有的時候更多照片可以給消費者帶來更好的瀏覽體驗，從而提高銷量。相應做測試可以找出最合適的圖片數量。
測試客戶喜歡的角度：通過提供客戶希望看到的視圖，可以增加客戶的忠誠度。可以通過查看產品瀏覽量來確定用戶最喜歡的角度。調查、與客戶交談都是測試的好辦法。
測試類別頁面上有多少產品列表比較合適：測試你在類別頁面上列出的產品數量，以查看放10個、20個還是100個比較合適。
（來源/雨果網）
020-86254345轉801 
