西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus丨外贸独立站
在上一篇文章中，我们简单介绍了产品标题、产品描述写作和SEO优化。 本章我们借产品图片上传教程的机会，详细讲一下与产品图片相关的一些知识。 之所以将产品图片单独列出来，是因为产品图片的优化涉及到很多方面，对于电商业务的拓展也非常重要。
关于产品图片相关的内容，我认为大致可以分为三个部分：
有句话说得好：通过电商销售产品，实际上销售的是图片。 大概就是这个意思吧。
Shopify 的博客上有两篇关于珠宝产品图片的提示和产品图片对销售的影响的文章。 做相关产品的同学可以看一下。 虽然发布时间有点长，但是还是很实用的。
在Shopify后台上传产品图片的操作非常简单，几句话就可以解释清楚。 我将在本节末尾简要提及这一点。 所以本节的重点是根据Shopify博客上一篇关于图片优化的文章来谈谈产品图片优化。 原文请点击这里→《10个必须知道的图像优化技巧》
Shopify形象优化
这里所说的图像优化主要是指两个方面的优化：
1、如何让Google或其他搜索引擎找到并正确理解并索引你的图片，以便客户使用图片搜索功能搜索产品时，可以将你的产品图片正确展示给潜在客户。
2、如何在保证图像质量的情况下尽可能减小产品图片文件的大小，从而加快网页的加载速度跨境独立站，缩短打开时间。
>>>>
1.正确命名图片
创建描述性的、关键字丰富的文件名。 搜索引擎不仅会抓取网页上的文本，还会搜索图像文件名中的关键字。
例如：
通常我们用相机/手机拍完照片并将照片导入电脑后，照片的文件名会是一串字母和数字加上文件扩展名。 如DCMIMAGE10.jpg。 在我们将产品图片上传到 Shopify 之前，优化的第一步是更改图片的文件名。 例如，更改为：2012-Ford-Mustang-LX-Red.jpg。 为什么？ 如上所述，搜索引擎不仅会抓取网页上的文本，还会搜索图像文件名中的关键字。
下图就是上面那辆野马跑车的图片名称。 如果是默认的DCMIMAGE10.jpg，搜索引擎无法知道这张图片上有什么。 如果是2012-Ford-Mustang-LX-Red.jpg，搜索引擎会在图像名称中索引这些关键字。
Shopify形象优化
那么，这三个名字哪个更好：2012 Red Ford Mustang LX； 福特野马 LX 红色 2012 年； 红色福特野马 LX 2012？
在我看来，它们其实是一样的，但是文章的作者提出，你可以通过网页分析数据来查看访问者使用哪一类关键词进行搜索，然后将图像重命名并重新上传。 能准确匹配客户的搜索当然更好，但我觉得只要能准确描述产品图片，词序合乎逻辑就可以了。
事实上，不仅仅是Shopify，任何图片在上传之前都应该重命名，并养成这个习惯。
温馨提示：图片命名时，单词前请用“-”代替空格，否则上传后空格会被替换为%20。 2012-Ford-Mustang-LX-Red.jpg 将变为 2012%20Ford%20Mustang%20LX%20Red.jpg。
>>>>
2.填写图片的ALT属性
ALT是英文Alternate的缩写，意思是交换、替换。 图像的ALT属性是图像的必需属性。 用于当图像无法显示或用户禁用图像显示时替换浏览器中显示的内容。 当用户由于以下原因无法查看图像时，alt属性可以为图像提供替代信息： 1. 网络速度太慢； 2、src属性错误； 3、浏览器禁用图片； 4.用户正在使用屏幕阅读器（以上内容来自百度）
例如：
上图中，添加图片时，将图片的ALT属性值定义为“上海鲜花港-郁金香”。 当用户打开浏览器浏览时，正常显示的是郁金香的图片。 如果由于网速问题无法打开图片，则上图显示的内容为：
此时，用户知道这里有一张郁金香的图片，但他们只能弄清楚图片是什么样子的。
除了在无法打开图片时帮助用户了解图片的内容之外，ALT的另一个重要作用就是帮助搜索引擎更好地理解图片的内容。 ALT 中的关键字可以帮助您的图像在搜索引擎中获得更好的排名。 因此，当我们谈论图像优化时，我们需要为每个产品图像添加Alt标签。
产品图片展示的一个流行趋势是从不同角度拍摄产品的详细图片。 因此，在填写图片的Alt属性时做shopify的页面要注意什么；一步一步教你如何上传和优化shopify网站图片，尽量为每张图片填写不同的Alt标签。 例如：
相对长尾和描述性的 Alt 关键字可以让您从 Google 搜索中获得更多访问量。
>>>>
3.保证图像质量并控制文件大小
你可能听说过：在台式电脑上，如果3秒内没有打开一个网站，很多人会选择离开； 在移动设备上，该时间增加到 5 秒； 亚马逊的一项数据研究显示，他们的网站打开速度慢了1秒，他们的年销售额损失约为16亿美元； 在Google的排名算法中，网站打开速度也是帮助您获得较高排名的重要因素之一。
因此，如果你的网站打开速度非常慢，大多数人会选择在页面加载之前直接离开。 虽然Shopify使用了包括CDN技术、图片压缩技术等多项网页加速技术来对网站进行加速，但是如果你的网站需要加载大量大文件，比如很多人使用的1M-2M Banner图片shopify模板，将会非常困难。 大的产品图片，这些仍然会成为影响网站打开速度的重要因素。
有许多工具可以在保证图像质量的同时控制图像文件大小。 您可以寻找百度图像无损压缩工具。
>>>>
4.选择合适的图像格式
目前主流的图片格式有jpg、png、gif。 查了写资料后，大多数人不推荐GIF，而jpg和png一般被认为是更好的图像格式。 看下面的图片。 当文件大小相同时，jpg的颜色明显比gif和png的颜色明亮得多。
因此，《10个必须知道的图像优化技巧》的作者认为Jpg格式的图像是首选。 忘记 gif 格式的图片，不要使用它们。 对于png格式的图片，请注意区分是png-8还是png-24。 png-8 可以使用，但是 png-24 文件大小较大，所以不要使用它。
>>>>
5.上传并编辑产品图片
有四种上传图片的方法。 在Shopify后台打开产品添加页面，进入图片部分，如下图所示，点击右上角上传图片，会弹出对话框，选择本地图片并上传。 可以一次上传多张图像。 您还可以使用 Drop files to Upload 功能直接选择需要上传的本地产品图片，拖放到 Shopify 后端的图片部分进行上传。
当且仅当“图像”部分区域中至少有一张图像时，该部分右上角的按钮将从“上传图像”更改为“从 URL 添加图像”和“添加图像”两个按钮。
添加图片与之前上传图片的功能相同。 从 URL 添加图像允许您通过 URL 将提供服务的网站上放置的图像导入到 Shopify 中。 如下图，点击从URL添加图片后，会弹出一个对话框，要求你输入图片的直接URL（注意URL的结尾） 必须以图片格式.jpg或.png或.gif结尾，否则上传失败。）输入URL，点击添加图片。 （此方法只是一种备份方法，有需要的可以使用，就上传速度而言，并不比上面两种方法快多少）
通过批量上传表单上传产品时，也会上传图片。 这里就不详细说了做shopify的页面要注意什么，等讲批量上传方法的时候再讲。
产品图片上传成功后，您可以对图片进行排序、预览、编辑、添加Alt或删除。 对图片的操作会自动保存并实时显示在网站前台。 无需单击保存按钮来保存操作。
图片部分中的第一个大图片是产品页面的主图片。 如果您想使用其他图像作为主图像，只需使用鼠标将图像拖动到主图像的位置即可。 其他图片也可以通过鼠标拖动进行排序。
将鼠标移至需要编辑的图片上后，图片下方会显示四个编辑按钮。 预览是将图片显示在当前弹出的新的放大窗口中。 点击编辑按钮可以对图片进行裁剪、缩放、旋转、上色、变暗、添加文字等操作。 功能相当强大。 具体功能我这里就不详细说了。 有时间的时候可以自己探索一下。
单击 ALT，将弹出编辑图像 ALT 的对话框。 只需在文本框中添加图像替代文本，然后单击“完成”按钮即可保存。 最后一个垃圾桶图标按钮是删除键。
>>>>
六、图片要求
shopify支持的图片格式包
如果您上传的图片格式不是以上类型的图片，Shopify 会自动将您上传的图片格式转换为以上类型的图片。 大多数其他格式的图像将转换为 JPEG，SVG 格式的图像将自动转换为 PNG 格式。 文档。
以上几类产品图片在不同的使用环境下各有优势。 Shopify官方推荐如下：
JPEG/JPG 格式的图片
JPEG/JPG格式的图像适合显示色彩相对丰富、复杂的静止图像。 例如，拍摄的照片通常是JPG格式。 JPEG/JPG格式的图片色彩丰富，同时可以在不影响图片质量的情况下保证图片的显示效果。 这就是图片的无损压缩，既保证了图片的显示效果，又通过图片的无损压缩减小了文件的大小。 大小保证了网站的打开速度。
因此，JPEG/JPG 格式的图像适用于产品图像、网站横幅图像、轮播图像、网站页面和博客文章上的图像。
PNG格式的图片
PNG 格式图像是图形图标文件的理想格式，并且还支持透明度。 因此，对于网站上的徽标图像、社交图标文件等图像应用，建议选择 PNG 格式的图像。
Shopify自动压缩图片
为了提高网站的打开速度做shopify的页面要注意什么，减少网站页面的加载时间，并在特定数量的磁盘中存储更多的图片，Shopify会在特定条件下压缩满足特定要求的图片。 图像压缩可能会导致图像质量发生变化。 压缩图片的分辨率与您上传图片的分辨率和图片大小有关。通常压缩图片的分辨率DPI为
图片的具体分辨率设置可以使用PS查看和调整（快捷键Ctrl+Alt+I）
对于JPEG格式的文件，压缩图像的分辨率与您上传的图像的分辨率和图像的大小有关。
原始图像分辨率
图片尺寸
压缩后分辨率
86/更高分辨率
宽度/高度大于或等于1024px
85
65 – 85
宽度/高度大于或等于1024px
原装品质
64/较低分辨率
宽度/高度大于或等于1024px
65
76/更高分辨率
宽度和高度均小于 1024px
75
65 – 75
宽度和高度均小于 1024px
原装品质
64/较低分辨率
宽度和高度均小于 1024px
65
>>>>
7. 图片文件限制
上传到 Shopify 网站的图像在像素大小和网站文件大小方面受到限制。 如果超出以下任何限制，上传文件时将显示错误。
>>>>
8、关于大尺寸图片在不同设备终端上的显示
大多数 Shopify 主题（例如 Boundless、Brooklyn、Venture）都支持使用全屏幻灯片图像或横幅图像。 在上传这些图片之前，你需要先了解这些图片在不同设备上的显示问题，因为Shopify是一个自适应系统，会自动调整图片的显示尺寸以适应不同的屏幕尺寸。 一张在电脑上可以全屏显示的图片，用户在手机上访问时，可能只是原图片的一部分。
因此，为了保证您的图像在任何尺寸的屏幕上都能有最佳的显示效果，在制作大图时需要注意以下几点：
尽量将想要向客户展示的重要图片信息显示在图片的中间，防止在电脑上可以正常显示的图片在手机上访问时被截断。
用于横幅或幻灯片的图片在上传到 Shopify 之前，请勿添加任何文字信息，以免在手机上访问时文字被截断。 上传图片后，您可以使用Shopify系统为图片添加文字信息。 这些文字独立于图像，自适应且不会被切断。
图片不宜太复杂，以免后期添加文字时文字太乱而难以阅读。 如果实在无法避免使用过于复杂的图片，可以在上传后使用Shopify的Image Overlay功能，将图片上方的图片屏蔽掉。 可以调整上层的透明度和颜色以突出显示文本。
▼
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。