您可以在您的在線商店中使用許多不同類型的圖片，包括您的公司 logo、產(chǎn)品圖片、幻燈片、橫幅和博客文章圖片。Shopify 可自動(dòng)確保在您的在線商店中使用最佳可用格式顯示圖片，此外，Shopify 還提供通過裁剪和調(diào)整大小操作來(lái)動(dòng)態(tài)轉(zhuǎn)換圖片的功能。

上傳前無(wú)需手動(dòng)壓縮圖片。請(qǐng)始終上傳您可以提供的最佳質(zhì)量的圖片。

您可以在模板編輯器中為模板添加圖片。您還可以在 Shopify 后臺(tái)的文件頁(yè)面中上傳圖片。有關(guān)詳細(xì)信息，請(qǐng)參閱將文件上傳到您的網(wǎng)站。

點(diǎn)擊選擇圖片，然后執(zhí)行以下操作之一：

點(diǎn)擊圖片以在您的模板中查看圖片預(yù)覽。找到您要使用的圖片后，點(diǎn)擊選擇。

點(diǎn)擊保存。

如果您為圖片設(shè)置了元字段，則您可以使用動(dòng)態(tài)源選擇器添加圖片。有關(guān)元字段和支持的圖片格式的更多信息，請(qǐng)參閱元字段內(nèi)容類型和值。

您可以使用以下元素創(chuàng)建圖片橫幅：

在臺(tái)式電腦上，橫幅圖片并排顯示。由于此格式不適合移動(dòng)設(shè)備，因此您可以通過在圖片橫幅模板設(shè)置中選擇在移動(dòng)設(shè)備上堆疊圖片選項(xiàng)來(lái)堆疊圖片橫幅圖片。有關(guān)圖片橫幅和幻燈片的詳細(xì)信息，請(qǐng)參閱適用于幻燈片和圖片橫幅的最佳做法。

您可以使用焦點(diǎn)來(lái)定義在線商店模板中的圖片的最重要部分。您在圖片上設(shè)置焦點(diǎn)后，便會(huì)形成一個(gè)焦點(diǎn)區(qū)域。焦點(diǎn)將始終顯示在圖片框架內(nèi)，即使模板可為了適應(yīng)布局而裁剪圖片也是如此。通過設(shè)置焦點(diǎn)，當(dāng)模板使用不同的縱橫比以及在不同尺寸的屏幕上使用圖片時(shí)，您可以更好地控制圖片的顯示方式。

每張圖片只能有一個(gè)焦點(diǎn)，但您可以隨時(shí)更改或刪除焦點(diǎn)。

以下版本的 Shopify 免費(fèi)模板中提供設(shè)置焦點(diǎn)功能：

如果您使用的是第三方模板，請(qǐng)查看模板的文檔，了解您的模板是否支持使用焦點(diǎn)。

您可以在文件部分和模板編輯器中向圖片添加焦點(diǎn)。如果您在一張圖片上添加焦點(diǎn)并在多個(gè)位置使用該圖片，那么這些圖片都使用相同的焦點(diǎn)。

您只能向模板圖片添加焦點(diǎn)。無(wú)法向產(chǎn)品、博客或產(chǎn)品系列圖片添加焦點(diǎn)。

步驟：

在模板編輯器中，點(diǎn)擊要添加圖片的分區(qū)或塊。 點(diǎn)擊圖片上的編輯。 點(diǎn)擊添加焦點(diǎn)。 點(diǎn)擊并拖動(dòng)藍(lán)色圓圈，或點(diǎn)擊圖片中最重要的部分以設(shè)置焦點(diǎn)。 點(diǎn)擊完成。

若要移動(dòng)焦點(diǎn)，您可以再次打開圖片，然后點(diǎn)擊圖片的其他區(qū)域即可設(shè)置新焦點(diǎn)。

刪除焦點(diǎn)

桌面 / iPhone/ Android 

步驟： 在模板編輯器中，點(diǎn)擊要添加圖片的分區(qū)或塊。 點(diǎn)擊圖片上的編輯。 點(diǎn)擊刪除焦點(diǎn)。 點(diǎn)擊完成。 

備注

焦點(diǎn)可能不會(huì)始終顯示在視覺中心，具體取決于您的模板裁剪圖片以及調(diào)整其大小的方式。

圖片格式

Shopify 支持以下圖片格式：

JPEG 漸進(jìn)式 JPEG 格式 PNG GIF HEIC WebP AVIF

備注

Shopify 會(huì)自動(dòng)檢測(cè)您客戶的瀏覽器支持的圖片格式，然后自動(dòng)以最佳可用格式顯示圖片。您可以通過訪問 https://cdn.shopify.com/ 來(lái)詳細(xì)了解 Shopify 的圖片轉(zhuǎn)換功能

JPEG 圖片非常適合攝影作品和其他色彩復(fù)雜的靜止圖片。JPEG 格式具有包含數(shù)百萬(wàn)種顏色的調(diào)色板。JPEG 還具有有損壓縮功能，這有助于加快頁(yè)面加載速度，而不會(huì)使圖片質(zhì)量明顯降低。

將 JPEG 格式用于以下類型的圖片：

PNG 圖片非常適合用于單色且沒有漸變的圖形和圖標(biāo)。PNG 格式也能夠支持透明度。

將 PNG 格式用于以下類型的圖片：

logo 圖標(biāo) 邊框和裝飾

自動(dòng)圖片壓縮和格式選擇

為了加快加載速度，當(dāng)圖片顯示在您的在線商店上時(shí)，Shopify 會(huì)自動(dòng)壓縮這些圖片。壓縮圖片意味著減小文件大小，從而可以更快地加載頁(yè)面。

