上传图片

已于 May 30, 2023 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/online-store/images/theme-images。

您可以在您的在线商店中使用许多不同类型的图片，包括您的公司 logo、产品图片、幻灯片、横幅和博客文章图片。Shopify 可自动确保在您的在线商店中使用最佳可用格式显示图片，此外，Shopify 还提供通过裁剪和调整大小操作来动态转换图片的功能。

本页相关主题

上传图片

您可以在两个不同的位置为您的在线商店上传图片：

在文件页面中上传文件

您可以在 Shopify 后台的文件页面中上传图片。这很有用，因为这使您能够在编辑任何模板时访问这些图片。有关详细信息，请参阅将文件上传到您的网站。

在模板编辑器中上传图片

您可以在模板编辑器中为模板添加图片。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 轻触编辑。
  1. 使用下拉菜单选择您要编辑的模板。
  2. 在模板编辑器工具栏中，点击要添加图片的分区或块。

  3. 点击选择图片，然后执行以下操作之一：

    • 若要从计算机上传图片，请点击上传。
    • 若要使用 Burst 中的免费图库图片，请点击导出免费图片。

  4. 点击图片以在您的模板中查看图片预览。找到您要使用的图片后，点击选择。

  5. 点击保存。

使用元字段添加图片

如果您为图片设置了元字段，则您可以使用动态源选择器添加图片。有关元字段和支持的图片格式的更多信息，请参阅元字段内容类型和值。

图片横幅

您可以使用以下元素创建图片横幅：

  • 一张或两张图片
  • 文本
  • 一个操作按钮

在台式电脑上，横幅图片并排显示。由于此格式不适合移动设备，因此您可以通过在图片横幅模板设置中选择在移动设备上堆叠图片选项来堆叠图片横幅图片。有关图片横幅和幻灯片的详细信息，请参阅适用于幻灯片和图片横幅的最佳做法。

在模板图片上设置焦点

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

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

以下版本的 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 或更高版本

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

向图片添加焦点

您可以在文件部分和模板编辑器中向图片添加焦点。如果您在一张图片上添加焦点并在多个位置使用该图片，那么这些图片都使用相同的焦点。

您只能向模板图片添加焦点。无法向产品、博客或产品系列图片添加焦点。

步骤：

  1. 在模板编辑器中，点击要添加图片的分区或块。
  2. 点击图片上的编辑。
  3. 点击添加焦点。
  4. 点击并拖动蓝色圆圈，或点击图片中最重要的部分以设置焦点。
  5. 点击完成。

步骤：

  1. 在模板编辑器中，点击要添加图片的分区或块。
  2. 点击图片上的编辑。
  3. 点击添加焦点。
  4. 点击图片最重要的部分以设置焦点。
  5. 点击完成。

步骤：

  1. 在模板编辑器中，点击要添加图片的分区或块。
  2. 点击图片上的编辑。
  3. 点击添加焦点。
  4. 点击图片最重要的部分以设置焦点。
  5. 点击完成。

删除焦点

步骤：

  1. 在模板编辑器中，点击要添加图片的分区或块。
  2. 点击图片上的编辑。
  3. 点击删除焦点。
  4. 点击完成。

步骤：

  1. 在模板编辑器中，点击要添加图片的分区或块。
  2. 点击图片上的编辑。
  3. 点击删除焦点。
  4. 点击完成。

步骤：

  1. 在模板编辑器中，点击要添加图片的分区或块。
  2. 点击图片上的编辑。
  3. 点击删除焦点。
  4. 点击完成。

图片格式

Shopify 支持以下图片格式：

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

何时使用 JPEG 图片

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

将 JPEG 格式用于以下类型的图片：

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

何时使用 PNG 图片

PNG 图片非常适合用于单色且没有渐变的图形和图标。PNG 格式也能够支持透明度。

将 PNG 格式用于以下类型的图片：

  • logo
  • 图标
  • 边框和装饰

自动图片压缩和格式选择

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

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

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

上传限制

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

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

  • 2000 万像素
  • 20 MB

若要查找图片的百万像素表示形式，您可以使用以下公式：(pixel width x pixel height)/1,000,000。例如，根据公式 (4900x6930)/1,000,000 = 33.9 MP，分辨率 4900x6930 的图片为 3390 万像素。

颜色配置文件

当您查看在线商店中的图片时，图片中的颜色可能与您上传到 Shopify 的原始图片中的颜色不同。如果图片具有颜色配置文件（即存储在扩展名为 .ICC 或 .ICM 的文件中的一组数据），则可能会出现此情况。颜色配置文件通常嵌入在图片内，有助于对颜色在不同设备上的显示方式进行标准化统一。当图片显示在您的在线商店上时，它们的颜色配置文件将被删除。

删除颜色配置文件的原因包括：

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

删除图片的颜色配置文件

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

使用 Adobe Illustrator 或 Adobe Photoshop 删除颜色配置文件

使用 Adobe Illustrator 或 Adobe Photoshop 删除颜色配置文件：

  1. 点击编辑 > Assign Profile（分配配置文件）。

  2. 选择 Don’t Color Manage This Document（不对此文档进行颜色管理）。

  3. 点击确定。

使用 Adobe InDesign 删除颜色配置文件

若要使用 Adobe InDesign 删除颜色配置文件，请执行以下操作：

  1. 点击编辑 > Assign Profile（分配配置文件）。

  2. 对于 RGB 配置文件和 CMYK 配置文件，请选择 Discard (Use Current Working Space)（放弃(使用当前工作空间)）。

  3. 点击确定。

有关详细信息，可以查看关于颜色配置文件的 Adobe 文档。

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

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

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

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

建议

为了确保图片能够很好地适应您的模板，请注意以下事项：

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

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

高屏幕上的宽图片

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

高屏幕上的宽图片

宽屏幕上的高图片

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

宽屏幕上的高图片

准备好开始使用 Shopify 进行销售了吗？

免费试用