如果你經營一家線上商店，在線圖片處理和優化技巧是一門需要掌握的藝術。從吸引消費者瀏覽谷歌圖片，到減少網站加載時間，在線圖片處理和優化技巧是建立一個成功的電商網站的重要組成部分，因為產品照片是線上商店的基石。

什么是在線圖片處理和優化？

圖片優化就是在無需犧牲質量的同時盡量減少圖片文件大小，日常我們提到的使用PS（Adobe Photoshop）進行在線圖片編輯、在線修圖等操作都是圖片處理和優化的途徑。這樣頁面加載時間就可以保持在盡量低的水平。這也涉及圖片 SEO。也就是，讓你的產品圖片和裝飾性圖片在谷歌和其他搜索引擎上獲得排名。

以下問題有沒有讓你頭疼過？

• 為什么當我在谷歌上搜索圖片時，我的圖片從來不會出現？
• 我需要為圖片添加 alt 屬性嗎？
• JPEG、GIF 和 PNG 之間的區別是什么？我什么時候應該用其中一種而不是另一種？

今天你終于有答案了，因為我們將深入探討這些問題。

以下是處理和優化網站圖片的方法：

• 用簡單明了的語言描述圖片。
• 仔細優化 alt 屬性。
• 明智選擇圖片尺寸和產品角度。
• 減少圖片文件大小。
• 選擇合適的文件類型。
• 優化縮略圖。
• 使用圖片網站地圖。
• 注意裝飾性圖片。
• 使用內容分發網絡(CDN)時應謹慎。
• 測試圖片。

1. 用簡單明了的語言描述圖片

上傳數百張產品圖片并保留相機默認命名真的很容易。

當涉及到圖片 SEO 時，重要的是利用相關關鍵詞，幫助你的網站在搜索引擎上獲得排名。創建描述性的、關鍵詞豐富的文件名對于圖片優化至關重要。搜索引擎不僅會抓取網頁上的文本，還會抓取圖片文件名。

以這張圖片為例。

你可以使用相機分配給圖片的默認命名（例如DCMIMAGE10.jpg）。不過，將其命名為 2012-福特-野馬-LX-紅色.jpg 會更好。

想一下顧客是如何在你的網站上搜索產品的。他們在搜索時會使用什么命名模式？在上面的例子中，汽車消費者可能會搜索以下關鍵詞：

• 2012 紅色福特野馬 LX
• 福特野馬 LX 紅色2012
• 紅色福特野馬 LX 2012

查看網站分析數據，了解顧客遵循什么關鍵詞模式。確定他們最常用的命名模式，并將該公式應用于圖片文件命名過程。

如果你不想以數據為導向，請確保在為圖片命名時使用相關的、有幫助的關鍵詞（即盡量具有描述性）。

查看這份來自 Moz 的問答，了解策略性地為網站圖片文件命名的重要性。這肯定可以提升你的站內 SEO，同時也可以幫助你的頁面和圖片在搜索引擎結果頁面（Search Engine Results Page, SERP）上排名更高。

2. 仔細優化 alt 屬性

Alt 屬性是瀏覽器無法正確呈現圖片時的替代文本。它們還被用于網站可訪問性。即使圖片已經呈現了，如果把鼠標懸浮在上面，也會看到 alt 屬性文本（取決于瀏覽器設置）。

Alt 屬性還為網站增加了 SEO 價值。為網站上的圖片添加包含相關關鍵詞的適當 alt 屬性，有助于在搜索引擎中獲得更好的排名。事實上，使用 alt 屬性可能是電商產品出現在谷歌圖片和網站搜索中的最佳方式。

讓我們看一下 alt 屬性的源代碼。

圖片優化的首要任務是為網站上的每張產品圖片填寫 alt 屬性。

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

• 用簡單的語言描述你的圖片，就像你為圖片文件命名那樣。
• 如果你銷售的產品有型號或序列號，請在 alt 屬性中使用它們。
• 不要在 alt 屬性中堆滿關鍵詞（例如，alt=“福特野馬肌肉車馬上購買便宜最優價”）。
• 不要對裝飾性圖片使用 alt 屬性。搜索引擎可能因為過度優化而懲罰你。

最后，經常時不時地做一次完整性檢查。查看網頁訪問來源并檢查 alt 屬性是否填寫正確。當你以創業的速度前進時，你會驚訝于自己遺漏了什么。

