上傳圖片

您可以在網路商店中使用許多不同類型的圖片,包括公司標誌、產品圖片、素材輪播、橫幅和網誌文章圖片。Shopify 的圖片服務會為您管理圖片,確保在網路商店的適當位置顯示最佳圖片格式。

上傳圖片

您可以透過這兩個位置為線上商店上傳圖片:

在「檔案」頁面上傳圖片

您可以從 Shopify 管理介面中的「檔案」頁面上傳圖片。由於您可以在編輯任何佈景主題時存取這些圖片,因此這十分實用。若要深入瞭解,請參閱「將檔案上傳至網站」。

在佈景主題編輯器中上傳圖片

您可以在佈景主題編輯器中將圖片新增至佈景主題。

步驟:

  1. 使用下拉式選單選擇要編輯的範本。
  2. 在佈景主題編輯器側邊欄中,點擊欲新增圖片的區段。
  3. 點擊選取圖片,然後執行下列其中一項操作:

    • 若要從電腦上傳圖片,請點擊「上傳」。
    • 若要使用 Burst 中的免費圖庫圖片,請點擊「瀏覽免費圖片」。
  4. 按一下圖片以預覽圖片在您佈景主題中如何顯示。在您找到所需圖片之後,請按一下「選擇」。

  5. 點擊「儲存」。

使用中繼欄位新增圖片

如果您為圖片設定了中繼欄位,您可以使用動態來源選擇器來新增圖片。若要更多有關中繼欄位和支援圖片格式的資訊,請參閱中繼欄位內容類型和值

圖片橫幅

您可以建立包含以下元素的圖片橫幅:

  • 一或兩張圖片
  • 文字
  • 動作按鈕

在桌上型電腦中,橫幅圖片會並排顯示。由於此格式並不適合行動裝置使用,因此您可以在圖片橫幅佈景主題設定中選取「在行動裝置上堆疊圖片」選項,藉此堆疊圖片橫幅的相片。如需圖片橫幅素材輪播的更多資訊,請參閱「素材輪播和圖片橫幅的最佳做法」。

圖片格式

Shopify 支援下列圖片格式:

  • JPEG
  • 漸進式 JPEG
  • PNG
  • GIF
  • HEIC
  • WebP

使用 JPEG 圖片的時機

JPEG 圖片適合攝影和其他色彩繽紛的靜態圖片。JPEG 格式具有數百萬種顏色的調色板。JPEG 還具有破壞性壓縮功能,有助於保持載入頁面的速度,而不會明顯降低圖片品質。

針對下列圖片類型使用 JPEG 格式:

  • 產品
  • 橫幅或素材輪播
  • 頁面和部落格文章

使用 PNG 圖片的時機

PNG 圖片適合不含漸層的單色圖像和圖示。PNG 格式也可支援透明度。

針對下列圖片類型使用 PNG 格式:

  • 商標
  • 圖示
  • 邊框和飾邊

自動壓縮圖片和選取格式

圖片在網路商店中顯示時,Shopify 會自動壓縮圖片以保持快速載入。壓縮圖片可以減少檔案大小,加快頁面載入的速度。

此外,Shopify 會在傳送圖片時自動決定可用的最佳檔案格式。舉例來說,一旦偵測到買家的網頁瀏覽器支援 WebP 等新型圖片格式,Shopify 便會以該種格式傳送您的圖片。

上傳限制

上傳到 Shopify 的圖片,在百萬像素和檔案大小方面都有限制 (以 MB 為單位)。百萬像素用於表示有多少百萬像素構成圖片。MB 用於表示圖片使用了多少百萬位元組的記憶體或磁碟空間。

上傳至 Shopify 的圖片不可超過下列任一限制:

  • 20 百萬像素
  • 20 MB

若要尋找圖片的百萬像素,您可以使用下列算式:(pixel width x pixel height)/1,000,000。例如解析度為 4900x6930 的圖片,依算式得出為 33.9 百萬像素:(4900x6930)/1,000,000 = 33.9 MP

