加快電子商務速度的 12 個圖像優化技巧（SEO + 性能）

您想知道為什麼以及如何為您的電子商務網站優化圖像嗎？ 圖像優化的最終目標是在不影響圖像質量的情況下創建最小的文件大小。 您希望在不影響網站性能的情況下顯示高質量的圖像。

研究一致表明，快速的頁面速度將導致在 Google 上的更好位置和更高的轉化率。 因此，您希望您的圖像得到優化，並且對於訪問者來說不會太大。

圖片對於在線商店來說是必不可少的； 您的大部分銷售取決於產品圖片。 客戶在進行任何購買之前總是希望檢查產品的詳細信息（例如顏色或材料）。

你可知道？ 根據 Salsify 的數據，73% 的購物者需要看到至少三張圖片才能做出購買決定。

現在，如果您看下面的示例，您會為下一個夏季派對購買哪種產品？ 答案是A，對吧？

圖片是提高轉化率的必備品，但未經優化的圖片會導致您的電子商務網站速度變慢（將潛在客戶趕出您的商店）。 為避免這些性能問題，我們將分享優化圖像、提高在線商店速度和提高您在 Google 上的排名的最佳技巧。

優化電子商務圖像的 12 個 SEO 和性能提示

這裡有 12 個 SEO 和性能提示，您可以應用這些技巧來優化您的電子商務圖像、加速您的電子商務商店並在 Google 上獲得更好的排名：

1. 正確調整圖像大小
2. 壓縮圖像
3. 選擇正確的文件格式
4. 使用瀏覽器緩存
5. 預加載圖像以更快地顯示它們並提升您的 LCP
6. 使用 Fetchpriority 屬性
7. 包括寬度和高度大小屬性以避免突然的佈局移動 (CLS)
8. 使用圖像 CDN
9. 啟用延遲加載
10. 使用響應式圖像
11. 優化圖像文件名並包含對 SEO 友好的 Alt 文本
12. 創建圖像站點地圖

讓我們深入了解每種圖像優化技術，這些技術將提高您的電子商務網站的 SEO 和性能。

1. 正確調整圖片大小

電子商務圖像的最佳大小是盡量將圖像文件大小保持在 70-80 KB 以下。 實際尺寸取決於您使用的 CMS 或電子零售商。

• WooCommerce 圖片：600 x 600（最小）

• 亞馬遜圖片：1000 x 1000 像素（最小）
• Shopify 圖片：800 x 800 像素（獲得縮放功能的最低要求）

2.壓縮圖像

壓縮圖像意味著在不損失質量的情況下減小圖像大小。 有兩種類型的壓縮：有損與無損。

• 無損 – 文件大小小幅減小而質量沒有變化。
• 有損 – 文件大小更顯著減小，但可能會影響質量。 “有損”壓縮有幾個級別：有些甚至是人眼看不到的，有些則更具侵略性並影響質量。

3. 選擇正確的文件格式

Google PageSpeed Insights 建議使用 WebP 等下一代格式來優化您的圖像。 通過在您的電子商務網站上將圖像提供給 WebP，您將節省圖像文件大小，如下圖所示：

4.使用瀏覽器緩存

最有效的優化方法之一是圖像緩存。 使用 WP Rocket 之類的 WordPress 插件，您可以將圖像文件存儲在用戶的瀏覽器緩存或代理服務器上，以便將來更快、更輕鬆地訪問。

5. 預加載圖像以更快地顯示它們並提升您的 LCP

預加載最大的首屏圖像將增強最大的內容繪畫 (LCP)，這是一個核心 Web Vital。 如何？ 預加載 LCP 圖像可以在頁面加載更早的時候顯示您的英雄圖像或網站橫幅，從而帶來積極的用戶體驗。

顧名思義，預加載允許您優先加載頁面元素。 同樣，WP Rocket 可以幫助您預加載圖像、字體和鏈接：

如果您願意，您還可以在圖像上手動應用此預加載標籤：

 <link rel="preload" as="image" href="https://mysite.com/images/myimagename.webp" />

6. 使用 Fetchpriority 屬性

優化圖像和獲得更好 LCP 的另一個技巧是使用fetchpriority屬性告訴瀏覽器它應該首先獲取哪個圖像。

您的 LCP 圖像應該具有 fetchpriority=”high” 以優先下載它，而頁腳圖像應該具有 fetchpriority=”low” 因為它們不是立即需要的。 谷歌研究了他們自己的格鬥搜索引擎，發現 99% 的首屏內容在不到 2 秒的時間內顯示，這要歸功於優先提示：

7. 包括寬度和高度尺寸屬性以避免突然的佈局移動 (CLS)

