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

目錄

• 什么是 SEO 圖片優(yōu)化

• 10 大圖片優(yōu)化技巧

• 在線圖片處理軟件

• 保持精美圖片的功能性

• SEO 圖片優(yōu)化常見問題解答

什么是 SEO 圖片優(yōu)化？

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

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

• 為什么當我在谷歌上搜索圖片時，我的圖片從來不會出現(xiàn)？

• 我需要為圖片添加 alt 屬性嗎？

• JPEG、GIF 和 PNG 之間的區(qū)別是什么？我什么時候應該用其中一種而不是另一種？

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

10 大圖片優(yōu)化技巧

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

2. 仔細優(yōu)化 alt 屬性

3. 明智選擇圖片尺寸和產(chǎn)品角度

4. 縮小圖片文件大小

5. 選擇正確的文件類型

6. 優(yōu)化縮略圖

7. 使用圖片網(wǎng)站地圖

8. 注意裝飾性圖片

9. 使用內(nèi)容分發(fā)網(wǎng)絡（CDN）時應謹慎

10. 測試圖片

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

上傳數(shù)百張產(chǎn)品圖片并保留相機默認命名真的很容易。

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

以下圖為例。

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

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

• 2012 紅色福特野馬 LX

• 福特野馬 LX 紅色 2012

• 紅色福特野馬 LX 2012

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

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

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

2. 仔細優(yōu)化 alt 屬性

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

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

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

圖片優(yōu)化的首要任務是為網(wǎng)站上的每張產(chǎn)品圖片填寫 alt 屬性。

以下是 alt 屬性的一些簡單規(guī)則：

• 用簡單的語言描述你的圖片，就像你為圖片文件命名那樣

• 如果你銷售的產(chǎn)品有型號或序列號，請在 alt 屬性中使用它們

• 不要在 alt 屬性中堆滿關鍵詞（例如，alt=“福特野馬肌肉車馬上購買便宜最優(yōu)價”）

• 不要對裝飾性圖片使用 alt 屬性。搜索引擎可能因為過度優(yōu)化而懲罰你

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

3. 明智選擇圖片尺寸和產(chǎn)品角度

展示產(chǎn)品的多個角度是常見做法?；氐礁Ｌ匾榜R的例子，你不會想只展示汽車的一個鏡頭，尤其是如果你想出售它的話。你最好展示以下鏡頭：

• 內(nèi)飾

• 尾部，尤其是空氣擾流板

• 輪圈

• 發(fā)動機……它畢竟是一輛野馬

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

• 2012-福特-野馬-LX-紅色-真皮-內(nèi)飾-輪圈.jpg -> 使用 alt 屬性：alt="2012 福特野馬LX紅色真皮內(nèi)飾輪圈"

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

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

關于提供更大圖片的提醒

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

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

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

4. 使用PS （Photoshop）縮小圖片文件大小

思考一下：

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

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

那么，你能做什么？

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

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

縮小圖片文件大小的一種方法是使用 Adobe Photoshop 中的“Save for Web（存儲為 Web 所用格式）” 命令進行在線圖片編輯。使用此命令時，你需要將圖片文件調(diào)整到盡可能小，同時注意圖片質(zhì)量。以下是通過 PS 進行在線圖片處理的步驟：

• 質(zhì)量：在右上角找到這個（即 70）。

• 文件格式：在右上角找到這個（即 JPEG）。

• 優(yōu)化：在右上角找到此復選框（即 Optimized）。

• 顏色：在右上角找到此復選框（即 Convert to sRBG）。

• 縮小和銳化：在右下角找到這個（即 W: 和 H:）。

• 預期文件大?。?/strong>在右下角找到這個（即 136.7K）。

你也可以選擇使用“Export As（導出為）”。

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

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

• PicMonkey 被專家形容為“異常優(yōu)秀的圖片編輯工具”。

• PIXLR 是一款針對智能手機的超級用戶友好型 100% 免費應用程序，可以隨時編輯。

• Canva 是另一款相當先進的在線圖片處理軟件。

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

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

5. 選擇正確的文件類型

在網(wǎng)上發(fā)布圖片有三種常用的文件類型：JPEG、GIF 和 PNG。

讓我們看一下這三種文件類型以及它們?nèi)绾斡绊懲粓D片：

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

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

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

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

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

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

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

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

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

• 在電商界的大多數(shù)情況下，JPEG 將是你的最佳選擇。它們以最小的文件大小提供最好的質(zhì)量。

• 大型產(chǎn)品圖片切勿使用 GIF 格式。文件大小會非常大，沒有縮小它的好辦法。僅將 GIF 用于縮略圖和裝飾性圖片。

• PNG 可以很好地替代 JPEG 和 GIF。如果你只能獲得 PNG 格式的產(chǎn)品圖片，盡量使用 PNG-8 而不是 PNG-24。PNG 圖片文件非常小，因此十分適合用作簡單的裝飾性圖片

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

6. 優(yōu)化縮略圖

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

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

那么，你可以做什么？

• 使縮略圖文件盡可能小。為了換取更低的文件大小而降低圖片質(zhì)量可能是值得的。請記住，縮略圖的累積影響將對頁面加載時間產(chǎn)生巨大影響。

• 改變 alt 屬性，避免復制用于同一圖片較大版本的文本。事實上，讓你的 alt 屬性完全不同。你最不希望看到的就是縮略圖取代大圖被索引?？梢酝耆÷?alt 文本。

7. 使用圖片網(wǎng)站地圖

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

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

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

網(wǎng)站地圖：http://example.com/sitemap_location.xml

