上传图片

您可以在在线商店中使用许多不同类型的图像,包括公司标志、产品图像、幻灯片、横幅和博客文章图像。欧宝体育官网入口首页Shopify提供了通过裁剪和调整大小操作动态转换图像的能力,此外还可以自动确保在在线商店上提供图像时使用最佳的图像格式。欧宝体育官网入口首页

上传图片

你可以在两个不同的地方为你的在线商店上传图片:欧宝体育官网入口首页

在文件页面上传图片

上上传图片文件你的Shopify管理页面。这很有用,因为您可以在编辑任何主题时访问这些图像。要了解更多信息,请参见上传文件到你的网站

在主题编辑器中上传图像

您可以在主题编辑器中向主题添加图像。

步骤:

  1. 使用下拉菜单选择要编辑的模板。
  2. 从主题编辑器侧栏中,单击要向其中添加图像的部分或块。
  3. 点击选择图像,然后执行以下其中一项:
    • 若要从计算机上传图像,请单击上传
    • 使用免费的库存图片破裂,点击探索免费图片
  4. 单击图像以查看主题中图像的预览。找到要使用的图像后,单击选择
  5. 点击保存

使用元字段添加图像

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

图像的旗帜

您可以使用以下元素创建图像横幅:

  • 一到两张图片
  • 文本
  • 动作按钮

在台式电脑上,横幅图像是并排显示的。因为这种格式不适合移动设备,您可以通过选择移动设备上的图像堆栈选项中的图像的旗帜主题设置.欲知更多有关图像的旗帜而且幻灯片,请参阅幻灯片和图像横幅的最佳实践

在主题图像上设置焦点

您可以使用焦点来定义在线商店主题上图像中最重要的部分。欧宝体育官网入口首页当你在图像上设置焦点时,你使它成为焦点区域。焦点总是出现在框架中,即使你有一个主题裁剪你的图像以适应布局。当主题使用不同的纵横比和不同的屏幕尺寸时,焦点可以让你更好地控制图像的显示方式。

每张图像只能有一个焦点,但可以随时更改或删除它。

设置焦点可在以下版本的免费Shopify主题:

如果您使用的是第三方主题,那么请检查主题的文档,看看您的主题是否支持使用焦点。

为图像添加焦点

您可以将焦点添加到您的文件节,并从您的主题编辑器。如果您在图像上添加一个焦点,然后在多个地方使用该图像,那么它们都使用相同的焦点。

您只能为主题图像添加焦点。你不能给产品、博客或收藏图片添加焦点。

移除焦点

图像格式

Shopify支持以下图像格式:

  • JPEG
  • 进步的JPEG
  • PNG
  • GIF
  • HEIC
  • WebP
  • AVIF

何时使用JPEG图像

JPEG图像是摄影和其他具有复杂颜色的静态图像的理想选择。JPEG格式有一个有数百万种颜色的调色板。JPEG还具有有损压缩,这可以帮助保持页面加载时间快速,而图像质量不会有明显的损失。

以下图片使用JPEG格式:

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

何时使用PNG图像

PNG图像是平面颜色和没有渐变的图形和图标的理想选择。PNG格式也能够支持透明度。

以下图片使用PNG格式:

  • 标志
  • 图标
  • 边框和装饰

自动图像压缩和格式选择

为了保持快速加载时间,Shopify自动压缩图像时,他们显示在您的在线商店。欧宝体育官网入口首页压缩图像意味着减小文件大小,以便更快地加载页面。

此外,Shopify自动确定在传送图像时使用的最佳文件格式。例如,当我们检测到买家的网络浏览器支持现代图像格式,如WebP和AV1图像文件格式(AVIF)时,Shopify将以这些格式发送您的图像。

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

上传限制

上传到Shopify的图片在像素和文件大小(以兆字节为单位)方面都有限制。百万像素用于表示一张图像由多少百万像素组成。兆字节用来表示映像占用了多少百万字节的内存或磁盘空间。

上传到Shopify的图像不能超过以下任何一个限制:

  • 20像素
  • 20个字节

要找到你的图像的百万像素,你可以使用下面的等式:(像素宽x像素高)/1,000,000.例如,基于以下公式,分辨率为4900x6930的图像将是3390万像素:(4900x6930)/1,000,000 = 33.9 MP

颜色配置文件

当您在网上商店查看图像时,图像中的颜色可能与您上传到Shopi欧宝体育官网入口首页fy的原始图像中的颜色不同。当图像具有颜色配置文件时,就会发生这种情况,该配置文件是存储在具有.ICC.ICM扩展。颜色配置文件通常嵌入到图像中,以帮助标准化颜色在不同设备上的显示方式。当图像显示在您的在线商店上时,它们的颜色配置文件将被删除。欧宝体育官网入口首页

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

  • 不是所有的设备都能读取.ICC.ICM颜色配置文件,因此保持它们的完整性可能会导致不同设备的图像颜色不一致。
  • 当上传的图像不包括颜色配置文件时,网络浏览器会假设sRGB(用于在网络上显示图像的最常见的颜色配置文件)。这可以确保你的图片在所有主要的浏览器和设备上看起来是一样的。
  • 颜色配置文件可能占用大量磁盘空间,这可能导致重载时间。

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

在上传到Shopify之前,您可以通过保存图像而不保存颜色配置文件来删除图像中的颜色配置文件。这个过程取决于你的图像编辑程序。

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

要使用adobeillustrator或adobephotoshop删除颜色配置文件:

  1. 点击编辑>指定配置文件

  2. 选择不要对文档进行颜色管理

  3. 点击好吧

使用adobeindesign删除颜色配置文件

要使用adobeindesign删除颜色配置文件:

  1. 点击编辑>指定配置文件

  2. 选择“RGB配置文件”和“CMYK配置文件”丢弃(使用当前工作空间)

  3. 点击好吧

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

幻灯片、图像横幅和全宽图像的最佳实践

许多Shopify主题以大图像或幻灯片为特色,可缩放到浏览器的高度或适应您的屏幕大小。

如果你使用这些主题之一,或者有一个大的幻灯片或背景图像,那么了解哪种类型的图像看起来最好就很重要了。

由于并非所有设备都能容纳大图像,Shopify有时只显示部分图像,这取决于您使用的设备。如果你的图片幻灯片包含很多大图片,那么你可能会发现部分图片是不可见的。

建议

为了确保你的图片与你的主题很好地配合,这里有一些事情要记住:

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

  • 对于用于幻灯片或作为背景的图像,请选择简单的图像,以便任何覆盖的文本都易于阅读。

高屏幕上的宽图像

当用于查看宽图像的设备有一个高屏幕(如手机或平板电脑)时,宽图像可能会从左右裁剪。在下面的例子中,如果人物是图像中最重要的部分,那么你可以放置一个焦点在图片的右侧:

高屏幕上的宽图像

宽屏幕上的高图像

如果使用宽屏设备(如笔记本电脑或台式电脑)查看高图片,则高图片的顶部和底部可能会被裁剪。在下面的例子中,如果鞋子是图像中最重要的部分,那么你可以放置焦点在图像的底部,以防止它被裁剪:

宽屏幕上的高图像

准备好开始与ShoOB欧宝娱乐APPpify销售?

免费试用