上傳圖片

您可以在線上商店中使用許多不同類型的圖片,包括公司商標、產品圖片、投影片輪播、橫幅和部落格貼文圖片。取決於您要使用圖片的方式和位置,我們建議您以特定大小或格式上傳圖片。

上傳圖片

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

在「檔案」頁面上傳圖片

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

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

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

步驟:

  1. 找到要編輯的佈景主題,然後按一下「自訂」

  2. 在佈景主題編輯器工具列中,按一下要新增圖片的區段。選擇包括圖片選擇器的區段:

    顯示圖片選擇器的佈景主題工具列區段。包括一個標明「選擇圖片」的按鈕,以及標明「探索免費圖片」的連結。

  3. 按一下「選擇圖片」來新增圖片。如要從電腦上傳圖片,請按一下「上傳」。如要使用 Burst 中的免費圖庫圖片,請按一下「免費圖片」。

  4. 按一下「儲存」

圖片格式

Shopify 支援下列圖片格式:

  • JPEG 或 JPG
  • 漸進式 JPEG
  • PNG
  • GIF

如果您上傳的圖片不是支援的格式,則 Shopify 會將其轉換為 JPEG 或 PNG。大多數圖片格式都會轉換為 JPEG。

使用 JPEG 圖片的時機

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

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

  • 產品
  • 橫幅或投影片輪播
  • 頁面和部落格貼文。

使用 PNG 圖片的時機

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

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

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

壓縮率

圖片在線上商店中顯示時,Shopify 會壓縮圖片以保持快速載入。壓縮圖片代表減少檔案大小,以加快頁面載入的速度。運用壓縮功能即可在磁碟機或記憶體空間中儲存更多圖片。此外,存取圖片所需的時間也能大幅減少。根據您圖片的格式、大小和原始品質而定,壓縮可能導致圖片品質變更。

Shopify 的圖片等級在壓縮後如下:

  • JPEG:介於 65 - 90
  • PNG:90
  • GIF:品質不會改變

針對 JPEG 圖片,壓縮圖片的品質等級取決於原始 JPEG 圖片的品質及輸出尺寸:

原始品質 輸出尺寸 輸出品質
86 或以上 高度或寬度為 1024 像素或以上 85
65 - 85 高度或寬度為 1024 像素或以上 原始品質
64 或以下 高度或寬度為 1024 像素或以上 65
76 或以上 高度和寬度均小於 1024 像素 75
65 - 75 高度和寬度均小於 1024 像素 原始品質
64 或以下 高度和寬度均小於 1024 像素 65

上傳限制

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

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

  • 20 百萬像素
  • 20 MB

色彩設定檔

當您在線上商店中檢視圖片時,圖片的顏色可能與您上傳到 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 佈景主題都具備可根據您瀏覽器高度 (BoundlessBrooklyn) 或者會隨您的螢幕尺寸調整 (Venture) 的大型圖片或投影片輪播。

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

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

推薦

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

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

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

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

長螢幕上的寬圖片

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

長螢幕上的寬圖片

寬螢幕上的長圖片

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

寬螢幕上的長圖片

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

免費試用