上传图片

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

若要让图片在您的在线商店中完全按您希望的方式显示，您需要使用正确的图片宽高比。系统会通过 Shopify 内容分发网络 (CDN) 自动为您的在线店面优化图片。

在模板编辑器中上传图片

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

步骤：

使用元字段添加图片

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

在图片上设置焦点

您可以使用焦点来定义在线商店中图片的最重要部分。在图片上设置焦点后，该点即成为对焦区域。即使您的模板会裁剪图片以适应布局，焦点也始终会显示在画面中。当模板使用不同的宽高比时，焦点可让您更好地控制图片在不同屏幕尺寸上的显示方式。

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

焦点与 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 及更高版本

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

向图片添加焦点

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

根据模板裁剪和调整图片大小的方式，焦点可能不会始终在视觉上居中。

步骤：

1. 在 Shopify 后台的以下任意位置点击图片：
   • 在内容 > 文件部分。
   • 在模板编辑器中。
   • 在 产品 部分中，您产品页面上的媒体部分。
   • 在 Shopify Messaging 电子邮件编辑器中。
   • 在包含用于添加图片的文件引用类型元字段的任何资源的元字段部分中。
2. 若要选择想设置焦点的图片部分，请点击图片或拖动蓝色圆点。
3. 点击保存。

从图片中删除焦点

步骤：

1. 在 Shopify 后台的以下任意位置点击图片：
   • 在内容 > 文件部分。
   • 在模板编辑器中。
   • 在 产品 部分中，您产品页面上的媒体部分。
   • 在 Shopify Messaging 电子邮件编辑器中。
   • 在包含用于添加图片的文件引用类型元字段的任何资源的元字段部分中。
2. 点击删除。
3. 点击另存为新文件。

图片格式

支持以下图片格式：

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

使用 JPEG 图片

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

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

使用 PNG 图片

PNG 图片非常适合用于具有平色且无渐变的图形和图标。PNG 格式还支持图片中的透明度。对于以下类型的图片，请使用 PNG 格式：

• logo
• 图标
• 边框和装饰

自动图片压缩和格式选择

将图片上传到 Shopify 后台时，系统不会压缩图片，这有助于保持其原始质量。但是，为了让您的客户获得较快的页面加载时间，可能会出现以下情况：

• 当图片通过您的商店模板提供时，系统可能会对高质量图片进行压缩
• Shopify 会自动确定用于传送您的图片的最佳文件格式
• 当客户的 Web 浏览器支持 WebP 和 AVIF（AV1 图片文件格式）等新式图片格式时，您的图片将以这些格式传送
• GIF 会自动转换为动画 WebP 格式，以通过减小文件大小来提高性能

为获得最佳图片质量，请考虑执行以下操作：

• 上传分辨率最高为 5000 像素 x 5000 像素或 2500 万像素的图片
• 对于带透明度的线条图、文本和图标图形，请选择有损压缩较少的图片类型，例如 PNG
• 对产品图片或幻灯片使用 JPEG
• 支持 SVG 文件，但存在限制 - 如果未请求光栅化格式（JPEG、WebP、PNG），则无法对其进行变换（调整大小、裁剪等）

系统接受 PSD (Photoshop Document)、TIFF (Tagged Image File Format) 和 BMP (Bitmap) 等其他文件类型，但这些文件在上传时将被转换为 JPEG/PNG。

图片上传限制

上传到 Shopify 的图片在百万像素 (MP) 和文件大小（以兆字节 (MB) 为单位）方面均有限制。百万像素用于表示构成图片的像素数量（以百万计）。兆字节用于表示图片占用的内存或磁盘空间（以百万字节为单位）。

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

• 2000 万像素
• 20 MB

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

（像素宽度 x 像素高度）/1,000,000

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

图片颜色配置文件

当您在在线商店中查看图片时，图片中显示的颜色可能与您上传到 Shopify 的原始图片的颜色不同。当图片具有颜色配置文件时，可能会发生这种情况，该配置文件是一组存储在扩展名为 .ICC 或 .ICM 的文件中的数据。

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

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

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

从图片中删除颜色配置文件

您可以在将图片上传到 Shopify 之前，通过在保存图片时不包含颜色配置文件来将其删除。此过程因您的图片编辑程序而异。

查看有关如何分配或删除颜色配置文件 (Illustrator, Photoshop) 和分配或删除颜色配置文件 (InDesign) 的 Adobe 文档。

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

许多 Shopify 模板都采用大型图片或幻灯片，这些图片或幻灯片可缩放至浏览器高度或适应您的屏幕尺寸。

如果您使用这些模板之一或有大型幻灯片或背景图片，那么您需要了解哪种类型的图片显示效果最佳。

因为大型图片无法适应所有设备，所以 Shopify 有时会根据您使用的设备仅显示图片的一部分。如果您的图片幻灯片包含许多大型图片，那么您可能会发现图片的某些部分不可见。

有关将图片用于幻灯片或图片横幅的注意事项

为确保您的图片与模板完美搭配，请注意以下几点：

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

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

高屏幕上的宽图片

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

宽屏幕上的高图片

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

图片加载行为

当您访问在线商店上的某个页面时，您可能会注意到图片一开始略显模糊，然后很快变得清晰。这是正常现象，有助于提高您商店的加载速度和用户体验。

Shopify 模板使用一种称为“延迟加载”的技术，即先加载较小版本的图片，同时在后台加载完整分辨率的图片。这样，客户就可以立即查看内容，而无需等待大图完全加载。此过程通常在不到一秒的时间内完成，但会让人感觉您的商店加载速度更快。

对于拥有大量图片的商店，此技术尤其有益，因为它能显著缩短初始页面加载时间，并为客户提供即时视觉反馈。

图片问题故障排除