Shopify 產品圖片，視頻和3D模型的優化與上傳設置

本篇接着上篇內容 Shopify產品標題，描述以及SEO優化方面的設置， 來完成 Shopify 產品圖片的設置和上傳。Shopify 系統更新之後，原來上傳產品圖片的板塊名稱更名爲“媒體文件” Media，也就意味着這裏不僅僅可以上傳產品圖片了，還可以上傳視頻和3D模型, 產品表現方式更多了，但是最終目標是一致的，就是把流量最終轉化爲訂單。

最近 Shopify 在國內不太穩定，如果打不開 Shopify 官網, 或者打開速度很慢，無法註冊或者登錄 Shopify 賬戶，請使用“魔法”重試，你懂的。

Shopify 推薦的圖片格式 – JPG 或 PNG

Shopify 支持大多數的圖片文件格式，官方推薦的是 PNG，JPEG 和 GIF。其他類型的圖片格式保留 PSD，TIFF，BMP，HEIC，以及 WebP。以上幾種類型的產品圖片，在不同的使用環境中各有優勢，Shopify官方推薦的產品圖片格式如下：

JPG格式的圖片

JPEG/JPG格式的圖片適合用於顯示色彩相對豐富複雜的靜止圖像，例如拍照的照片圖片格式通常爲JPG格式的文件。JPEG/JPG格式的圖片色彩豐富，同時可以在保證圖片質量的前提下保證圖片的顯示效果，就是對圖片的無損壓縮，這樣既保證了圖片的顯示效果，對圖片的無損壓縮減小的文件的大小從而保證了網站的打開速度。如下圖，在文件大小一樣的情況下，jpg的色彩明顯要比gif和png要鮮豔好多。

也因此 Shopify官方以及《10 Must Know Image Optimization Tips》的作者都認爲，Jpg格式的圖片是我們做電商獨立站產品圖片的第一選擇。“The best file type for product images is .jpg” GIF格式的圖片就儘可能不要用了，但是如果確實有必要，你可以製作一些GIF的動圖插入到產品描述中，來提高訂單轉化率，前提條件是一定要控制好GIF圖片的大小，保證網站打開速度有一個良好表現。

因此，JPEG/JPG格式的圖片適用於產品圖片，網站的Banner圖片，輪播圖片，網站頁面和博客文章裏面的圖片。

PNG 格式的圖片

PNG格式的圖片是圖形圖標文件的理想格式，同時也支持透明度功能，因此在網站的裏的Logo圖片，以及社交圖標文件等等圖片應用建議選擇PNG格式的圖片。

WebP 格式的圖片

我們在製作產品圖片時，不需要刻意製作出 WebP格式的文件上傳到 Shopify，Shopify 的 Imagery 服務會根據客戶的瀏覽器所支持的圖片格式，自動以最佳可用格式顯示圖片。

例如，我們用谷歌瀏覽器打開Shopify網站的任意頁面，那麼Shopify會自動將該頁面的所有JPG格式的圖片以“WebP”格式的圖片代替。如果你用不支持“WebP”格式的瀏覽器，如IE瀏覽器訪問同樣的頁面，那麼該頁面所有的圖片還是JPG格式的圖片。之所以Shopify會自動將圖片轉化爲JPG格式或者Webp格式的文件，是因爲這類型的文件在顯色效果和文件大小也就是打開速度方面都可以達到最優化。整個過程都由 Shopify 來完成，我們不需要任何操作。

WebP格式是谷歌開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器寬帶資源和數據空間。它可以減小圖片加載資源的大小、節省用戶流量資源，也可以降低服務器流量資源。因爲是Google自家的服務，所以兼容性還沒有那麼的全面，不過這些都不需要我們擔心，Shopify會依據客戶的瀏覽器環境來自動決定是顯示JPG格式的圖片還是Webp格式的圖片。

我們可以嘗試使用谷歌瀏覽器打開自己的產品頁面，然後下載一張圖片，通常情況下，默認保存的文件格式是 WebP，即使我們上傳的圖片格式是 JPG 或者 PNG。

Shopify 推薦的產品圖片大小，尺寸和比例

• 理想的產品圖片尺寸爲 2048*2048像素
• 理想的圖片大小不超過200KB

