上传图片

您可以使用不同类型的图片，例如公司 logo、产品图片、幻灯片、横幅和博客文章图片。您还可以通过裁剪和调整大小操作来转换图片，在模板中自定义媒体文件设置，更改商店中显示的所有媒体文件的边框或阴影。

若要在您的在线商店中完全按所需效果显示图片，您需要使用正确的图片纵横比。使用 Shopify 内容分发网络 (CDN) 会自动针对您的店面优化图片。

备注

上传前无需手动压缩图片。请始终上传您可以提供的最佳质量的图片。

在模板编辑器中上传图片

您可以在模板编辑器中为模板添加图片。您还可以在 Shopify 后台的内容 > 文件部分中上传图片。若要了解详情，请参阅上传和管理文件。

步骤：

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 点击要上传图片的模板的自定义。
3. 可选：如果您想在商店主页以外的页面上添加图片，则点击主页下拉菜单，然后选择要编辑的模板。
4. 在模板编辑器侧边栏中，点击要添加图片的分区或块。
5. 在图片字段中，执行以下操作之一：
   • 若要从计算机上传图片，请完成以下步骤：
     1. 点击选择图片 > 添加图片。
     2. 在计算机上查找并打开图片。
     3. 点击完成。

- 若要使用 Burst 中的免费图库图片，请完成以下步骤： 1. 点击浏览免费图片。 2. 找到要使用的图片。 3. 点击选择。

1. 点击保存。

iPhone

1. 在 Shopify 应用中，点击 … 按钮。

2. 在销售渠道部分，点击在线商店。

3. 点击管理所有模板。

4. 轻触要上传图片的模板的自定义。

5. 可选：如果您想在商店主页以外的页面上添加图片，则轻触主页下拉菜单，然后选择要编辑的模板。

6. 轻触分区，然后轻触要添加图片的分区或块。

7. 在图片字段中，执行以下操作之一：

   • 若要从设备上传图片，请完成以下步骤：
     1. 轻触选择图片 > 添加图片。
     2. 在设备上查找并打开图片。
     3. 点击完成。

- 若要使用 Burst 中的免费图库图片，请完成以下步骤： 1. 轻触浏览免费图片。 2. 找到要使用的图片。 3. 点击完成。

1. 点击保存。

Android

1. 在 Shopify 应用中，点击 ☰ 按钮。

2. 在销售渠道部分，点击在线商店。

3. 点击管理所有模板。

4. 轻触要上传图片的模板的自定义。

5. 可选：如果您想在商店主页以外的页面上添加图片，则轻触主页下拉菜单，然后选择要编辑的模板。

6. 轻触分区，然后轻触要添加图片的分区或块。

7. 在图片字段中，执行以下操作之一：

   • 若要从设备上传图片，请完成以下步骤：
     1. 轻触选择图片 > 添加图片。
     2. 在设备上查找并打开图片。
     3. 点击完成。

- 若要使用 Burst 中的免费图库图片，请完成以下步骤： 1. 轻触浏览免费图片。 2. 找到要使用的图片。 3. 点击完成。

1. 点击 ✓。

使用元字段添加图片

如果您为图片设置了元字段，则您可以使用动态源选择器将图片添加到您的在线商店。有关元字段和支持的图片格式的更多信息，请参阅向元字段添加值。

在图片上设置焦点

您可以使用焦点来定义在线商店中的图片的最重要部分。您在图片上设置焦点后，便会形成一个焦点区域。焦点将始终显示在图片框架内，即使模板可为了适应布局而裁剪图片也是如此。通过设置焦点，您可以更好地控制图片在不同屏幕尺寸上以及模板使用不同纵横比时的显示方式。

每张图片只能有一个焦点，但您可以随时更改或删除焦点。

焦点与 Shopify 免费模板的兼容性

您可以在以下版本的 Shopify 免费模板上设置焦点：

• 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 及更高版本

如果您使用第三方模板，请查看模板文档，了解您的模板是否支持使用焦点。

向图片添加焦点

如果您向图片添加焦点，然后在在线商店的多个位置使用该图片，那么无论您在哪里使用图片，都使用相同的焦点。

焦点可能不会始终显示在视觉中心，具体取决于您的模板裁剪图片以及调整其大小的方式。

步骤：

1. 在 Shopify 后台中点击以下任何位置的图片：

   • 在内容 > 文件部分。
   • 在模板编辑器中。
   • 在产品部分的产品清单的媒体文件部分中。
   • 在 Shopify Email 编辑器中。
   • 在具有用于添加图片的文件参考类型元字段的任何资源的元字段部分中。

2. 若要选择要设置焦点的图片部分，请点击图片或拖动蓝色圆点。

3. 点击保存。

备注

若要移动焦点，您可以再次打开图片，然后点击图片的其他区域即可设置新焦点。

从图片中删除焦点

步骤：

1. 在 Shopify 后台中点击以下任何位置的图片：

   • 在内容 > 文件部分。
   • 在模板编辑器中。
   • 在产品部分的产品清单的媒体文件部分中。
   • 在 Shopify Email 编辑器中。
   • 在具有用于添加图片的文件参考类型元字段的任何资源的元字段部分中。