3. 明智選擇圖片尺寸和產品角度

展示產品的多個角度是常見做法。回到福特野馬的例子，你不會想只展示汽車的一個鏡頭，尤其是如果你想出售它的話。你最好展示以下鏡頭：

• 內飾。
• 尾部，尤其是空氣擾流板。
• 輪圈。
• 發動機……它畢竟是一輛野馬。

利用這些額外照片最好的方法就是填寫 alt 屬性。實現這點的方式是為每張產品圖片創建獨一無二的 alt 屬性。

• 2012-福特-野馬-LX-紅色-真皮-內飾-輪圈.jpg -> 使用 alt 屬性：alt="2012 福特野馬LX紅色真皮內飾輪圈"
• 2012-福特-野馬-LX-紅色-尾部-視圖-空氣-擾流板.jpg -> 使用 alt 屬性：alt="2012 福特野馬LX紅色尾部視圖空氣擾流板"

此處關鍵是添加描述到基本 alt 屬性，以便潛在的搜索者登錄你的網站。如果你做了額外的工作，谷歌會通過搜索者的搜索給予你回饋。

關于提供更大圖片的提醒

現在你可能希望為訪客提供更大的圖片，這樣可以帶來更好的用戶體驗，但需謹慎。

不論你做什么，不要把最大的圖片放在網頁上并只是通過源代碼縮小尺寸。這樣會因為與圖片關聯的較大文件大小而增加頁面加載時間。

相反，將其設置為較小的圖片，并提供在彈出窗口或單獨的頁面上查看更大圖片的選項。提示：了解如何在主題中使用  jQuery image zoom 使產品圖片可縮放。

4. 使用PS （Photoshop）進行圖片編輯來減少圖片文件大小

思考一下：

• 將近50%的消費者不會花3秒鐘等待電商網站加載。
• ……而且，在全球范圍內，平均頁面加載時間實際上在增加。
• 亞馬遜發現，如果他們的網頁慢一秒，他們每年就會損失16億美元。
• 谷歌在其算法中使用頁面加載時間作為排名因素。

所以，如果你的圖片在屏幕上緩慢“流出來”，并且需要15秒才能加載？那你可以跟那個潛在顧客吻別了！

那么，你能做什么？

當顧客到達你的網站時，可能需要一點時間才能加載所有內容，這取決于你的文件大小。文件越大，網頁加載時間越長。（注意：如果你是一名 Shopify 商家，我們將自動壓縮圖片，因此這對你來說應該不是問題。）

如果你能減小網頁上的圖片文件大小并提高頁面加載速度，離開頁面的訪客人數將會減少。

減小圖片文件大小的一種方法是使用 Adobe Photoshop 中的“Save for Web” 命令進行在線圖片編輯。使用此命令時，你需要將圖片文件調整到盡可能小，同時注意圖片質量。以下是通過PS進行在線圖片處理的步驟：

• 質量：在右上角找到這個（即70）。
• 文件格式：在右上角找到這個（即 JPEG）。
• 優化：在右上角找到此復選框（即 Optimized）。
• 顏色：在右上角找到此復選框（即 Convert to sRBG）。
• 縮小和銳化：在右下角找到這個（即 W: 和 H:）。
• 預期文件大小：在右下角找到這個（即136.7K）。

你也可以選擇使用“Export As”。

如何在沒有 Photoshop 的情況下優化圖片

如果你沒有 Adobe Photoshop，有很多其他的在線工具可以用來編輯圖片。Adobe 甚至有一款針對智能手機和平板電腦的免費圖片編輯應用程序 Photoshop Express。這款工具沒有桌面版 Adobe Photoshop 的所有功能，但它涵蓋了圖片編輯的所有基礎功能，而且不需要花一大筆錢。

其他出色的圖片編輯工具有：

• PicMonkey 被專家形容為“異常優秀的圖片編輯工具”。
• PIXLR 是一款針對智能手機的超級用戶友好型100%免費應用程序，可以隨時編輯。
• Canva 是另一款相當先進的在線圖片編輯器。

最后，還有 GIMP。GIMP 是一款開源、免費的圖片編輯軟件應用程序，可以在 Windows、Mac 或 Linux 上運行。它可以完成 Photoshop 能做的一切，但是有一點笨拙。但作為一款免費的圖片編輯應用，它是無可匹敵的。

圖片文件應該有多大？