也並不是說圖片尺寸就一定要是方形的，如下圖（網站爲 fashionnova）中的產品圖片都是長寬比例一致的長方形的，顯示效果會更好一些，尤其是這種做服飾類的，基本上讓整張圖片正好鋪滿手機屏幕，打開產品鏈接之後，整個屏幕顯示的都是產品圖片，這樣的視覺衝擊效果會好很多。

產品圖片的像素越高顯示也就越清晰。但是通常這也意味着圖片文件也就越大，網站打開速度也就越慢。因此，我們需要在像素和文件大小之前找到一個平衡點。

Shopify 系統對圖片文件的限制

上傳到Shopify網站的圖片在網站的像素尺寸和文件大小方面都有限制，超過以下任意限制在上傳文件的時候會顯示出錯。

• 圖片像素方面的限制爲4472*4472。2000萬像素, (圖片長與寬像素的乘積)
• 文件大小方面的限制爲20M
• 單個產品的產品圖片數量不能超過250張圖片
• Shopify推薦的產品圖片長寬尺寸爲2048*2048像素

我們可能需要使用圖片編輯工具來製作出高質量照片，並針對 Web 對其進行優化和調整大小。較大的圖片可能會導致頁面加載時間變慢。理想的圖片大小不超過 200 KB，越小越好。壓縮圖片時，注意不要過度壓縮，這可能會導致圖片出現斑點。

如何在圖片質量前提下儘可能控制圖片文件大小

你可能有聽說過： 在桌面電腦上，如果一個網站3秒內還沒有打開，很多人就會選擇離開；在移動設備上，這一時間增加到5秒；Amazon的一項數據研究表明，他們的網站打開速度慢1秒，一年的銷售損失大約爲16億美元；Google的排名算法中，網站打開速度也是幫你獲得更高排名的重要因素之一。

因此，如果你的網站打開速度很慢的話，大部分人都會在網頁還未加載完的情況下直接選擇關閉網頁離開，就談不上什麼訂單轉化了。雖然 Shopify 採用了包括 CDN 技術，圖片壓縮技術等等多項網頁加速技術爲網站加速，但是如果你的網站上需要加載很多的大文件，例如很多人會用的動輒 2M 大小的 Banner 圖，以及很大的產品圖片，這些還是會成爲影響網站打開速度的重要因素。

因此建議在保證圖片質量的前提下控制圖片文件的大小。這一類的工具有很多，你可以找找百度圖片無損壓縮工具找找。這裏推薦幾個不錯的壓縮工具，你可以試用一下：

• Tinypng https://tinypng.com/
• Compressor.io https://compressor.io/compress
• Kraken.io https://kraken.io/web-interface
• OptimiZilla https://optimizilla.com/

Shopify 對圖片的自動壓縮和轉換

爲了提高網站的打開速度，減少網站頁面的加載時間，同時將更多的圖片存儲在特定數量的磁盤中，Shopify 會在特定的條件下對滿足特定要求的圖片進行壓縮。圖片壓縮之後可能會導致圖像質量的改變。壓縮之後的圖片的分辨率和你上傳的圖片的分辨率以及圖片尺寸有關係。通常被壓縮之後的圖片的分辨率DPI爲

• JPEG：65-90之間
• PNG：90
• GIF：不會被壓縮

圖片的具體分辨率設置可以使用PS查看與調整（快捷鍵Ctrl+Alt+I）如下圖所示中分辨率“72”就是我們所說的該圖片的DPI值。

對 JPEG 格式的文件來說，Shopify 會依據原圖的分辨率，來決定上傳後的圖片要不要進行壓縮。例如，如果我們上傳的圖片分辨率大於86，圖片的尺寸任意一邊大於等於1024px，那麼Shopify就會對該圖片進行壓縮，並且壓縮之後的圖片分辨率爲85。

如果上傳之前的圖片分辨率在65-85之間，並且圖片尺寸任意一邊大於等於1024px，則Shopify不會對該圖片進入任何處理，Shopify會使用你上傳的圖片的原圖。

原圖分辨率	圖片尺寸	壓縮之後的分辨率
86或者更高分辨率	圖片寬或高大於等於1024px	85
65 – 85	圖片寬或高大於等於1024px	Original quality
64或者更低分辨率	圖片寬或高大於等於1024px	65
76或者更高分辨率	圖片寬和高都小於1024px	75
65 – 75	圖片寬和高都小於1024px	Original quality
64或者更低分辨率	圖片寬和高都小於1024px	65