或使用 Search Console（搜索控制臺）將網(wǎng)站地圖提交給谷歌。

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

使用網(wǎng)站地圖并不能保證你的圖片會被谷歌索引，但這無疑是邁向圖片 SEO 的積極一步。Google Webmaster Tools（谷歌站長工具）有許多關于正確格式化網(wǎng)站地圖的建議。

為所有圖片添加特定標簽是很重要的。你也可以創(chuàng)建一個單獨的網(wǎng)站地圖來專門列出圖片。重要的是在使用特定標簽時，為你已經(jīng)或?qū)?chuàng)建的任何網(wǎng)站地圖添加所有必要信息。在創(chuàng)建帶有圖片信息的網(wǎng)站地圖時，請遵循谷歌建議的這些準則。

8. 注意裝飾性圖片

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

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

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

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

• 對于構(gòu)成邊框或簡單圖案的圖片，使用 PNG-8 或 GIF 格式。你可以創(chuàng)建只有幾百字節(jié)大小的美觀圖片

• 如果可能的話，使用 CSS 而不是圖片來創(chuàng)建彩色區(qū)域。盡可能使用 CSS 來替換任何裝飾性圖片

• 仔細檢查大墻紙風格的背景圖片。這些文件可能很大。在不破壞圖片質(zhì)量的情況下盡可能用圖片縮小工具處理它們

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

9. 使用內(nèi)容分發(fā)網(wǎng)絡（CDN）時應謹慎

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

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

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

因此，最佳做法是：

• 僅僅因為某些東西“很流行”并不意味著你應該盲從。首先確定這對你的企業(yè)來說是否最佳舉措

• 如果你的網(wǎng)站每個月都有大量業(yè)務，那么 CDN 很可能是個好主意，因為它可以幫助解決帶寬問題

• 如果你的網(wǎng)站目前每天只有幾千名訪客，那么你當前的托管方案大概率能夠處理這些負載

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

10. 測試圖片

SEO 圖片優(yōu)化的重點是幫助提高利潤。我們已經(jīng)討論過縮小圖片文件大小，并讓搜索引擎為你的圖片建立索引，但如何測試圖片以了解那些圖片可以轉(zhuǎn)化更多顧客呢？

• 測試每個頁面的產(chǎn)品圖片數(shù)量：由于加載時間對一些非托管電商網(wǎng)站是一個問題，你可能發(fā)現(xiàn)減少頁面圖片數(shù)量將會提高點擊率和銷售額。也有可能每頁提供大量圖片將會改善用戶體驗并帶來更多銷售額。確定這點的唯一方法就是進行測試

• 測試你的顧客喜歡什么角度：通過提供顧客想要看到的視圖，你可能會看到顧客忠誠度有所提高。弄清這點的一個好方法是調(diào)查顧客，了解他們在查看產(chǎn)品圖片時最喜歡什么。一般來說，與顧客進行調(diào)查和交談是一個很好的習慣。不過，還是要通過測試來驗證

• 測試分類頁面上應該有多少個產(chǎn)品列表：10、20、100款產(chǎn)品？測試分類頁面上列出的產(chǎn)品數(shù)量，以了解你的顧客最喜歡哪個數(shù)量

在線圖片處理軟件

現(xiàn)在你已經(jīng)了解了 SEO 圖片優(yōu)化的最佳實踐，讓我們來看一些可用于網(wǎng)站的 SEO 圖片優(yōu)化插件吧。

AVADA SEO: Image Optimizer

AVADA SEO Image Optimizer 是 Shopify 應用商店中最熱門的應用程序之一。它擁有超過 1100 條評論，并保持著 4.9 分（滿分 5 星）的評分。在優(yōu)化商店圖片時它可為你節(jié)省時間精力。只需輕輕一點，就可以通過 AVADA 自動進行 SEO 圖片優(yōu)化。

特色功能包括：

• 為產(chǎn)品頁面、系列頁面和博客文章上的每張圖片自動添加 alt 標簽

• 優(yōu)質(zhì)圖片縮小工具，提高加載速度

• 一鍵優(yōu)化谷歌結(jié)構(gòu)化元數(shù)據(jù)（metadata）

• 用于追蹤指標的 Google Search Console 集成

• 網(wǎng)站地圖生成工具，以便搜索引擎輕松閱讀你的網(wǎng)站

TinyIMG SEO & Image Optimizer

TinyIMG SEO & Image Optimizer 是另一款十分適合 Shopify 店主的在線圖片處理軟件。它可以自動優(yōu)化圖片并上傳至你的 Shopify 商店。你可以隨時恢復為原始圖片，也可以手動優(yōu)化圖片。

TinyIMG 還提供以下功能：

• 圖片縮放

• 能夠修復技術(shù) SEO 和速度問題

• 失效鏈接重定向

• JSON LD

• 實時客服

• 自動圖片優(yōu)化

TinyPNG

TinyPNG 是網(wǎng)上最受歡迎的 SEO 圖片優(yōu)化工具。它使用智能有損壓縮技術(shù)為網(wǎng)頁 (WEBP)、JPEG 和 PNG 圖片縮小圖片文件大小。你可以為應用程序或商店縮小圖片文件大小，還可以縮小動畫圖片。

TinyPNG 的 API 會自己調(diào)整縮略圖片大小，刪除任何不必要的部分并添加更多背景。如果你在 WordPress 上運行網(wǎng)站，也可以將其作為 WordPress 插件使用。

保持精美圖片的功能性

現(xiàn)在，關于電商圖片的問題不會讓你輾轉(zhuǎn)反側(cè)幾個小時。

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

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