為 Web 優化圖像：實用指南

他們說一張圖片值一千字，這就是圖片在電子商務中如此重要的原因之一。 如果客戶無法拿起、觸摸和檢查產品，他們將嚴重依賴圖像來了解產品的顏色、質量和故事。

所以不用說，您的圖像需要高分辨率和清晰。 但是，這是有代價的。 大型高清圖像可能具有巨大的文件大小。 將其中的一些放在您的網站上，瀏覽您的在線商店的快速體驗最終會讓人感覺更像是在糖蜜中游泳。 這不僅會導致訪問者反彈，而且隨著時間的推移，Google 也會注意到，這會影響您的 SEO。

在電子商務中，當您為網站保存圖像時，在圖像質量和圖像文件大小之間找到良好的平衡至關重要。 我們將在這篇文章中向您展示如何做到這一點。

如果您知道拍攝產品照片並將其直接上傳到您的商店，那麼本教程適合您。 如果您沒有正式的知識或過程來保存文件大小的圖像，本教程適合您。 如果您的網站有大量圖片並且感覺緩慢，那麼本教程適合您。 如果您還沒有開始構建您的在線商店，本教程特別適合您。

準備好優化您的圖像了嗎？

圖像文件類型選項

為了保存針對 Web 優化的圖像，我們需要關註三種主要文件類型：GIF、JPG 和 PNG。 每種文件類型都有自己的優點和缺點，在保存圖像時了解並牢記這些非常重要。

使用 JPG

JPG（也稱為 JPEG）是網絡上最流行的圖像文件類型。 JPG 非常適合包含大量顏色、陰影、漸變或複雜圖案的照片或複雜圖像。 JPG 可以很好地處理這些類型的圖像，因為 JPG 有一個巨大的調色板可供使用。

JPG 也可以保存為高質量、低質量或介於兩者之間的任何位置。 這使您可以根據需要調整和保存圖像，平衡質量和文件大小。

使用 PNG

PNG 是另一種流行的在線文件格式。 在 Adob​​e Photoshop 中，您可以選擇將 PNG 保存為 PNG-8 或 PNG-24。

• PNG-8 的調色板非常有限，只有 256 種顏色。 雖然圖像尺寸較小，但對於復雜的圖像和照片，這不是一個好的選擇。
• PNG-24 提供了更高質量的圖像，但以更大的文件大小為代價。

最重要的是，PNG 可以處理透明度。 這是 PNG 和 JPEG 之間最大的區別點之一。

使用 GIF

許多年前，GIF 更受歡迎，但對於只需要幾種顏色的小圖像尺寸來說，它仍然是一種選擇。 與 PNG-8 非常相似，GIF 文件僅限於 256 色。 因此，永遠不應將 GIF 用於產品照片。

正確保存圖像

正如預期的那樣，加載大圖像需要更長的時間。 當我們說大時，我們指的是文件大小而不是圖像的尺寸，即以 KB、MB、GB 等為單位的值。 47% 的用戶希望網頁在 2 秒內加載，而 40 % 將放棄加載時間超過 3 秒的頁面，重要的是您的圖像足夠小以確保快速的網站。

您可以通過三件事來正確優化在線商店的圖片：

保存正確的尺寸

您必須在 Photoshop 中打開圖像並以 100% 的比例查看它。 這使您可以在將圖像保存到 Web 時以在計算機顯示器上顯示的精確尺寸查看圖像。

為 Web 保存圖像

可以在不顯著降低圖像質量的情況下減小文件大小。 我們最喜歡在不顯著降低圖像質量的情況下減小文件大小的方法是使用 Photoshop 的“Save for Web”功能。 在 Photoshop 中打開您的圖像，然後轉到“文件”>“導出”>“另存為 Web（舊版）...”。 將出現一個窗口，允許您選擇導出質量。 我們發現 60 的質量效果最好，因為它將文件大小降低到 1 兆字節以下，並且質量沒有明顯差異。

壓縮網絡圖像

圖像壓縮應用程序是減小圖像文件大小的最簡單方法。 這些類型的工具會刪除圖像文件中不需要的隱藏數據，例如其他顏色配置文件和元數據（例如照片拍攝地點的地理位置）。 這些工具提供了一種快速簡便的方法來減小文件大小而不會損失任何圖像質量。

圖像壓縮應用程序和服務

• 圖像優化
• 短像素
• 小JPG
• 小PNG
• Compressor.io
• 海妖
• 圖像優化器
• 粉碎圖片（Shopify 應用程序）
• 縮小器（Shopify 應用程序）

為 Web 保存圖像：演練示例