選擇產品使用的場景圖作爲 Shopify 產品主圖

關於產品圖片如何拍好，因爲所涉及到的內容過於專業，我暫時還沒有能力去說出個123來，所以本篇內容就暫且略過來。不過拍好產品圖片對於我們做好獨立站，提高網站轉化率有着非常積極而且重要的影響，建議大家多去問問谷歌和百度。有句話說的好：做電商賣產品，其實賣的就是圖片。不過我知道的是，做獨立站，不必像做亞馬遜那樣要遵守亞馬遜對產品圖片的要求，首先主圖必然不能使用白底圖片的。而是使用產品的使用場景圖。

舉個極端的例子，如下圖所示，Revolights這款自行車燈，左圖爲產品圖片，右圖爲使用場景圖片，哪張圖片對我們來說更有吸引力？

這裏Shopify的博客上有2篇關於飾品類產品圖片的Tips 和 產品圖片對銷售的影響 的文章，做相關產品的同學可以看看，發佈的時間雖然有點兒久，但是還是很實用的。

爲產品圖片文件正確命名

Creating descriptive, keyword-rich file names. Search engines not only crawl the text on your webpage, but they also search for keywords within your image file names.

通常我們用相機/手機拍完照片之後，將照片導入到電腦裏，照片的文件名會是一串字母數字加文件擴展名。如DCMIMAGE10.jpg。我們將產品圖片上傳到Shopify之前的第一步優化，就是要在電腦上更改圖片的文件名字。例如，改爲： 2012-Ford-Mustang-LX-Red.jpg。

爲什麼？正如上面所說 Search engines not only crawl the text on your webpage, but they also search for keywords within your image file names. 搜索引擎不僅僅會抓取你網頁上的文字，還會抓取你的圖片名稱。如下圖，爲上圖野馬跑車的圖片名稱。如果是默認的DCMIMAGE10.jpg，搜索引擎是無法知道這張圖片上是什麼內容的。如果是2012-Ford-Mustang-LX-Red.jpg，則搜索引擎會將圖片名稱中的這幾個關鍵詞進行索引。

那麼，2012 Red Ford Mustang LX; Ford Mustang LX Red 2012; Red Ford Mustang LX 2012這三個命名哪個更好呢？ 在我看來其實是一樣的，但是文章作者提出來，可以依據網頁分析數據看下訪客們都是使用哪種排序方式的關鍵詞進行搜索的，然後進行圖片重命名重新上傳。精確匹配客戶的搜索，當然更好，但是我覺得，只要能夠準確描述產品圖片，語序具有邏輯性就可以了。

其實不僅僅是Shopify，任何圖片在上傳之前都應該進行這樣的重命名，把這個養成一個習慣。

Tips：圖片命名的時候，單詞之間的空格請使用“-”代替，否則圖片上傳到服務器之後，空格會被%20替換。例如“2012 Ford Mustang LX Red.jpg”就會變成“2012%20Ford%20Mustang%20LX%20Red.jpg”。

另外，如果你要修改的圖片很多，可以嘗試使用文件名批量修改工具進行修改。

填寫 Shopify 產品圖片的 ALT 屬性

ALT是英文單詞Alternate的縮寫，意爲交換、替換。圖片的ALT屬性是圖片一個必需的屬性，它用於在圖像無法顯示或者用戶禁用圖像顯示時，代替圖像顯示在瀏覽器中的內容。假設由於下列原因用戶無法查看圖像，alt 屬性可以爲圖像提供替代的信息：1. 網速太慢; 2. src 屬性中的錯誤; 3. 瀏覽器禁用圖像; 4. 用戶使用的是屏幕閱讀器 (以上內容來源於百度)

上圖，添加圖片的時候定義了該圖片的ALT屬性值爲“上海鮮花港 – 鬱金香”。當用戶打開瀏覽器進行瀏覽時，正常顯示就是鬱金香的圖片了。如果因爲網速問題導致圖片打不開，則上圖位置顯示的內容爲：

此時用戶知道這裏有一張關於鬱金香的圖片，但是圖片具體什麼樣子，就只能自行腦補了。

