上传图片
您可以在您的在线商店中使用许多不同类型的图像,包括您的公司徽标,产品图像,幻灯片,横幅和博客帖子图像。欧宝体育官网入口首页Shopify提供了通过裁剪和调整大小操作动态转换图像的能力,除了自动确保在在线商店上提供图像时使用最佳图像格式之外。欧宝体育官网入口首页
上传图片
有两个不同的地方,你可以上传图片为您的网上商店:欧宝体育官网入口首页
在“文件”页面上传图像
你可以上传图片文件您的Shopify管理页面。这很有用,因为您可以在编辑任何主题时访问这些图像。要了解更多信息,请参见上传文件到你的网站.
在主题编辑器中上传图像
您可以在主题编辑器中向主题添加图像。
步骤:
- 从您的Shopify管理,到欧宝体育官网入口首页>主题.
- 找到要编辑的主题,然后单击定制.
- 从Shopify应用,挖掘商店.
- 在销售渠道节中,利用欧宝体育官网入口首页.
- 利用管理的主题.
- 找到要编辑的主题,然后点击定制.
- 利用编辑.
- 从Shopify应用,挖掘商店.
- 在销售渠道节中,利用欧宝体育官网入口首页.
- 利用管理的主题.
- 找到要编辑的主题,然后点击定制.
- 利用编辑.
- 使用下拉菜单选择要编辑的模板。
- 在主题编辑器侧栏中,单击要向其中添加图像的部分或块。
- 点击选择图像,然后执行下列操作之一:
- 要从计算机上传图像,请单击上传.
- 使用免费的库存图像破裂,点击探索免费图片.
- 单击图像以查看主题中图像的预览。找到想要使用的图像后,单击选择.
- 点击保存.
通过使用元字段添加图像
如果你有metafields为您的图像设置,然后您可以使用动态源选择器来添加图像。有关元字段和支持的图像格式的更多信息,请参见元字段内容类型和值.
图像的旗帜
您可以使用以下元素创建图像横幅:
- 一两个图像
- 文本
- 操作按钮
在台式电脑上,横幅图像并排显示。因为这种格式不适合移动设备,所以您可以通过选择移动设备上的堆栈图像选项中的图像的旗帜主题设置.欲知更多有关图像的旗帜和幻灯片,参考幻灯片和图像横幅的最佳实践.
在主题图像上设置焦点
您可以使用焦点来定义在线商店主题图像中最重要的部分。欧宝体育官网入口首页当你在图像上设置焦点时,你使它成为焦点区域。焦点总是出现在框架中,即使你有一个裁剪图像以适应布局的主题。当主题使用不同的长宽比和不同的屏幕尺寸时,焦点可以让您更好地控制图像的显示方式。
每张图像只能有一个焦点,但您可以随时更改或删除它。
设置焦点可以在以下版本的免费Shopify主题上使用:
- 工艺版本5.0.0或更高
- 渴望版本5.0.0或更高
- Colorblock版本3.0.0或更高
- 黎明版本7.0.0或更高
- 刷新版本2.0.0或更高
- 骑版本3.0.0或更高
- 感觉版本5.0.0或更高
- 工作室版本4.0.0或更高
- 味道版本4.0.0或更高
如果您使用的是第三方主题,那么请检查主题的文档,看看您的主题是否支持使用焦点。
为图像添加焦点
您可以从您的文件节,并从主题编辑器中获取。如果你在一个图像上添加一个焦点,然后在多个地方使用该图像,那么它们都使用相同的焦点。
您只能向主题图像添加焦点。你不能给产品、博客或收藏图片添加焦点。
步骤:
- 在主题编辑器中,单击具有图像的部分或块。
- 点击编辑在图像上。
- 点击添加焦点.
- 单击并拖动蓝色圆圈,或单击图像最重要的部分来设置焦点。
- 点击完成.
步骤:
- 在主题编辑器中,点击具有图像的部分或块。
- 利用编辑在图像上。
- 利用添加焦点.
- 点击图像最重要的部分来设置焦点。
- 利用完成.
步骤:
- 在主题编辑器中,点击具有图像的部分或块。
- 利用编辑在图像上。
- 利用添加焦点.
- 点击图像最重要的部分来设置焦点。
- 利用完成.
移除一个焦点
步骤:
- 在主题编辑器中,单击具有图像的部分或块。
- 利用编辑在图像上。
- 点击移除焦点.
- 点击完成.
步骤:
- 在主题编辑器中,点击具有图像的部分或块。
- 利用编辑在图像上。
- 利用移除焦点.
- 利用完成.
步骤:
- 在主题编辑器中,点击具有图像的部分或块。
- 利用编辑在图像上。
- 利用移除焦点.
- 利用完成.
图像格式
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
.
颜色配置文件
当您在在线商店中查看图像时,图像中的颜色可能看起来与您上传到S欧宝体育官网入口首页hopify的原始图像中的颜色不同。当图像具有颜色配置文件时,就会出现这种情况,颜色配置文件是存储在具有.ICC
或.ICM
扩展。颜色配置文件通常嵌入到图像中,以帮助标准化颜色在不同设备上的显示方式。当图像显示在您的在线商店时,它们的颜色配置文件将被删除。欧宝体育官网入口首页
颜色配置文件被删除有几个原因:
- 并不是所有的设备都能读取
.ICC
或.ICM
颜色配置文件,因此保持它们的完整性可能会导致不同设备的图像颜色不一致。 - 当上传的图像不包含颜色配置文件时,sRGB(用于在web上显示图像的最常见的颜色配置文件)由web浏览器假设。这可以确保您的图像在所有主要的web浏览器和设备上看起来都一样。
- 颜色配置文件可能占用大量磁盘空间,从而导致加载时间过长。
从图像中删除颜色配置文件
在上传到Shopify之前,您可以通过保存图像而不使用颜色配置文件来删除图像中的颜色配置文件。这个过程取决于您的图像编辑程序。
使用adobeillustrator或adobephotoshop删除颜色配置文件
使用adobeillustrator或adobephotoshop删除颜色配置文件:
点击编辑>指定配置文件.
选择不要对文档进行颜色管理.
点击好吧.
使用adobeindesign删除颜色配置文件
使用adobeindesign删除颜色配置文件:
点击编辑>指定配置文件.
对于RGB配置文件和CMYK配置文件,选择丢弃(利用当前工作空间).
点击好吧.
有关详细信息,请查看关于颜色配置文件的Adobe文档.
幻灯片、图像横幅和全宽图像的最佳实践
许多Shopify主题具有可缩放到浏览器高度或适应屏幕尺寸的大型图像或幻灯片。
如果您使用这些主题之一或有大型幻灯片或背景图像,那么了解哪种类型的图像看起来最好是很重要的。
因为大图片不能适合所有设备,Shopify有时只显示部分图片,这取决于你使用的设备。如果您的图像幻灯片包含许多大图像,那么您可能会发现图像的某些部分不可见。
建议
为了确保你的图片能很好地配合你的主题,这里有一些事情要记住:
用于幻灯片或背景的图像中不应该有文本。如果文本是图像本身的一部分,那么它可能会被移动、裁剪或根据主题进行调整。使用主题编辑器在幻灯片中添加文本和链接。
对于在幻灯片中使用或作为背景的图像,请选择简单的图像,以便任何覆盖的文本都易于阅读。
高屏幕上的宽图像
当用于观看宽幅图像的设备有一个高屏幕(如手机或平板电脑)时,宽幅图像可能会在左右裁剪。在下面的例子中,如果人物是图像中最重要的部分,那么你可以放置一个焦点在图片的右侧:
宽屏上的高图像
当用于查看图像的设备有宽屏幕时(如笔记本电脑或台式机),高图像可能会在顶部和底部裁剪。在下面的例子中,如果鞋子是图像中最重要的部分,那么你可以放置焦点在图像的底部,以防止它被裁剪出来: