上傳圖片
您可以使用不同類型的圖片，例如公司商標、商品圖片、素材輪播、橫幅和網誌文章圖片。若要改造圖片，不妨嘗試裁剪和調整大小等操作。您也能在佈景主題中自訂多媒體檔案設定，以變更所有多媒體檔案在商店顯示時的邊框或陰影。
若要讓網路商店中的圖片完全照自己的需求顯示，您必須使用正確的圖片寬高比。
在佈景主題編輯器中上傳圖片
您可以在佈景主題編輯器中將圖片新增至佈景主題，也可以從 Shopify 管理介面的「檔案」頁面上傳圖片。若要瞭解詳情，請參閱「將檔案上傳至網站」。
步驟：
- 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
- 在您要自訂的佈景主題旁邊點擊「自訂」。
- 使用下拉式選單選取您要編輯的範本。
- 在佈景主題編輯器側邊欄中，點擊欲新增圖片的區段。
-
點擊選取圖片，然後執行下列其中一項操作：
- 若要從電腦上傳圖片，請點擊「上傳」。
- 若要使用 Burst 中的免費圖庫圖片，請點擊「瀏覽免費圖片」。
按一下圖片以預覽圖片在您佈景主題中如何顯示。在您找到所需圖片之後，請按一下「選擇」。
點擊「儲存」。
使用中繼欄位新增圖片
如果您為圖片設定了中繼欄位，您可以使用動態來源選擇器來新增圖片。若要更多有關中繼欄位和支援圖片格式的資訊，請參閱中繼欄位內容類型和值。
圖片橫幅
您可以建立包含以下元素的圖片橫幅：
- 一或兩張圖片
- 文字
- 動作按鈕
在桌上型電腦中，橫幅圖片會並排顯示。由於此格式並不適合行動裝置使用，因此您可以在圖片橫幅佈景主題設定中選取「在行動裝置上堆疊圖片」選項，藉此堆疊圖片橫幅的相片。如需圖片橫幅和素材輪播的更多資訊，請參閱「素材輪播和圖片橫幅的最佳做法」。
設定佈景主題圖片的焦點
您可以使用焦點來定義網路商店佈景主題圖片最重要的部分。設定圖片焦點時，就是將該區域設為焦點區域。 焦點會一律顯示在框架中，即使佈景主題會裁剪圖片以配合版面配置也是如此。 在佈景主題使用不同寬高比和不同螢幕尺寸時，焦點可讓您加強掌控圖片的顯示方式。
每張圖片只能有一個焦點，但您隨時都可以變更或移除焦點。
下列版本的 Shopify 免費佈景主題可設定焦點：
- Craft 版本 5.0.0 或更新版本
- Crave 版本 5.0.0 或更新版本
- Colorblock 版本 3.0.0 或更新版本
- Dawn 版本 7.0.0 或更新版本
- Refresh 版本 2.0.0 或更新版本
- Ride 版本 3.0.0 或更新版本
- Sense 版本 5.0.0 或更新版本
- Studio 版本 4.0.0 或更新版本
- Taste 版本 4.0.0 或更新版本
若您使用第三方佈景主題，請查看佈景主題說明文件，以確認您的主題是否支援使用焦點。
為圖片新增焦點
您可以在「檔案」區段和佈景主題編輯器中為圖片新增焦點。如果您為圖片新增焦點，然後在多個位置使用該圖片，則所有位置都會使用相同焦點。
您僅能將焦點新增至佈景主題圖片。 您無法為商品、網誌或商品系列圖片新增焦點。
步驟：
- 在佈景主題編輯器中，點擊包含圖片的區段或區塊。
- 點擊圖片上的「編輯」。
- 點擊「新增焦點」。
- 點擊並拖曳藍色圈圈，或點擊圖片最重要的部分以設定焦點。
- 點擊「完成」。
步驟：
- 在佈景主題編輯器中，點選或封鎖有圖片的區段。
- 點選圖片上的「編輯」。
- 點選「新增焦點」。
- 點選圖片最重要的部分以設定焦點。
- 點選「完成」。
步驟：
- 在佈景主題編輯器中，點選或封鎖有圖片的區段。
- 點選圖片上的「編輯」。
- 點選「新增焦點」。
- 點選圖片最重要的部分以設定焦點。
- 點選「完成」。
移除焦點
步驟：
- 在佈景主題編輯器中，點擊包含圖片的區段或區塊。
- 點選圖片上的「編輯」。
- 點擊「移除焦點」。
- 點擊「完成」。
步驟：
- 在佈景主題編輯器中，點選或封鎖有圖片的區段。
- 點選圖片上的「編輯」。
- 點選「移除焦點」。
- 點選「完成」。
步驟：
- 在佈景主題編輯器中，點選或封鎖有圖片的區段。
- 點選圖片上的「編輯」。
- 點選「移除焦點」。
- 點選「完成」。
圖片格式
Shopify 支援下列圖片格式：
- JPEG
- 漸進式 JPEG
- PNG
- GIF
- HEIC
- WebP
使用 JPEG 圖片的時機
JPEG 圖片適合攝影和其他色彩繽紛的靜態圖片。JPEG 格式具有數百萬種顏色的調色板。JPEG 還具有破壞性壓縮功能，有助於保持載入頁面的速度，而不會明顯降低圖片品質。
針對下列圖片類型使用 JPEG 格式：
- 產品
- 橫幅或素材輪播
- 頁面和部落格文章
使用 PNG 圖片的時機
PNG 圖片適合不含漸層的單色圖像和圖示。PNG 格式也可支援透明度。
針對下列圖片類型使用 PNG 格式：
- 商標
- 圖示
- 邊框和飾邊
自動壓縮圖片和選取格式
圖片在網路商店中顯示時，Shopify 會自動壓縮圖片以保持快速載入。壓縮圖片可以減少檔案大小，加快頁面載入的速度。
此外，Shopify 會在傳送圖片時自動決定適用的最佳檔案格式。舉例來說，一旦偵測到顧客的網頁瀏覽器支援 WebP 和 AV1 圖片檔案格式 (AVIF) 等新型圖片格式，Shopify 便會以該種格式傳送您的圖片。
為了透過縮小檔案大小來改善成效，GIF 會自動轉換為動畫 WebP 格式。
上傳限制
上傳到 Shopify 的圖片，在百萬像素和檔案大小方面都有限制 (以 MB 為單位)。百萬像素用於表示有多少百萬像素構成圖片。MB 用於表示圖片使用了多少百萬位元組的記憶體或磁碟空間。
上傳至 Shopify 的圖片不可超過下列任一限制：
- 2500 萬像素
- 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 移除色彩設定檔：
依序按一下「編輯 > 指派設定檔」。
選擇「不要對此文件進行色彩管理」。
按一下「確定」。
使用 Adobe InDesign 移除色彩設定檔
若要使用 Adobe InDesign 移除色彩設定檔：
依序按一下「編輯 > 指派設定檔」。
針對 RGB 設定檔和 CMYK 設定檔，請選擇「捨棄 (使用目前的工作空間)」。
按一下「確定」。
如需詳細資訊，您可以檢視 Adobe 色彩設定檔說明文件。
素材輪播、圖片橫幅和全寬度圖片的最佳做法
許多 Shopify 佈景主題都提供大型圖片或素材輪播，可放大至瀏覽器高度或調整至螢幕尺寸。
如果您使用其中一個佈景主題或擁有大型投影片輪播或背景圖片，那麼瞭解哪種類型的圖片看起來最佳非常重要。
由於大型圖片無法配合所有裝置，因此 Shopify 有時僅會顯示部分圖片，端視您使用的裝置而定。若您的圖片素材輪播包含許多大型圖片，您可能會注意到某些圖片並未顯示。
推薦
為確保您的圖片與佈景主題能配合良好，請留意以下事項：
您用於素材輪播或背景的圖片不應含有文字。如果文字是圖片本身的一部分，那麼它可能會根據您的佈景主題移動、裁剪或調整。使用佈景主題編輯器將文字和連結新增至您的素材輪播內容。
針對您用於素材輪播或作為背景的圖片，請選擇簡單的圖片，以便閱讀疊加在上的文字。
長螢幕上的寬圖片
若查看圖片所使用的裝置螢幕較長 (如手機或平板電腦)，寬圖片的左側和右側可能會遭到裁剪。在下面的範例中，如果人是圖片最重要的部分，您就可以將焦點放在圖片右側：
寬螢幕上的長圖片
若查看圖片所使用的裝置是寬螢幕 (如手機或平板電腦)，長圖片的頂部和底部可能會遭到裁剪。在下面的範例中，如果鞋子是圖片最重要的部分，您就可以將焦點放在圖片底部，以免遭到裁剪：