除了幫助用戶在無法打開圖片的時候理解圖片內容，ALT的另外一個重要作用就是幫助搜索引擎更好的理解圖片的內容了。ALT中的關鍵詞，可以幫搜索引擎理解圖片上的內容，讓你的圖片在搜索引擎，尤其是圖片搜索引擎如Google Image中有個更好的排名。因此我們說圖片的SEO優化，要做的就是給每個產品圖片都加上Alt標籤。

目前產品圖片展示一個流行趨勢就是從不同角度給產品拍一些細節圖。因此在填寫圖片的Alt屬性的時候，也儘可能的爲每一張圖填寫不同的Alt標籤。例如：圖片 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg 使用Alt標籤: alt = ” 2012 Ford Mustang LX Red Leather Interior Trim ” 另外一張圖片 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg 使用Alt標籤: alt = ” 2012 Ford Mustang LX Red Rear View Air Spoiler “

如下圖，點擊已經上傳好的圖片，彈窗中我們可以爲產品圖片添加“替代文本”。在ALT設置過程中，也要和我們在設置Shopify網站的標題和描述的內容時一樣，做好長尾關鍵詞的挖掘和佈局，以獲取到更多更精準的流量。目前 Shopify 系統本身不支持在線批量添加或者編輯 ALT 內容，只能一張一張打開添加或者編輯 ALT，操作起來還是比較麻煩的。我們可以通過表格批量添加 ALT， 或者在應用市場搜索“ALT”尋找合適的插件來批量添加編輯 ALT。

谷歌官方對產品圖片優化的若干建議

以下是來自Google官方對圖片優化，以獲得更好排名的若干建議 （節選了部分我個人覺得比較重要的建議）原文完整版鏈接地址 support.google.com/webmasters/answer/114016

要想提升您的內容在 Google 圖片中的曝光度，請以提供出色的用戶體驗爲原則：在設計網頁時主要考慮用戶，而非搜索引擎。以下是一些建議：

• 提供適當的相關信息：確保您的視覺內容與其所在網頁的主題相關。我們建議您僅在能爲網頁增添原創價值的情況下展示圖片。我們極不贊成在網頁中完全使用非原創的圖片和文字內容。
• 優化放置位置：儘可能將圖片放置在相關文字附近。必要時，也可考慮將最重要的圖片放置在網頁頂部附近。
• 勿將重要文字內嵌在圖片中：避免將文字（特別是網頁標題和菜單項等重要的文字元素）內嵌在圖片中，因爲並非所有用戶都能訪問這類文字（而且網頁翻譯工具不適用於圖片）。爲了儘可能讓更多的人能訪問您的內容，請使用 HTML 格式提供文本，併爲圖片提供替代文本。
• 創建信息豐富的優質網站：對 Google 圖片而言，優質的網頁內容與視覺內容同等重要 – 它可以提供背景信息並更能吸引用戶點擊搜索結果。網頁內容可用於爲圖片生成一段文本摘要，而且 Google 在進行圖片排名時會考慮對應的網頁內容質量。
• 創建適合在各種設備上訪問的網站：比起桌面設備，用戶更多地使用移動設備在 Google 圖片上進行搜索。因此，有必要設計一個適合所有設備類型和尺寸的網站。請使用移動設備適合性測試工具測試您的網頁在移動設備上的運行效果，並獲取反饋以瞭解哪些內容需要修正。
• 爲圖片創建良好的網址結構：Google 會藉助網址路徑以及文件名來理解您的圖片。我們建議您好好組織圖片內容，以使網址結構合乎邏輯。

修改 Shopify 產品頁面主圖

在媒體文件板塊中，顯示的第一張大圖就是該產品的主圖，在非變體產品頁面，首頁，產品列表頁面等等頁面調用並顯示這個產品信息時，默認顯示的圖片就是這張大圖。我們可以通過手動拖動的方式，把我們想要設置爲該產品主圖的圖片拖動到大圖位置來完成主圖的替換。

同時我們還可以在這裏調整圖片的位置，來修改產品頁面前臺各個圖片的顯示順序。

Shopify 上傳產品視頻

上傳視頻到 Shopify 還是嵌入 Youtube / Vimeo 視頻

我們可以通過直接上傳視頻到 Shopify後臺，或者將視頻先上傳到 Youtube 或者 Vimeo 然後以嵌入的方式將視頻再添加到 Shopify 後臺。我做過一個簡單的測試，就是把一個同樣大小的視頻 15MB 左右，分別上傳到 Shopify 和 Youtube，然後在只改變視頻來源的情況下用 Webpagetest 和 PageSpeedInsight 去測試兩個頁面的打開速度，得到的數據結論基本沒有區別。