首先，讓我們假設我們是 Stiff Salt（實際上由一位朋友和 Shopify 開發人員所有），並且我們想要更改我們在線商店的特色圖片。

我們設置了一個場景，讓我們的鹽看起來絕對不可思議，然後我們用數碼單反相機拍了一張照片。 太好了，我們有我們的照片。 真漂亮！

但是……文件很大！ 準確地說是 14.6 MB。 照片尺寸為 5184 × 3456 像素。 這現在完全無法使用。 它實際上足以打印電影大小的海報。 此圖片大小為 14.6 MB，需要很長時間才能加載到訪問者的計算機上。 這不好。

是時候開始工作並顯著減小圖像大小和文件大小了。

請記住，我們將對圖像做三件事。

• 縮小圖像尺寸：這是照片的尺寸
• 適當地保存圖像以減小文件大小：這是文件的大小以及它在計算機硬盤驅動器和/或 Web 服務器上佔用的空間
• 壓縮圖像文件：擺脫任何額外的隱藏數據佔用空間

縮小圖像尺寸

根據您決定使用的程序和個人喜好，您可以：

• 保存前縮小圖像尺寸
• 保存圖像時縮小圖像尺寸
• 保存圖像，然後縮小圖像大小

為簡單起見，我們將首先減小圖像大小。 為此，我們將在 Photoshop 中打開圖像（您可以使用任何您覺得最舒服的圖像程序）。

為了確定尺寸，我們查看了主題建議的主頁圖像尺寸。 它是 1600 x 800 像素（記住原來是 5184 × 3456 像素）。

在 Photoshop 中，我們將選擇圖像 > 圖像大小。

好的，我們已將圖像的大小（尺寸）縮小到主題開發人員推薦的更合適的值。

適當地保存圖像（保存為 Web）

在 Photoshop 中，有一個名為“Save For Web”的特定命令，可以優化圖像文件以供在線顯示。 這很重要，因為常規的“保存”命令最終會創建比“保存為 Web”命令大 2-3 倍的文件。

在“Save For Web”框中，我們需要進行一些選擇。

• 圖像類型：文件類型會影響輸出文件的質量和大小
• 圖像質量：這很重要，會嚴重影響最終文件大小
• 尺寸：我們在第一步已經做了這個，所以沒有必要再做一次，但是如果我們在第一步沒有這樣做，我們可以在這裡更改圖像的尺寸

根據我們在本文開頭學到的知識，我們知道 JPEG 是照片或任何具有多種顏色和復雜性的圖像的最佳文件類型。 我們將選擇JPEG。

對於圖像質量，您可以選擇 5 個預設的比例，範圍從最大到低。 我們來看看每個質量級別的最終輸出文件大小（此信息顯示在圖像保存窗口的下角）：

• 最大： 1.38 MB
• 非常高： 611 KB
• 高： 339 KB
• 中： 152 KB
• 低： 86k

您可以看到，每降低一個質量級別，圖像大小就會減少近一半。 一般來說，我們發現高是大多數圖像的最佳設置。 在這個級別，人眼幾乎不可能看到圖像質量有任何下降，而且文件大小比我們只選擇最大值時小近 4 倍。

如果圖像是具有大量細節的極其重要的圖像，您可能需要選擇更高的級別並保存為非常高。

從本質上講，為 Web 保存是一種平衡行為 - 您必須平衡圖形質量和媒體文件大小以滿足您的個人需求。

壓縮網絡圖像

如果您使用 Adob​​e Photoshop，它在縮小圖像尺寸方面已經做得非常出色，但是，您仍然可以使用 ImageOptim 和/或 ShortPixel 等壓縮應用程序將圖像尺寸再縮小 5-10%。

如果您使用其他程序保存圖像效果不如 Photoshop，那麼 ImageOptim 也是快速減小圖像文件大小的最簡單方法。

將上一步中的每個文件放入 ImageOptim，我們能夠進一步將圖像大小再減小 5%。 不是很大，但同樣，這些已經用 Photoshop 進行了優化。 無論如何，每個 KB 都很重要。

結論

回顧一下，我們開始時的照片非常大，但是，通過幾個簡單的步驟，我們將照片尺寸從 5184 × 3456 縮小到 1600 × 800，使其非常適合我們的主頁，同時，它將計算機崩潰的 14.4MB 降至更合理的 336KB。

為網絡適當地保存圖像是儘早學習和認真實施的重要步驟。 即使您只在每張圖片上節省 10-20%，隨著時間的推移，隨著您的商店和網站的發展，每一個小 KB 都可以增加一些顯著的節省，這將為您的訪問者、客戶和客戶帶來更愉快的整體體驗。谷歌。

如何為 Web 優化圖像：視頻演練