此外，Shopify 在交付您的圖片時(shí)會(huì)自動(dòng)確定可使用的最佳文件格式。例如，當(dāng)我們檢測(cè)到客戶 Web 瀏覽器支持 WebP 和 AV1 Image File Format (AVIF) 等新式圖片格式時(shí)，Shopify 便會(huì)以這些格式交付您的圖片。

為了通過減小文件大小來(lái)提高性能，GIF 會(huì)自動(dòng)轉(zhuǎn)換為動(dòng)畫 WebP 格式。

上傳到 Shopify 的圖片在百萬(wàn)像素和文件大?。ㄒ园偃f(wàn)字節(jié)為單位）方面都有限制。百萬(wàn)像素用于表示圖片由幾百萬(wàn)像素構(gòu)成。百萬(wàn)字節(jié)用于表示圖片占用了幾百萬(wàn)字節(jié)的內(nèi)存或磁盤空間。

上傳到 Shopify 的圖片不能超過以下任一限制：

若要查找圖片的百萬(wàn)像素表示形式，您可以使用以下公式：(pixel width x pixel height)/1,000,000。例如，根據(jù)公式 (4900x6930)/1,000,000 = 33.9 MP，分辨率 4900x6930 的圖片為 3390 萬(wàn)像素。

備注

上傳產(chǎn)品圖片的圖片和文件大小限制各不相同。

當(dāng)您查看在線商店中的圖片時(shí)，圖片中的顏色可能與您上傳到 Shopify 的原始圖片中的顏色不同。如果圖片具有顏色配置文件（即存儲(chǔ)在擴(kuò)展名為 .ICC 或 .ICM 的文件中的一組數(shù)據(jù)），則可能會(huì)出現(xiàn)此情況。顏色配置文件通常嵌入在圖片內(nèi)，有助于對(duì)顏色在不同設(shè)備上的顯示方式進(jìn)行標(biāo)準(zhǔn)化統(tǒng)一。當(dāng)圖片顯示在您的在線商店上時(shí)，它們的顏色配置文件將被刪除。

刪除顏色配置文件的原因包括：

并非所有設(shè)備都能讀取 .ICC 或 .ICM 顏色配置文件，因此，使它們保持不變可能會(huì)導(dǎo)致設(shè)備間的圖片顏色不一致。 上傳的圖片不包含顏色配置文件時(shí)，Web 瀏覽器會(huì)采用 sRGB（最常用于在 Web 上顯示圖片的顏色配置文件）。這可以確保您的圖片在所有主要的 Web 瀏覽器和設(shè)備上看起來(lái)都是相同的。 顏色配置文件可能占用大量的磁盤空間，從而導(dǎo)致加載時(shí)間過長(zhǎng)。

刪除圖片的顏色配置文件

在將圖片上傳到 Shopify 之前，您可以通過在沒有顏色配置文件的情況下保存圖片，從而將顏色配置文件從圖片中刪除。此過程因您的圖片編輯程序而異。

使用 Adobe Illustrator 或 Adobe Photoshop 刪除顏色配置文件：

點(diǎn)擊編輯 > Assign Profile（分配配置文件）。

選擇 Don’t Color Manage This Document（不對(duì)此文檔進(jìn)行顏色管理）。

點(diǎn)擊確定。

若要使用 Adobe InDesign 刪除顏色配置文件，請(qǐng)執(zhí)行以下操作：

點(diǎn)擊編輯 > Assign Profile（分配配置文件）。

對(duì)于 RGB 配置文件和 CMYK 配置文件，請(qǐng)選擇 Discard (Use Current Working Space)（放棄(使用當(dāng)前工作空間)）。

點(diǎn)擊確定。

有關(guān)詳細(xì)信息，可以查看關(guān)于顏色配置文件的 Adobe 文檔。

許多 Shopify 模板都包含大型圖片或幻燈片，它們可以擴(kuò)展到瀏覽器的高度或適應(yīng)您的屏幕尺寸。

如果您使用其中一個(gè)模板或擁有尺寸較大的幻燈片或背景圖片，那么了解哪種類型的圖片看上去效果最佳是非常重要的。

由于大圖無(wú)法適應(yīng)所有設(shè)備，因此 Shopify 有時(shí)僅顯示部分圖片，具體取決于您使用的設(shè)備。如果您的圖片幻燈片包含大量大圖，那么您可能會(huì)發(fā)現(xiàn)圖片的某些部分不可見。

為了確保圖片能夠很好地適應(yīng)您的模板，請(qǐng)注意以下事項(xiàng)：

用于幻燈片或背景的圖片中不應(yīng)包含文本。如果文本是圖片本身的一部分，則可能會(huì)根據(jù)您的模板對(duì)它進(jìn)行移動(dòng)、裁剪或調(diào)整。使用模板編輯器添加文本和轉(zhuǎn)至幻燈片的鏈接。

對(duì)于在幻燈片中使用的或作為背景使用的圖片，請(qǐng)選擇簡(jiǎn)單圖片，從而使任何疊加的文本易于閱讀。

當(dāng)用于查看寬圖片的設(shè)備是高屏幕（例如手機(jī)或平板電腦）時(shí)，則可能會(huì)裁剪該圖片的左右兩側(cè)。在下面的示例中，如果人物是圖片最重要的部分，則您可以將焦點(diǎn)放置在圖片右側(cè).

當(dāng)用于查看高圖片的設(shè)備屏幕較寬（如筆記本電腦或臺(tái)式設(shè)備）時(shí)，則可能會(huì)裁剪該圖片的頂部和底部。在下面的示例中，如果鞋子是圖片最重要的部分，則您可以將焦點(diǎn)放置在圖片底部以防止鞋子被裁剪.