(兩個頁面的唯一區別是視頻封面不同，視頻封面是系統自動抓取的，我沒有做任何干預。)

雖然我們上傳的視頻有 15MB 大小，但是在客戶打開頁面的時候，視頻內容只會加載視頻縮略圖，而不是加載整個視頻文件，只有當客戶點擊播放按鈕之後，系統纔會開始加載並且播放視頻。如下圖，是 WebPageSpeed 生成的頁面加載瀑布流，整個頁面加載過程中只有視頻縮略圖，沒有我們上傳到 Shopify 後臺或者 Youtube 的視頻。

上傳視頻到 Shopify，該視頻必須滿足以下要求：

• 視頻時長：最長 10 分鐘
• 視頻大小：最大 1 GB
• 視頻分辨率：最高 4K (4096 x 2160 px)
• 視頻文件類型： .mp4 或 .mov

至於視頻清晰度，選擇480P，720P，1080P 或者 4K都是可以的，視頻分辨率越高，文件也就越大，不過客戶在觀看視頻時，如果使用的客戶端支持分辨率調整的話，系統會根據客戶的網速自行決定播放適合的分辨率。例如我們上傳的是1080P視頻，網速慢的客戶自動播放的可能是480P的視頻，網速快的客戶自動播放的則是1080P的視頻。

如果我們把視頻上傳到 Youtube 或者 Vimeo, 則不會有上面的限制，但是我們要上傳的視頻需要遵守 Youtube 或者 Vimeo 的規則。

修改 Shopify 產品視頻縮略圖

和我們修改產品圖片的 ALT 標籤內容一樣，在產品編輯頁面點擊視頻，在彈出的視頻編輯窗口中，點擊右上角下載按鈕右側的選項按鈕，彈出“替換縮略圖”的按鈕，然後我們可以上傳自己製作的視頻縮略圖。注意下，縮略圖同樣要控制下文件的大小，保證圖片清晰度的情況下，儘可能控制在 200KB 以下，越小越好。文件過大會影響到網站頁面的打開速度。

使用 Youtube 還是 Vimeo

通過嵌入的方式插入視頻到 Shopify 產品中的話，目前僅支持 Youtube 或者 Vimeo 的鏈接。這兩者比較起來的話，Youtube 的相關視頻推薦會吸引用戶離開我們的網站，所以 Vimeo 對我們來說體驗會更好一些。

Vimeo 免費版支持的視頻數量有限，播發器樣式的設置也有限，有條件的可以考慮使用付費版。

Shopify 上傳產品 3D 模型

和圖片視頻比較，產品 3D 模型能夠向客戶展示更多的產品信息和細節。Shopify 支持的 3D 模型文件類型爲 GLB 和 USDZ，且文件大小不能超過 500MB。如果 3D 模型文件大於 15 MB，Shopify 會對模型的結構和紋理進行優化，來包裝以更短的時間加載 3D 文件。

下圖是我在網上（sketchfab.com）下載的一個大小爲 5MB 的 GLB 文件。我在 WebPageSpeed 查看頁面加載瀑布流，和視頻一樣，頁面只加載了系統自動生成的一張 3D 模型的縮略圖，所以雖然 GLB 文件很大，其實對網頁的打開速度沒有特別大的影響。只有當客戶點擊模型上的瀏覽按鈕之後，纔會在頁面中下載並且加載這個 5MB 的文件。

除了和視頻一樣我們可以自由替換縮略圖之外，我們還可以通過“編輯文件”按鈕，對 3D 模型的亮度，背景色，默認視角，以及光環境進行調整，功能還是蠻強大的。

3D 模型的製作價格不便宜，但是如果是單品，或者整個網站銷售的產品數量不多時，可以考慮爲主打產品，或者全部產品製作 3D 模型，更全面的展示產品細節和優勢，來提高訂單轉化率。

目前我還沒有用過 3D 模型，感興趣的可以去淘寶，Shopify Experts 市場, 或者 Fiverr （https://www.fiverr.com/Shopify-3D-Modelling）上找服務商報價，看下自己的產品製作 3D 模型的大體費用是多少，如果在預算以內，還是值得投入的。