上传图片

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

上传图片

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

在“文件”页面上传图片

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

在主题编辑器中上传图片

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

步骤:

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

使用metaffields添加图像

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

图像的旗帜

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

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

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

在主题图像上设置一个焦点

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

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

设置焦点可在以下版本的免费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个字节

为了找到你的图像的百万像素,你可以使用以下等式:(像素宽度×像素高度)/1,000,000.例如,根据以下公式,分辨率为4900x6930的图像为3390万像素:(4900x6930)/1,000,000 = 33.9 MP

颜色配置文件

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

删除颜色配置文件有以下几个原因:

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

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

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

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

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

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

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

  3. 点击好吧

使用adobeindesign删除颜色配置文件

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

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

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

  3. 点击好吧

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

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

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

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

因为大图不能在所有的设备上显示,Shopify有时只显示图像的一部分,这取决于你使用的设备。如果你的图片幻灯片包含很多大图,那么你可能会发现部分图片是不可见的。

建议

为了确保你的图像与你的主题很好地配合,你需要记住以下几点:

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

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

高屏幕上的宽图像

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

高屏幕上的宽图像

宽屏上的高大图像

当用于观看高图片的设备有一个宽屏(比如笔记本电脑或台式机)时,它们的顶部和底部可能会被裁剪。在下面的例子中,如果鞋子是图像中最重要的部分,那么你可以把焦点在图片的底部,防止它被裁剪掉:

宽屏上的高大图像

准备好开始销售与SOB欧宝娱乐APPhopify?

免费试用