為什麼我的圖片一放上Shopify就變模糊？ Shopify處理圖像檔的原理解析

很多人都覺得 Shopify 會修改或大幅壓縮你上傳的圖像檔案。雖然這個講法十分之流行，我們有時亦會跟客戶這樣解釋（溝通上比較省時，哈哈）。但從技術層面來說，這是一個十分常見的誤解。雖然這是錯誤的概念，但是 Shopify 的服務器的而且確有對你上載的圖像檔案進行了一些更改。同時，Shopify 亦確實使用了他們的客製化代碼來調整出各款大小的圖檔。

快速閱讀

• Shopify 是怎樣處理圖像檔案的？
• Shopify 的 CDN
• Shopify 的圖像大小調整技術
• 為什麼Shopify要自動調整我的圖像檔案大小？
• Shopify的圖像壓縮原理
• Shopify的最佳顏色配置設定
• 進一步提升Shopify網店圖片載入速度

Shopify 是怎樣處理圖像檔案的？

要了解你上載的圖檔和 Shopify 如何協同工作，首先你要了解圖像可以具有兩種不同的「尺寸」。

1. 文件大小：即是「文件佔用了多少存儲空間」。這可以是從幾千字節 (KB) 到數百兆字節 (MB) 的任何大小。此大小直接影響通過 Internet 載入圖像所需的時間。（所以，請大家不要再上傳大於1mb的圖檔到你的網店裡。）

2. 圖像尺寸：即是「圖像寬及高的像素數量」。雖然較大尺寸的圖像通常也具有較大的文件大小，但並非總是如此或不成比例。這種類型的圖像大小由數值表示，以像素表示。

Shopify 的 CDN

當你將圖片上傳到 Shopify 時，Shopify 會他們的 CDN 服務器（內容交付網絡）裡面創建同一張圖片的副本。這就是你查看網站代碼的時候，你會看到很多 cdn.shopify.com 的連結的原因了。

例如，我們將 2048 x 2048 像素的產品圖片上傳到 Shopify 商店，Shopify 就會在 https://cdn.shopify.com/s/files/1/1126/ 建立這張圖片的副本 4122/products/sample-image.jpg。圖片的副本可以臨時存儲在 CDN 內，大幅縮短網站的載入時間。

為什麼Shopify要使用 CDN 呢？主要原因是提升網店載入的速度。你的圖像文件會自動分發到世界各地的CDN服務器，然後，在你的顧客查看網站的時候，顧客的設備會尋找物理上最接近他的CDN存取你網站的資料。（是的，你的網站伺服器距離顧客越遠，載入速度就越慢！）

自行設置 CDN 十分複雜。但如果你使用 Shopify，那你就不需要自己設定CDN了，因為你的月費已經包括了Shopify CDN 的維護費用。

以上的圖片就是一個比較簡略的Shopify圖像CDN技術說明。

圖片來源：Image Engine

Shopify 的圖像大小調整技術

Shopify 的 CDN 具有另一個極為實用的功能，便是它可以按版面實際需要，提供各種尺寸和格式的圖像版本，無需你進行任何圖片尺寸的修改。（當然，我們在這裡再說一次，請大家不要將極為大張的圖片上載，載入速度是一定會變慢的）

例如，通過在文件名最後方，添加“_200x200”，Shopify 的服務器就能夠獲取原始圖像檔，並自動將它調整為 200 x 200 像素的正方形大小，無需任何圖像編輯軟件。

例子：https：/ /cdn.shopify.com/s/files/1/1126/4122/products/sample-image_200x200.jpg

為什麼Shopify要自動調整我的圖像檔案大小？

原因：Shopify採用響應式設計，令網站在電腦、手機都能使用。

如果你平日有仔細觀察你Shopify網站的圖片連結，你會看到各種尾數有數字的網址（例如200x、400x等等），這些數字便是用來指示瀏覽器在特定設備的屏幕尺寸載入適當大小的圖像文件。

好像很複雜，所以在這裡我們給出一點例子。

如果代碼檢測到你的用戶設備是高分辨率的大屏幕電腦上，它就會選擇載入 2,000 像素寬的版本，令圖像看起來更好看。

另一方面，如果有人通過手機進入你的Shopify網店，系統就會選擇載入 200 像素寬的圖片版本，配合低分辨率屏幕的顯示。因為在手機這麼小的屏幕載入2,000像素寬的圖片是沒有意思的，顧客根本看不出來，同時又會影響載入速度。

順帶一提，Shopify 的 CDN 會將你的圖檔自動轉換成更高效能的 WebP 格式，令載入速度進一步加快。

Shopify的圖像壓縮原理

當你將圖像上傳到 Shopify 時，Shopify 的服務器會對你的文件執行一些極為輕度的壓縮。這種壓縮大部分是基於圖像文件的原始大小和質量，正常按理論來說，這不是對圖像外觀造成影響的主因。

有一點是值得注意的，你無法控制 Shopify 壓縮圖像的方式。Shopify 壓縮圖像的工作都在 Shopify 服務器上處理。雖然你無法針對自己壓縮圖片的偏好進行重新設定，但這些功能也是包括在月費裡頭的，算是十分划算的功能啊。

Shopify的最佳顏色配置設定

Shopify 最適合使用 RGB 或 sRGB 顏色配置文件，是網頁最常使用的默認設置。 但是，如果你使用專業攝影服務，你就需要與攝影師們確認，以確保他們不會使用特殊的顏色配置文設定（例如 ICM 和 ICC）。因為上傳非標準顏色配置設定文件的圖片很大機會會導致顏色偏移，令圖片看起來十分奇怪，甚至會導致上傳失敗，令你需要花費額外時間重新處理所有圖像。

進一步提升Shopify網店圖片載入速度

在上傳任何圖片之前，大家最好先通過某種優化或壓縮工具，降低圖片檔案大小。你可以透過不同的圖像編輯程式完成這項工作，例如 Photoshop，以及像 TinyPNG 這些免費的在線圖像壓縮工具。另外，你也可以要求你的攝影師幫你把圖片進行壓縮。這樣做，便可以降低圖像載入時間，同時不會降低圖片看起來的質量。