對于電商圖片，一個很好的經驗法則是盡量將圖片大小保持在70 kb以下。這有時會很困難，尤其是對于較大的圖片。

5. 選擇合適的文件類型

在網上發布圖片有三種常用的文件類型：JPEG、GIF 和 PNG。

讓我們看一下這三種文件類型以及它們如何影響同一圖片：

JPEG（或.jpg）圖片是一種舊文件類型。JPEG 已成為互聯網事實上的標準圖片。JPEG 圖片可以被極大地壓縮，從而產生小文件大小的高質量圖片。在上圖中，JPEG 格式可以在較小的文件大小下具備良好的質量。

GIF（.gif）圖片質量低于 JPEG 圖片，用于更簡單的圖片，如圖標和裝飾性圖片。我相信你知道，GIF 也支持動畫效果。

在圖片優化方面，GIF 十分適合網頁上普通、簡單的圖片（僅包含幾種顏色）。但對于復雜的圖片和照片，GIF 并不總是那么吸引人。對于大圖片來說尤其如此。

我們可以在上面的 MacBook 圖片中使用 GIF，因為照片夠小，所以 GIF 效果很好。

作為 GIF 圖片的替代品，PNG 圖片越來越受歡迎。PNG 比 GIF 支持更多顏色，并且它們不會像 JPEG 那樣隨著時間的推移因為重新保存而降低質量。盡管 PNG 文件類型被越來越多地采用，其文件大小仍然比 JPEG 圖片大得多。

請注意，PNG-24 圖片文件大小是 PNG-8 的三倍多。這就是為什么你需要謹慎使用 PNG。

以下是一個極端的例子，三種文件類型的圖片大小都保持在24 kb不變：

如你所見，JPEG 顯然是贏家。GIF 和 PNG 必須降低質量以保持一樣小的文件大小。

以下是選擇文件類型時要記住的一些技巧：

• 在電商界的大多數情況下，JPEG 將是你的最佳選擇。它們以最小的文件大小提供最好的質量。
• 大型產品圖片切勿使用 GIF 格式。文件大小會非常大，沒有好辦法來縮小它。僅將 GIF 用于縮略圖和裝飾性圖片。
• PNG 可以很好地替代 JPEG 和 GIF。如果你只能獲得 PNG 格式的產品圖片，盡量使用 PNG-8 而不是 PNG-24。PNG 圖片文件非常小，因此十分適合用作簡單的裝飾性圖片。

大部分圖片編輯軟件可以將圖片保存為上述任何一種圖片文件格式。

6. 優化縮略圖

很多電商網站會使用縮略圖，特別是在分類頁面上。它們可以快速展示產品而不會占用太多空間。

縮略圖很棒，但要當心；它們可能是沉默的殺手。受害者是誰？頁面加載速度。縮略圖通常會出現在購物過程中的關鍵時刻。如果它們妨礙分類頁面快速加載，你可能會失去潛在顧客。（注：Shopify 商家不必擔心縮略圖優化，因為我們會為你處理。）

那么，你可以做什么？

• 使縮略圖文件盡可能小。為了換取更低的文件大小而降低圖片質量可能是值得的。請記住，縮略圖的累積影響將對頁面加載時間產生巨大影響。
• 改變 alt 屬性，避免復制用于同一圖片較大版本的文本。事實上，讓你的 alt 屬性完全不同。你最不希望看到的就是縮略圖取代大圖被索引。可以完全省略 alt 文本。

7. 使用圖片網站地圖

如果你的網站使用 Javascript 圖庫、圖片彈窗或其他“浮夸”的方式來提升整體購物體驗，圖片網站地圖將有助于你的圖片引起谷歌關注。

網頁爬蟲無法網頁源代碼中沒有指定調用的圖片。因此，為了讓爬蟲器知道未識別的圖片，你必須在圖片網站地圖中列出它們的位置。

你可以在 robots.txt 文件中插入以下行，顯示網站地圖的路徑：

網站地圖：http://example.com/sitemap_location.xml

或使用搜索控制臺將網站地圖提交給谷歌。

谷歌有很多圖片發布準則，可以幫助你的網站在 SERP 上排名更高。此外，你可以使用谷歌網站地圖向谷歌提供更多關于你網站上圖片的信息，相比讓谷歌自己查找，這樣有助于谷歌找到更多你的圖片。

使用網站地圖并不能保證你的圖片會被谷歌索引，但這無疑是邁向圖片 SEO 的積極一步。谷歌網站管理員工具有許多關于正確格式化網站地圖的建議。

為所有圖片添加特定標簽是很重要的。你也可以創建一個單獨的網站地圖來專門列出圖片。重要的是在使用特定標簽時，為你已經或將會創建的任何網站地圖添加所有必要信息。在創建帶有圖片信息的網站地圖時，請遵循谷歌建議的這些準則。

8. 注意裝飾性圖片

網站通常有各種各樣的裝飾性圖片，比如背景圖、按鈕和邊框。任何與產品無關的東西都可能被視為裝飾性圖片。

雖然裝飾性圖片可以為網頁添加很多美感，但它們可能導致合并文件較大和加載時間緩慢。因此，你可能需要考慮仔細檢查你的裝飾性圖片，以防它們影響你的網站將訪客轉化為顧客的能力。

你需要檢查網站上所有裝飾性圖片的文件大小，并使用最小化文件大小的模板。

以下是一些減小裝飾性圖片文件大小的技巧：

• 對于構成邊框或簡單圖案的圖片，使用 PNG-8 或 GIF 格式。你可以創建只有幾百字節大小的美觀圖片。
• 如果可能的話，使用 CSS 而不是圖片來創建彩色區域。盡可能使用 CSS 來替換任何裝飾性圖片。
• 仔細檢查大墻紙風格的背景圖片。這些文件可能很大。在不破壞圖片質量的情況下盡可能縮小它們。

減小背景圖片大小的一個技巧是裁剪背景圖的中間部分，并設置成純色甚至是透明色。這樣可以大大減小文件大小。

9. 使用內容分發網絡(CDN)時應謹慎

Shopify 商家其實不必擔心這點，因為我們是托管解決方案，但其他平臺商家應該密切關注。內容分發網絡（CDN）托管圖片和其他媒體文件的理想之地。它們可以提高頁面加載速度，幫助解決帶寬問題。

一個缺點是涉及反向鏈接。你可能知道，反向鏈接對 SEO 很重要，你擁有的反向鏈接越多，你的網站在搜索引擎中表現越好。

通過將圖片放置在 CDN 上，你很可能將圖片從你的域中刪除并將其放置在 CDN 的域中。因此當某人鏈接至你的圖片時，他們實際上是鏈接到 CDN 域。

因此，最佳做法是：

• 僅僅因為某些東西“很流行”并不意味著你應該盲從。首先確定這對你的企業來說是否最佳舉措。
• 如果你的網站每個月都有大量業務，那么 CDN 很可能是個好主意，因為它可以幫助解決帶寬問題。
• 如果你的網站目前每天只有幾千名訪客，那么你當前的托管方案大概率能夠處理這些負載。

有很多方法可以解決與 CDN 相關的圖片 SEO 問題，但首先要確保有專業人士幫助你制定策略。

10. 測試圖片

優化圖片的重點是幫助提高利潤。我們已經討論過減小文件大小，并讓搜索引擎為你的圖片建立索引，但如何測試圖片以了解那些圖片可以轉化更多顧客呢？

• 測試每個頁面的產品圖片數量：由于加載時間對一些非托管電商網站是一個問題，你可能發現減少頁面圖片數量將會提高點擊率和銷售額。也有可能每頁提供大量圖片將會改善用戶體驗并帶來更多銷售額。確定這點的唯一方法就是測試它。
• 測試你的顧客喜歡什么角度：通過提供顧客想要看到的視圖，你可能會看到顧客忠誠度提高。弄清這點的一個好方法是調查顧客，了解他們在查看產品圖片時最喜歡什么。一般來說，與顧客進行調查和交談是一個很好的習慣。不過，還是要通過測試來驗證。
• 測試分類頁面上應該有多少個產品列表：10、20、100款產品？測試分類頁面上列出的產品數量，以了解你的顧客最喜歡哪個數量。

保持精美圖片的功能性

現在，關于你電商圖片的問題不會讓你輾轉反側幾個小時。

你知道一些讓產品圖片出現在谷歌圖片搜索結果里的圖片 SEO 策略。你知道如何充分利用 alt 屬性。你知道文件類型的區別以及何時選擇每種選項。

但是，圖片處理和優化是復雜的，我們只觸及皮毛，剩下的還需要在實踐中獲得真知。

原文作者：MARK HAYES