10大必備在線圖片處理與優(yōu)化技巧

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

什么是在線圖片處理和優(yōu)化？

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

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

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

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

以下是處理和優(yōu)化網(wǎng)站圖片的方法：

• 用簡單明了的語言描述圖片。
• 仔細(xì)優(yōu)化 alt 屬性。
• 明智選擇圖片尺寸和產(chǎn)品角度。
• 減少圖片文件大小。
• 選擇合適的文件類型。
• 優(yōu)化縮略圖。
• 使用圖片網(wǎng)站地圖。
• 注意裝飾性圖片。
• 使用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)時應(yīng)謹(jǐn)慎。
• 測試圖片。

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

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

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

以這張圖片為例。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 內(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紅色尾部視圖空氣擾流板"

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

關(guān)于提供更大圖片的提醒

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

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

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

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

思考一下：

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

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

那么，你能做什么？

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

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

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

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

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

如何在沒有 Photoshop 的情況下優(yōu)化圖片

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

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

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

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

圖片文件應(yīng)該有多大？

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

5. 選擇合適的文件類型

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

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

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

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

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

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

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

請注意，PNG-24 圖片文件大小是 PNG-8 的三倍多。這就是為什么你需要謹(jǐn)慎使用 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)品而不會占用太多空間。

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

那么，你可以做什么？

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

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

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

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

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

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

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

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

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

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

8. 注意裝飾性圖片

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

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

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

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

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

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

9. 使用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)時應(yīng)謹(jǐn)慎

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

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

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

因此，最佳做法是：

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

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

10. 測試圖片

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

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

保持精美圖片的功能性

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

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

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

原文作者：MARK HAYES