2. 点击删除。

3. 点击另存为新文件。

图片格式

支持以下图片格式：

• JPEG
• 渐进式 JPEG 格式
• PNG
• GIF
• HEIC
• WebP
• AVIF

备注

Shopify 会自动检测您客户的浏览器支持的图片格式，然后自动以最佳可用格式显示图片。详细了解 Shopify 的图片转换功能。

使用 JPEG 图片

JPEG 图片非常适合摄影作品和其他色彩复杂的静止图片。JPEG 格式具有包含数百万种颜色的调色板。JPEG 还具有有损压缩功能，这有助于缩短页面加载时间，而不会使图片质量明显降低。将 JPEG 格式用于以下类型的图片：

• 产品
• 横幅或幻灯片
• 页面和博客文章

使用 PNG 图片

PNG 图片非常适合用于单色且没有渐变的图形和图标。PNG 格式也支持图片透明度。将 PNG 格式用于以下类型的图片：

• logo
• 图标
• 边框和装饰

自动图片压缩和格式选择

为了缩短加载时间，当图片显示在您的在线商店上时，Shopify 会自动压缩这些图片。压缩图片意味着减小文件大小，从而可以更快地加载页面。

此外，Shopify 在交付您的图片时会自动确定可使用的最佳文件格式。例如，当我们检测到客户 Web 浏览器支持 WebP 和 AV1 Image File Format (AVIF) 等新式图片格式时，您的图片会以这些格式交付。

为了通过减小文件大小来提高性能，GIF 会自动转换为动画 WebP 格式。

图片上传限制

上传到 Shopify 的图片在百万像素和文件大小（以百万字节为单位）方面都有限制。百万像素用于表示图片由几百万像素构成。百万字节用于表示图片占用了几百万字节的内存或磁盘空间。

上传到 Shopify 的图片不能超过以下任一限制：

• 2000 万像素
• 20 MB

若要找到图片的百万像素值，您可以使用以下公式：

(pixel width x pixel height)/1,000,000

例如，根据以下公式，分辨率为 4900 x 6930 像素的图片为 3390 万像素： (4900x6930)/1,000,000 = 33.9 MP。

备注

上传产品图片的图片和文件大小限制各不相同。

图片颜色配置文件

当您查看在线商店中的图片时，图片中的颜色可能与您上传到 Shopify 的原始图片中的颜色不同。如果图片具有颜色配置文件（即存储在扩展名为 .ICC 或 .ICM 的文件中的一组数据），则可能会出现此情况。

颜色配置文件通常嵌入图片，以帮助将颜色在不同设备上的显示方式进行标准化。当图片显示在您的在线商店上时，它们的颜色配置文件将被删除。

删除颜色配置文件的原因如下：

• 并非所有设备都能读取 .ICC 或 .ICM 颜色配置文件，因此，使它们保持不变可能会导致设备间的图片颜色不一致。
• 当上传的图片不包含颜色配置文件时，则 Web 浏览器会采用 sRGB（最常用于在 Web 上显示图片的颜色配置文件）。这可以确保您的图片在所有主要的 Web 浏览器和设备上看起来都是相同的。
• 颜色配置文件可能占用大量的磁盘空间，从而导致页面加载时间过长。

删除图片的颜色配置文件

在将图片上传到 Shopify 之前，您可以通过在没有颜色配置文件的情况下保存图片，从而将颜色配置文件从图片中删除。此过程因您的图片编辑程序而异。

查看 Adobe 文档，了解如何分配或删除颜色配置文件（Illustrator、Photoshop）以及分配或删除颜色配置文件 (InDesign)。

适用于幻灯片、图片横幅和全宽图片的最佳做法

许多 Shopify 模板都包含大型图片或幻灯片，它们可以扩展到浏览器的高度或适应您的屏幕尺寸。

如果您使用其中一个模板或拥有尺寸较大的幻灯片或背景图片，则需要了解哪种类型的图片看上去效果最佳。

由于大图无法适应所有设备，因此 Shopify 有时仅显示部分图片，具体取决于您使用的设备。如果您的图片幻灯片包含大量大图，那么您可能会发现图片的某些部分不可见。

在幻灯片或图片横幅中使用图片的注意事项

为了确保图片能够很好地适应您的模板，请记住以下几点：

• 用于幻灯片或背景的图片中不应包含文本。如果文本是图片本身的一部分，则可能会根据您的模板对它进行移动、裁剪或调整。使用模板编辑器在幻灯片和背景上添加文本和链接。

• 对于在幻灯片中使用或作为背景使用的图片，请选择简单图片，从而使任何叠加的文本易于阅读。

高屏幕上的宽图片

当用于查看宽图片的设备是高屏幕（例如在手机或平板电脑上纵向查看）时，则可能会裁剪该图片的左右两侧。在下面的示例中，如果人物是图片最重要的部分，则您可以将焦点放置在图片右侧。

宽屏幕上的高图片

当用于查看高图片的设备屏幕较宽（如笔记本电脑或台式电脑显示器）时，则可能会裁剪该图片的顶部和底部。在下面的示例中，如果鞋子是图片最重要的部分，则您可以将焦点放置在图片底部。