上傳圖片
您可以使用各種類型的圖片，例如公司標誌、產品圖片、素材輪播、橫幅和網誌文章圖片。您也可以透過裁切與調整尺寸來處理圖片，並可 customize your media settings in your theme，以變更商店中所有多媒體的邊框或陰影。
若要讓圖片在您的網路商店依照預期呈現，請使用正確的 image aspect ratio。系統會透過 Shopify Content Delivery Network (CDN) 自動為您的線上店面最佳化圖片。
本頁內容
在佈景主題編輯器中上傳圖片
您可以在佈景主題編輯器中將圖片新增到佈景主題。您也可以在 Shopify 管理介面的 內容 > Files 區段上傳圖片。若要瞭解更多資訊，請參閱 Uploading and managing files。
步驟：
電腦版
在 Shopify 管理介面中，前往 網路商店 > Themes。
在要上傳圖片的佈景主題上，按一下 編輯佈景主題。
選用：如果您要在首頁以外的商店頁面新增圖片，請按一下 首頁 下拉式選單，然後選取您要編輯的範本。
在佈景主題編輯器的側邊欄中，按一下您要新增圖片的 section or block。
在 圖片 欄位中，請執行下列其中一項操作：
- 若要從電腦上傳圖片，請完成以下步驟：
- 按一下 選取圖片 > 新增圖片。
- 在電腦中找到並開啟該圖片。
- 按一下 完成。
- 若要使用來自 Burst，請完成以下步驟：
- 按一下 瀏覽免費圖片。
- 找到您想使用的圖片。
- 按一下 選取。
- 若要從電腦上傳圖片，請完成以下步驟：
按一下 儲存。
行動裝置
在 Shopify app 中，點選
圖示。在 銷售管道 區段中，點選 網路商店。
點選 管理所有佈景主題。
在您要上傳圖片的佈景主題上，點選 編輯佈景主題。
選用：如果您要將圖片新增到商店的首頁以外頁面，請點選 首頁 下拉式選單，然後選取您要編輯的範本。
點選 區段，然後點選您要新增圖片的 section or block。
在 圖片 欄位中，請執行下列其中一項操作：
- 若要從裝置上傳圖片，請完成下列步驟：
- 點選 選取圖片 > 新增圖片。
- 在您的裝置上找到並開啟該圖片。
- 點選 完成。
- 若要使用來自 Burst，請完成以下步驟：
- 點選 瀏覽免費圖片。
- 找到您想使用的圖片。
- 點選 完成。
- 若要從裝置上傳圖片，請完成下列步驟：
點選 儲存 或 ✓。
使用中繼欄位新增圖片
如果您已為圖片設定 metafields，就可以使用 dynamic source picker 將圖片新增到您的網路商店。若要瞭解中繼欄位與支援的圖片格式，請參閱 Adding values to metafields。
設定圖片焦點
您可以使用焦點來定義網路商店圖片中最重要的部分。當您在圖片上設定焦點時，該區域會成為視覺重點。即使您的佈景主題會裁切圖片以符合版面配置，焦點也會始終顯示在畫面內。設定焦點可讓您更能掌握圖片在不同螢幕尺寸，以及佈景主題使用不同 aspect ratios 時的顯示方式。
每張圖片只能有一個焦點，但您可以隨時變更或移除焦點。
焦點與 Shopify 免費佈景主題的相容性
您可以在以下版本的 Shopify 免費佈景主題上設定焦點：
- 所有 Horizon 系列佈景主題
- Colorblock 版本 3.0.0 以上
- Craft 版本 5.0.0 以上
- Crave 版本 5.0.0 以上
- Dawn 版本 7.0.0 以上
- Origin 版本 1.0.0 以上
- Publisher 版本 1.0.0 以上
- Refresh 版本 2.0.0 以上
- Ride 版本 3.0.0 以上
- Rise 版本 1.0.0 以上
- Sense 版本 5.0.0 以上
- Spotlight 版本 0.0.1 以上
- Studio 版本 4.0.0 以上
- Taste 版本 4.0.0 以上
- Trade 版本 1.0.0 以上
如果您使用第三方佈景主題，請檢視您的 theme's documentation，瞭解是否支援焦點功能。
為圖片新增焦點
如果您為圖片新增焦點，之後在網路商店的多個位置使用該圖片，無論在何處使用，都會套用相同的焦點。
視您的佈景主題裁切與調整圖片大小的方式而定，焦點未必總是位於視覺中心。
步驟：
- 在 Shopify 管理後台的下列位置，按一下圖片：
- 在 內容 > Files 區段中。
- 在 theme editor 中。
- 在 Products 區段中，於您的產品資訊內的 媒體 區段。
- 在 Shopify Messaging 電子郵件編輯器中。
- 在任何具備用於新增圖片的 檔案參照 類型中繼欄位的資源之 中繼欄位 區段中。
- 若要選取您要設定焦點的圖片區域，請按一下圖片，或拖曳藍色圓點。
- 按一下 儲存。
移除圖片的焦點
步驟：
- 在 Shopify 管理後台的下列位置，按一下圖片：
- 在 內容 > Files 區段中。
- 在 theme editor 中。
- 在 Products 區段中，於您的產品資訊內的 媒體 區段。
- 在 Shopify Messaging 電子郵件編輯器中。
- 在任何具備用於新增圖片的 檔案參照 類型中繼欄位的資源之 中繼欄位 區段中。
- 按一下 移除。
- 按一下 另存為新檔。
圖片格式
支援下列圖片格式：
- JPEG
- 漸進式 JPEG
- PNG
- GIF
- HEIC
- WebP
使用 JPEG 圖片
JPEG 圖片非常適合相片與其他色彩複雜的靜態圖片。JPEG 格式支援數百萬種色彩。JPEG 也採用有損壓縮，可在不明顯降低圖片品質的情況下，協助縮短頁面載入時間。請將 JPEG 格式用於下列類型的圖片：
- 商品
- 橫幅或素材輪播
- 頁面與網誌文章
使用 PNG 圖片
PNG 圖片最適合使用於色塊分明、無漸層的圖形與圖示。PNG 格式也支援透明背景。以下類型的圖片建議使用 PNG 格式：
- 標誌
- 圖示
- 邊框與裝飾
自動圖片壓縮與格式選用
將圖片上傳至 Shopify 管理介面時，系統不會壓縮圖片，以維持原始畫質。不過，為了讓顧客的頁面載入更快，可能會出現以下情況：
- 透過商店佈景主題提供圖片時，系統可能會對高畫質圖片進行壓縮
- Shopify 會在傳送圖片時，自動判斷最適合的檔案格式
- 當顧客的網頁瀏覽器支援 WebP 與 AVIF (AV1 Image File Format) 等新式圖片格式時，系統會以這些格式傳送您的圖片
- 為了減少檔案大小並提升效能，系統會自動將 GIF 轉換為動畫 WebP 格式
若要獲得最佳圖片品質，請參考下列建議：
- 上傳較高解析度的圖片，最高可達 5000 px × 5000 px 或 25 百萬像素
- 線條圖、文字，以及具透明背景的圖示式圖形，請選擇壓縮失真較低的圖片格式，例如 PNG
- 商品圖片或素材輪播請使用 JPEG
- 支援 SVG 檔案，但有其限制：若不要求點陣化格式 (JPEG、WebP、PNG)，就無法對其進行變換 (調整大小、裁切等)
其他檔案類型，例如 PSD (Photoshop Document)、TIFF (Tagged Image File Format) 與 BMP (Bitmap)，可以上傳，但在上傳時會轉換為 JPEG/PNG。
圖片上傳限制
上傳至 Shopify 的圖片，會受到百萬像素 (MP) 與檔案大小 (以 MB 計) 兩方面的限制。百萬像素用來表示圖片由多少百萬個像素組成；MB 則表示圖片占用多少百萬位元組的記憶體或磁碟空間。
上傳至 Shopify 的圖片不可超過以下任一限制：
- 20 百萬像素
- 20 MB
要計算圖片的百萬像素值，可使用下列公式：
(pixel width x pixel height)/1,000,000
例如，解析度為 4900 px × 6930 px 的圖片，依上述公式為 33.9 百萬像素：(4900x6930)/1,000,000 = 33.9 MP。
圖片色彩描述檔
當您在網路商店檢視圖片時，顏色可能與您上傳至 Shopify 的原始圖片不同。這可能是因為圖片包含色彩描述檔，色彩描述檔是一組資料，儲存在副檔名為 .ICC 或 .ICM 的檔案中。
色彩描述檔經常會內嵌在圖片中，以協助在不同裝置上標準化顏色的顯示方式。圖片顯示於您的網路商店時，系統會移除其色彩描述檔。
移除色彩描述檔的原因如下：
- 並非所有裝置都能讀取
.ICC或.ICM色彩描述檔，保留它們可能導致不同裝置之間的圖片顏色不一致。 - 當上傳的圖片未包含色彩描述檔時，網頁瀏覽器會假設採用
sRGB(網頁上最常用的圖片顯示色彩描述檔)。如此可確保您的圖片在各大網頁瀏覽器與裝置上的顯示一致。 - 色彩描述檔可能占用大量磁碟空間，導致頁面載入時間變長。
移除圖片的色彩描述檔
您可以在上傳至 Shopify 前，將圖片另存為不含色彩描述檔的版本，以移除該描述檔。實際操作方式視您使用的圖片編輯程式而定。
請參閱 Adobe 說明文件，瞭解如何 Assign or remove a color profile (Illustrator, Photoshop) 與 Assign or remove a color profile (InDesign)。
素材輪播、圖片橫幅與全寬圖片的最佳做法
許多 Shopify 佈景主題提供大型圖片或素材輪播，會隨瀏覽器視窗高度縮放，或配合您的螢幕尺寸自動調整。
若您使用這類佈景主題，或有大型素材輪播或背景圖片，請先瞭解哪些圖片類型的顯示效果最佳。
由於大型圖片無法在所有裝置上完整顯示，Shopify 可能會依您使用的裝置，只顯示圖片的一部分。若您的素材輪播包含許多大型圖片，您可能會發現圖片的部分區域無法顯示。
用於素材輪播或圖片橫幅的圖片注意事項
為確保圖片與佈景主題搭配良好，請留意以下重點：
用於素材輪播或背景的圖片，建議不要含有文字。若文字是圖片本身的一部分，佈景主題可能會移動、裁切或調整該文字。請使用 theme editor 為素材輪播與背景加入文字與連結。
用於素材輪播或背景的圖片，請選擇畫面簡潔的圖片，讓覆蓋其上的文字更容易閱讀。
直向螢幕上的寬圖片
當使用直向螢幕 (例如手機或以直向顯示的平板) 檢視時，寬圖片的左右兩側可能會被裁切。以下範例中，若人物是圖片中最重要的部分，您可以將 focal point 放在圖片的右側。
寬螢幕上的長圖片
當使用寬螢幕 (例如筆電或桌機螢幕) 檢視時，長圖片的上下可能會被裁切。以下範例中，若鞋子是圖片中最重要的部分，您可以將 focal point 放在圖片的下方。
圖片載入行為
當您造訪您的網路商店的頁面時，可能會先看到圖片略為模糊，片刻後才會變得清晰。這是為了提升商店載入速度與用戶體驗的正常現象。
Shopify 佈景主題使用名為「延遲載入」的技術，會先載入圖片的較小版本，同時在背景載入完整解析度的圖片。如此一來，顧客可以立即查看內容，無需等待大型圖片完全載入。此過程通常在 1 秒內完成，但會讓人感覺您的商店載入更快。
此技術對圖片較多的商店特別有利，能顯著縮短初始頁面載入時間，並立即為顧客提供視覺回饋。
圖片問題疑難排解
變更檔案格式時，圖片未更新
當您嘗試以不同檔案格式的新圖片取代現有圖片時，新圖片可能無法如預期顯示。例如，若您將 JPEG 圖片換成 PNG 或 GIF，圖片可能無法呈現預期的透明背景或動畫效果。
以下位置更新圖片時，可能會發生此情況：
- 商品系列圖片
- 網誌文章主要圖片
- 電子郵件通知中的禮品卡圖片
您可以依下列步驟確認檔案格式：
- 在 Shopify 管理介面中，前往上傳該圖片的頁面。
- 在圖片上按一下滑鼠右鍵。
- 按一下在新分頁中開啟圖片。
- 查看網址，確認副檔名，例如
.png、.jpeg或.gif。
如果您需要變更圖片的檔案格式，請依下列步驟操作：
- 在 Shopify 管理介面中，前往您要更新圖片的頁面。
- 在圖片旁按一下編輯，然後按一下移除。
- 按一下儲存。
- 重新整理頁面。
- 將新圖片以您想要的檔案格式上傳。
- 按一下儲存。