如果 PageSpeed Insights 檢測到某些內容突然移動，這將影響用戶體驗和網站的整體速度。 Cumulative Layout Shift (CLS) 是另一個 Core Web Vitals，用於衡量在加載期間是否發生任何突然的佈局變化。 如果您通過為圖片添加高度和寬度屬性來保留圖片空間，Google Page Insights 將為您提供良好的 CLS 等級。

未指定圖像寬度和高度：圖像加載後佈局突然變化 = 錯誤 CLS	指定了寬度和高度：無佈局偏移 = 良好的 CLS

8. 使用圖片 CDN

圖像 CDN（內容交付網絡）是市場上用於圖像優化的最佳工具之一。 根據 web.dev 的說法，它甚至可以節省 40-80% 的圖像文件大小。 ​​從 CDN 加載的所有圖像都將通過圖像 URL 提供，該 URL 不僅指示要加載的圖像，還指示大小、格式和質量等參數。 這對於為不同場景創建圖像變體很方便：

從頭開始設置 CDN 會讓人感到不知所措。 如果你喜歡自動安裝，你可以試試 RocketCDN。

9.啟用延遲加載

延遲加載是優化在線商店圖像的另一種策略。 它旨在將資源識別為非阻塞並僅在需要時加載這些資源。 簡而言之，它僅在您的訪問者滾動到該內容時才加載圖像。

如果您對手動應用延遲加載腳本感到不自在，可以使用 WP Rocket 之類的插件來幫助您。

10. 使用響應式圖片

為移動設備優化圖片是提升用戶體驗和商店加載速度的另一種方式。 響應式圖像是一組用於根據用戶使用的設備加載正確圖像的技術：台式機、平板電腦或移動設備。 它是根據設備分辨率、方向、屏幕大小、頁面佈局和網絡連接計算得出的。

srcset和sizes屬性可以幫助您使您的圖像響應並獲得更好的性能和出色的用戶體驗。 它是這樣工作的：

• srcset = 描述源文件的實際寬度
• size = 告訴瀏覽器圖像應該在屏幕上顯示多寬。

Dev.to 寫了一篇非常詳細的文章，介紹瞭如何將兩者用於響應式圖像。 我們建議您閱讀完整指南。

11.優化圖像文件名並包含對 SEO 友好的替代文本

圖像優化不會停留在文件本身的質量上。 它還擴展為文件的名稱和替代文本。 始終使用清晰的替代文本為您的圖像選擇相關且特定的名稱。 它將通過描述圖片的內容來幫助您的圖片在 Google 上排名。

12. 創建圖片站點地圖

將圖像添加到站點地圖有助於 Google 發現其他方式可能無法找到的圖像（例如使用 JavaScript 加載的圖像）。 它為您的在線商店提供了一點 SEO 提升。 以下是 Google 查找圖片所需的站點地圖標籤：

既然您已經了解了我們加快在線商店速度的最佳優化技巧，那麼有一些工具可以幫助您實施這些技巧。 例如，您可以使用 Imagify 插件，只需單擊幾下即可解決大部分優化點。 讓我們來看看他們中的每一個。

使用 Imagify 優化電子商務圖像

Imagify 插件可以幫助您解決我們在上一節中提出的大多數優化技巧，以加快您的在線商店。 在 WordPress 上安裝免費插件後，您將解鎖多項功能，幫助您加快網站速度並提高在 Google 上的知名度。 讓我們深入了解 Imagify 的最佳功能！

感謝 Imagify，您可以通過以下方式優化圖像：

• 使用三種壓縮級別壓縮和優化您的圖像：正常、激進和超強。 您的圖像質量將幾乎保持不變，但您的文件大小會輕得多。

• 同時壓縮和調整多個圖像的大小：

• 來自 WordPress 庫的優化——您還可以對選定的圖像執行優化，就像我們下面的示例一樣。 Imagify 節省了我 94% 的文件大小！

• 一鍵將您的圖像轉換為 WebP：

• 自動調整最大圖像的大小：

最後但並非最不重要的一點是，Imagify 會優化您的圖像以解決 Google 關於 PageSpeed Insights 的建議，例如“以下一代格式提供圖像”（得益於其 WebP 轉換功能）、“有效編碼圖像”和“適當大小的圖像”。

沒有 Imagify 的 PSI 問題	通過 Imagify 審核

最後，Imagify 的定價很簡單：您每月可獲得 200 MB 的免費數據，如果您需要無限資源，只需 9.99 美元！

包起來

圖片極大地影響了您的產品的感知和銷售。 使用像 Imagify 這樣的插件優化它們將提高您的在線商店性能並提高您的搜索引擎優化 (SEO) 排名。 結果是顯著節省了負載，改善了用戶體驗，並在 Google 上獲得了更好的地位。 免費試用 Imagify，告訴我們您的在線商店的圖像壓縮情況如何！