如果你經營一家在線商店，在線圖片處理和優化技巧是一門需要掌握的藝術。從吸引消費者瀏覽谷歌圖片，到減少網站加載時間，SEO 圖片優化和處理技巧是建立一個成功的電商網站的重要組成部分，因為產品照片是在線商店的基石。
目錄
什么是 SEO 圖片優化
10 大圖片優化技巧
在線圖片處理軟件
保持精美圖片的功能性
SEO 圖片優化常見問題解答
什么是 SEO 圖片優化？
圖片優化就是在無需犧牲質量的同時盡量縮小圖片文件大小，日常我們提到的使用 PS（Adobe Photoshop）進行在線圖片編輯、在線修圖等操作都是圖片處理和優化的途徑。這樣頁面加載時間就可以保持在盡量低的水平。這也涉及 SEO 圖片優化。也就是，讓你的產品圖片和裝飾性圖片在谷歌和其他搜索引擎上獲得排名。
以下問題有沒有讓你頭疼過？
為什么當我在谷歌上搜索圖片時，我的圖片從來不會出現？
我需要為圖片添加 alt 屬性嗎？
JPEG、GIF 和 PNG 之間的區別是什么？我什么時候應該用其中一種而不是另一種？
今天你終于有答案了，因為我們將深入探討這些問題。
10 大圖片優化技巧
用簡單明了的語言描述圖片
仔細優化 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（存儲為 Web 所用格式）” 命令進行在線圖片編輯。使用此命令時，你需要將圖片文件調整到盡可能小，同時注意圖片質量。以下是通過 PS 進行在線圖片處理的步驟：
質量：在右上角找到這個（即 70）。
文件格式：在右上角找到這個（即 JPEG）。
優化：在右上角找到此復選框（即 Optimized）。
顏色：在右上角找到此復選框（即 Convert to sRBG）。
縮小和銳化：在右下角找到這個（即 W: 和 H:）。
預期文件大小：在右下角找到這個（即 136.7K）。
你也可以選擇使用“Export As（導出為）”。
如果你沒有 Adobe Photoshop，有很多其他的在線圖片處理軟件可以用來編輯圖片。Adobe 甚至有一款適用于智能手機和平板電腦的免費圖片編輯應用程序 Photoshop Express。這款工具沒有桌面版 Adobe Photoshop 的所有功能，但它涵蓋了圖片編輯的所有基礎功能，而且不需要花一大筆錢。
其他出色的圖片編輯工具有：
最后，還有 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
或使用 Search Console（搜索控制臺）將網站地圖提交給谷歌。
谷歌有很多圖片發布準則，可以幫助你的網站在 SERP 上排名更高。此外，你可以使用谷歌網站地圖向谷歌提供更多關于你網站上圖片的信息，相比讓谷歌自己查找，這樣有助于谷歌找到更多你的圖片。
使用網站地圖并不能保證你的圖片會被谷歌索引，但這無疑是邁向圖片 SEO 的積極一步。Google Webmaster Tools（谷歌站長工具）有許多關于正確格式化網站地圖的建議。
為所有圖片添加特定標簽是很重要的。你也可以創建一個單獨的網站地圖來專門列出圖片。重要的是在使用特定標簽時，為你已經或將會創建的任何網站地圖添加所有必要信息。在創建帶有圖片信息的網站地圖時，請遵循谷歌建議的這些準則。
8. 注意裝飾性圖片
網站通常有各種各樣的裝飾性圖片，比如背景圖、按鈕和邊框。任何與產品無關的東西都可能被視為裝飾性圖片。
雖然裝飾性圖片可以為網頁添加很多美感，但它們可能導致合并文件較大和加載時間緩慢。因此，你可能需要考慮仔細檢查你的裝飾性圖片，以防它們影響你的網站將訪客轉化為顧客的能力。
你需要檢查網站上所有裝飾性圖片的文件大小，并使用最小化文件大小的模板。
以下是一些縮小裝飾性圖片文件大小的技巧：
對于構成邊框或簡單圖案的圖片，使用 PNG-8 或 GIF 格式。你可以創建只有幾百字節大小的美觀圖片
如果可能的話，使用 CSS 而不是圖片來創建彩色區域。盡可能使用 CSS 來替換任何裝飾性圖片
仔細檢查大墻紙風格的背景圖片。這些文件可能很大。在不破壞圖片質量的情況下盡可能用圖片縮小工具處理它們
縮小背景圖片大小的一個技巧是裁剪背景圖的中間部分，并設置成純色甚至是透明色。這樣可以大大縮小文件大小。
9. 使用內容分發網絡（CDN）時應謹慎
Shopify 商家其實不必擔心這點，因為我們是托管解決方案，但其他平臺商家應該密切關注。內容分發網絡（CDN）是托管圖片和其他媒體文件的理想之地。它們可以提高頁面加載速度，幫助解決帶寬問題。
一個缺點是涉及反向鏈接。你可能知道，反向鏈接對 SEO 很重要，你擁有的反向鏈接越多，你的網站在搜索引擎中表現越好。
通過將圖片放置在 CDN 上，你很可能將圖片從你的域中刪除并將其放置在 CDN 的域中。因此當某人鏈接至你的圖片時，他們實際上是鏈接到 CDN 域。
因此，最佳做法是：
僅僅因為某些東西“很流行”并不意味著你應該盲從。首先確定這對你的企業來說是否最佳舉措
如果你的網站每個月都有大量業務，那么 CDN 很可能是個好主意，因為它可以幫助解決帶寬問題
如果你的網站目前每天只有幾千名訪客，那么你當前的托管方案大概率能夠處理這些負載
有很多方法可以解決與 CDN 相關的圖片 SEO 問題，但首先要確保有專業人士幫助你制定策略。
10. 測試圖片
SEO 圖片優化的重點是幫助提高利潤。我們已經討論過縮小圖片文件大小，并讓搜索引擎為你的圖片建立索引，但如何測試圖片以了解那些圖片可以轉化更多顧客呢？
測試每個頁面的產品圖片數量：由于加載時間對一些非托管電商網站是一個問題，你可能發現減少頁面圖片數量將會提高點擊率和銷售額。也有可能每頁提供大量圖片將會改善用戶體驗并帶來更多銷售額。確定這點的唯一方法就是進行測試
測試你的顧客喜歡什么角度：通過提供顧客想要看到的視圖，你可能會看到顧客忠誠度有所提高。弄清這點的一個好方法是調查顧客，了解他們在查看產品圖片時最喜歡什么。一般來說，與顧客進行調查和交談是一個很好的習慣。不過，還是要通過測試來驗證
測試分類頁面上應該有多少個產品列表：10、20、100款產品？測試分類頁面上列出的產品數量，以了解你的顧客最喜歡哪個數量
在線圖片處理軟件
現在你已經了解了 SEO 圖片優化的最佳實踐，讓我們來看一些可用于網站的 SEO 圖片優化插件吧。
AVADA SEO: Image Optimizer
AVADA SEO Image Optimizer 是 Shopify 應用商店中最熱門的應用程序之一。它擁有超過 1100 條評論，并保持著 4.9 分（滿分 5 星）的評分。在優化商店圖片時它可為你節省時間精力。只需輕輕一點，就可以通過 AVADA 自動進行 SEO 圖片優化。
特色功能包括：
優質圖片縮小工具，提高加載速度
一鍵優化谷歌結構化元數據（metadata）
用于追蹤指標的 Google Search Console 集成
網站地圖生成工具，以便搜索引擎輕松閱讀你的網站
TinyIMG SEO & Image Optimizer
TinyIMG SEO & Image Optimizer 是另一款十分適合 Shopify 店主的在線圖片處理軟件。它可以自動優化圖片并上傳至你的 Shopify 商店。你可以隨時恢復為原始圖片，也可以手動優化圖片。
TinyIMG 還提供以下功能：
圖片縮放
能夠修復技術 SEO 和速度問題
失效鏈接重定向
JSON LD
自動圖片優化
TinyPNG
TinyPNG 是網上最受歡迎的 SEO 圖片優化工具。它使用智能有損壓縮技術為網頁 (WEBP)、JPEG 和 PNG 圖片縮小圖片文件大小。你可以為應用程序或商店縮小圖片文件大小，還可以縮小動畫圖片。
TinyPNG 的 API 會自己調整縮略圖片大小，刪除任何不必要的部分并添加更多背景。如果你在 WordPress 上運行網站，也可以將其作為 WordPress 插件使用。
保持精美圖片的功能性
現在，關于電商圖片的問題不會讓你輾轉反側幾個小時。
你知道一些讓產品圖片出現在谷歌圖片搜索結果里的圖片 SEO 策略。你知道如何充分利用 alt 屬性。你知道文件類型的區別以及何時選擇每種選項。
但是，圖片處理和優化是復雜的，我們只觸及皮毛，剩下的還需要在實踐中獲得真知。
文章為作者獨立觀點，不代表DLZ123立場。如有侵權,請聯系我們。( 版權為作者所有，如需轉載，請聯系作者 )
網站運營至今，離不開小伙伴們的支持。 為了給小伙伴們提供一個互相交流的平臺和資源的對接，特地開通了獨立站交流群。
群里有不少運營大神，不時會分享一些運營技巧，更有一些資源收藏愛好者不時分享一些優質的學習資料。
現在可以掃碼進群，備注【加群】。 ( 群完全免費，不廣告不賣課！)