色彩設定檔

當您在線上商店中檢視圖片時,圖片的顏色可能與您上傳到 Shopify 的原始顏色不同。當圖片包含色彩設定檔時就可能發生此問題,顏色設定檔指的是以 .ICC.ICM 副檔名儲存的一組資料。色彩設定檔通常會嵌入圖片,以協助在不同裝置上標準化色彩顯示的方式。圖片在您的線上商店中顯示時,將會移除色彩設定檔。

移除色彩設定檔的理由如下:

  • 某些裝置無法讀取 .ICC.ICM 色彩設定檔,因此保留設定檔可能會導致各裝置上的圖片色彩不一致。
  • 當上傳的圖片不含色彩設定檔時,Web 瀏覽器會採用 sRGB (用於顯示網上圖片的最常用色彩設定檔)。這可確保您的圖片在所有主要 Web 瀏覽器和裝置上看起來都相同。
  • 色彩設定檔可能占用許多磁碟空間,這會導致載入時間冗長。

移除圖片的色彩設定檔

將圖片上傳至 Shopify 之前,您可以儲存不含色彩設定檔的圖片,將色彩設定檔從圖片移除。此程序會因您的圖片編輯程式而有所不同。

使用 Adobe Illustrator 或 Adobe Photoshop 移除色彩設定檔。

若要使用 Adobe Illustrator 或 Adobe Photoshop 移除色彩設定檔:

  1. 依序按一下「編輯 > 指派設定檔」。

  2. 選擇「不要對此文件進行色彩管理」。

  3. 按一下「確定」。

使用 Adobe InDesign 移除色彩設定檔

若要使用 Adobe InDesign 移除色彩設定檔:

  1. 依序按一下「編輯 > 指派設定檔」。

  2. 針對 RGB 設定檔和 CMYK 設定檔,請選擇「捨棄 (使用目前的工作空間)」。

  3. 按一下「確定」。

如需詳細資訊,您可以檢視 Adobe 色彩設定檔說明文件

素材輪播、圖片橫幅和全寬度圖片的最佳做法

許多 Shopify 佈景主題都提供大型圖片或素材輪播,可放大至瀏覽器高度或調整至螢幕尺寸。

如果您使用其中一個佈景主題或擁有大型投影片輪播或背景圖片,那麼瞭解哪種類型的圖片看起來最佳非常重要。

由於大型圖片無法配合所有裝置,因此 Shopify 有時僅會顯示部分圖片,端視您使用的裝置而定。若您的圖片素材輪播包含許多大型圖片,您可能會注意到某些圖片並未顯示。

推薦

為確保您的圖片與佈景主題能配合良好,請留意以下事項:

  • 某些佈景主題具有圖片位置設定,您可以使用該設定指定圖片的焦點部分。如果您的佈景主題沒有這樣的設定,請確保每張圖片的焦點位於中心。若圖片在某些螢幕上經過裁剪,則焦點可見,而周圍區域則隱藏。

  • 您用於素材輪播或背景的圖片不應含有文字。如果文字是圖片本身的一部分,那麼它可能會根據您的佈景主題移動、裁剪或調整。使用佈景主題編輯器將文字和連結新增至您的素材輪播內容。

  • 針對您用於素材輪播或作為背景的圖片,請選擇簡單的圖片,以便閱讀疊加在上的文字。

長螢幕上的寬圖片

當用於查看圖片的裝置螢幕較長 (如手機或平板電腦) 時,寬圖片的左側和右側可能會遭到裁剪:

長螢幕上的寬圖片

寬螢幕上的長圖片

當用於查看圖片的裝置具有寬螢幕 (如筆記型電腦或桌上型電腦) 時,長圖片的頂部和底部可能會遭到裁剪:

寬螢幕上的長圖片

準備好開始透過 Shopify 銷售商品了嗎?

免費試用