Shopify店铺产品图片的优化与上传

在上一篇内容我们简单介绍了Shopify产品标题,描述以及SEO优化方面的设置 。本节内容我们借Shopify店铺的产品图片上传教程这个机会,来详细的说一下产品图片相关的一些内容。之所以把产品图片单独列一章来说,是因为产品图片的优化涉及到很多的方面,对我们独立站电商业务的拓展也非常的重要。

关于产品图片相关的内容,我觉得大致可以分为三个部分:产品图片怎么拍好;产品图片如何优化;产品图片如何上传。

关于产品图片如何拍好,因为所涉及到的内容过于专业,我暂时还没有能力去说出个123来,所以本篇内容就暂且略过来。不过拍好产品图片对于我们做好独立站,提高网站转化率有着非常积极而且重要的影响,建议大家多去问问谷歌和百度。有句话说的好:做电商卖产品,其实卖的就是图片。不过我知道的是,做独立站,不必像做亚马逊那样要遵守亚马逊对产品图片的要求,首先主图必然不能使用白底图片的。而是使用产品的使用场景图。

举个极端的例子,如下图所示,Revolights这款自行车灯,左图为产品图片,右图为使用场景图片,哪张图片对你来说更有吸引力?

Shopify店铺产品图片的优化与上传

这里Shopify的博客上有2篇关于饰品类产品图片的Tips 和 产品图片对销售的影响 的文章,做相关产品的同学可以看看,发布的时间虽然有点儿久,但是还是很实用的。

Shopify后台上传产品图片的操作很简单,几句话就可以带过,这个我会放到本节内容的最后简单说下。所以本节重点是结合Shopify博客上的一篇关于图片优化的文章来说下关于产品图片优化的事情。文章原文请戳这里  →《10 Must Know Image Optimization Tips

Shopify图片优化

这里我们所说的图片优化,主要指两个方面的优化:

一个是如何让Google或者其他搜索引擎找到并正确的理解索引你的图片,以便当客户使用图片搜索功能搜索产品的时候正确显示你的产品图片给潜在客户。另一个是,如何在保证图片质量的前提下尽可能的缩小产品图片文件大小,来加快网页的加载速度,缩短打开时间。

Shopify店铺图片优化 – 为你的图片正确命名

Creating descriptive, keyword-rich file names. Search engines not only crawl the text on your webpage, but they also search for keywords within your image file names.

举个栗子:

Shopify店铺图片优化 - 为你的图片正确命名

通常我们用相机/手机拍完照片之后,将照片导入到电脑里,照片的文件名会是一串字母数字加文件扩展名。如DCMIMAGE10.jpg。我们将产品图片上传到Shopify之前的第一步优化,就是要在电脑上更改图片的文件名字。例如,改为: 2012-Ford-Mustang-LX-Red.jpg。

为什么?正如上面所说 Search engines not only crawl the text on your webpage, but they also search for keywords within your image file names. 搜索引擎不仅仅会抓取你网页上的文字,还会抓取你的图片名称。如下图,为上图野马跑车的图片名称。如果是默认的DCMIMAGE10.jpg,搜索引擎是无法知道这张图片上是什么内容的。如果是2012-Ford-Mustang-LX-Red.jpg,则搜索引擎会将图片名称中的这几个关键词进行索引。

那么,2012 Red Ford Mustang LX; Ford Mustang LX Red 2012; Red Ford Mustang LX 2012这三个命名哪个更好呢? 在我看来其实是一样的,但是文章作者提出来,可以依据网页分析数据看下访客们都是使用哪种排序方式的关键词进行搜索的,然后进行图片重命名重新上传。精确匹配客户的搜索,当然更好,但是我觉得,只要能够准确描述产品图片,语序具有逻辑性就可以了。

其实不仅仅是Shopify,任何图片在上传之前都应该进行这样的重命名,把这个养成一个习惯。

Tips:图片命名的时候,单词之间的空格请使用“-”代替,否则图片上传到服务器之后,空格会被%20替换。例如“2012 Ford Mustang LX Red.jpg”就会变成“2012%20Ford%20Mustang%20LX%20Red.jpg”。

另外,如果你要修改的图片很多,可以尝试使用文件名批量修改工具进行修改。

Shopify图片优化:务必填写图片的ALT属性

Shopify产品图片的ALT属性

ALT是英文单词Alternate的缩写,意为交换、替换。图片的ALT属性是图片一个必需的属性,它用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。假设由于下列原因用户无法查看图像,alt 属性可以为图像提供替代的信息:1. 网速太慢; 2. src 属性中的错误; 3. 浏览器禁用图像; 4. 用户使用的是屏幕阅读器 (以上内容来源于百度)

举个栗子:

上海鲜花港 - 郁金香

上图,添加图片的时候定义了该图片的ALT属性值为“上海鲜花港 – 郁金香”。当用户打开浏览器进行浏览时,正常显示就是郁金香的图片了。如果因为网速问题导致图片打不开,则上图位置显示的内容为:

Shopify图片优化

此时用户知道这里有一张关于郁金香的图片,但是图片具体什么样子,就只能自行脑补了。

除了帮助用户在无法打开图片的时候理解图片内容,ALT的另外一个重要作用就是帮助搜索引擎更好的理解图片的内容了。ALT中的关键词,可以帮搜索引擎理解图片上的内容,让你的图片在搜索引擎,尤其是图片搜索引擎如Google Image中有个更好的排名。因此我们说图片的SEO优化,要做的就是给每个产品图片都加上Alt标签。

目前产品图片展示一个流行趋势就是从不同角度给产品拍一些细节图。因此在填写图片的Alt属性的时候,也尽可能的为每一张图填写不同的Alt标签。例如:图片 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg 使用Alt标签: alt = ” 2012 Ford Mustang LX Red Leather Interior Trim ” 另外一张图片 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg 使用Alt标签: alt = ” 2012 Ford Mustang LX Red Rear View Air Spoiler “

在ALT设置过程中,也要和我们在设置Shopify网站的标题和描述的内容时一样,做好长尾关键词的挖掘和布局,以获取到更多更精准的流量。

保证图片质量前提下尽可能控制文件大小

你可能有听说过: 在桌面电脑上,如果一个网站3秒内还没有打开,很多人就会选择离开;在移动设备上,这一时间增加到5秒;Amazon的一项数据研究表明,他们的网站打开速度慢1秒,一年的销售损失大约为16亿美元;Google的排名算法中,网站打开速度也是帮你获得更高排名的重要因素之一。

因此,如果你的网站打开速度很慢的话,大部分人都会在网页还未加载完的情况下直接选择关闭网页离开,就谈不上什么订单转化了。虽然Shopify采用了包括CDN技术,图片压缩技术等等多项网页加速技术为网站加速,但是如果你的网站上需要加载很多的大文件,例如很多人会用的动辄2M大小的Banner图,以及很大的产品图片,这些还是会成为影响网站打开速度的重要因素。

因此建议在保证图片质量的前提下控制图片文件的大小。这一类的工具有很多,你可以找找百度图片无损压缩工具找找。这里推荐几个不错的压缩工具,你可以试用一下:

Shopify图片优化第4点:选用合适的图片格式

目前主流的图片格式有jpg,png,gif。查了些资料,gif是大部分人不推荐使用的,jpg和png则是大家公认的比较好的图片格式。看下图。在文件大小一样的情况下,jpg的色彩明显要比gif和png要鲜艳好多。

shopify图片优化

也因此 Shopify官方以及《10 Must Know Image Optimization Tips》的作者都认为,Jpg格式的图片是我们做电商独立站产品图片的第一选择。“The best file type for product images is .jpg” GIF格式的图片就尽可能不要用了,但是如果确实有必要,你可以制作一些GIF的动图插入到产品描述中,来提高订单转化率,前提条件是一定要控制好GIF图片的大小,保证网站打开速度有一个良好表现。

Shopify店铺产品图片上传以及图片编辑设置的方法

打开Shopify店铺后台的产品添加Add Product页面,到Images板块,如下图所示,点击Add image按钮,在弹出的对话框中,选择本地图片已经重命名的图片之后上传。一次可以上传多张图片。也可以使用Drop image to upload功能,直接选中本地需要上传的产品图片,拖放到Shopify后台Images板块区域进行上传。

产品图片上传成功之后,就可以对产品图片进行排序,预览,添加Alt 或者删除操作了。对图片的操作都会自动保存并实时显示在网站前台,无需再点击保存按钮进行保存操作。

Images板块的第一张大图就是产品页面的主图Main Image了,如果你想使用其他图片做主图,只需要用鼠标将该图片拖拽到主图的位置就可以了。其他图片也可以使用鼠标随意拖动进行排序。

将鼠标移动到需要编辑的图片上之后,在图片右上角会显示编辑按钮。点击编辑按钮在下拉选项中可以点击Preview预览产品图片。可以点击Edit alt text链接编辑图片ALT属性。在弹窗文本框Image Alt Text中直接添加长尾关键词保存就可以了。点击最下方的Delete按钮就会直接删除当前图片。

关于Shopify图片大小尺寸的选择,以及Banner图片在移动端的显示问题的处理,可以看下《Shopify图片优化的补充说明》了解详细内容

赞(40) 打赏
未经允许不得转载:歪猫跨境 | WaimaoB2C » Shopify店铺产品图片的优化与上传

留言交流 32

  1. #14

    大佬你好,想请问一下:图片压缩后的大小有没有理想中的数据范围,多大才不会影响加载速度,太小了又会影响图片质量。

    Owen1年前 (2021-06-15)回复
    • 保证原图清晰,然后直接TinyPng无损压缩即可,不用考虑那么多

      Conway1年前 (2021-06-16)回复
      • 大佬,可以用tinypng压缩后继续压缩吗?10M的压缩完还是1M很大啊!

        匿名2个月前 (05-07)回复
  2. #13

    从速卖通导入的产品图片要重新命名和进行ALT设置吗?另外图片Edit alt text里就是填图片名称,不是写alt =“ 图片名称”吧?

    Hua2年前 (2020-10-12)回复
  3. #12

    怎么自定义某个产品封面图片呢,因为封面默认图片是第一个variant

    Aidan2年前 (2020-08-10)回复
    • 在Shopify的后台产品编辑页面,大图位置的图片就是封面图片

      Conway2年前 (2020-08-10)回复
      • 但是给变体加上对应的图片后,封面就是显示第一个变体的图片,设置的主图排到第二张了

        Aidan2年前 (2020-08-12)回复
        • 如果你把链接地址里面的 ?variant 和它后面的内容删掉之后打开的页面,主图还是变体图片的话,就是主图本身的功能了,联系主题作者看能不能帮你改。

          Conway2年前 (2020-08-12)回复
  4. #11

    博主博主,后台详情上传的图片电脑端自动压缩变小了,有没有什么办法,让图片在电脑端变大

    匿名2年前 (2020-07-22)回复
    • 如果你没有安装图片压缩之类的插件的话,可以尝试在编辑框选项中点击“<>”选项,在代码中看下图片是不是自动设置宽度 width 了,可以直接将 width,length这些数据删掉,或者设置一个比较大的值就可以了。

      Conway2年前 (2020-07-22)回复
  5. #10

    请问下为什么在本地对图片进行关键词命名之后,上传到后台,结果图片关键词就变成这种样子的了:Muster_cfb72344-cee1-4694-a33a-e464238ec849.jpg,全部都乱了

    匿名2年前 (2020-06-13)回复
    • muster就是你的关键词吧?后面的字符不用管,是Shopify系统自动生成用于图片管理的。

      Conway2年前 (2020-06-15)回复
      • 不是,后面的也是关键词,一部分显示了,一部分关键词上传之后就变成了后面的这种好像转换成其他多少进制的了?还是说乱码了?

        匿名2年前 (2020-06-15)回复
      • 我发现就是如果给图片关键词命名的时候,如果我用很短的三四个关键词命名的话,上传后是不会出现上面的这种情况的,但是如果用长一点长尾词的时候上传上去就会出现上面的情况,后台编辑的时候就会显示当初命名的关键词只有前面一部分显示,后面的就全部变成上面的情况了

        匿名2年前 (2020-06-15)回复
    • 应该是你有重复命名的图片,导致系统给你自动编码了

      pgsmile1年前 (2021-03-22)回复
  6. #9

    您好 同一个产品多张图怎么命名呢

    匿名2年前 (2020-04-23)回复
  7. #8

    请教一个问题:我看到别人店铺的产品图是可以在下方滑动切换图的,而我的店铺的产品图是所有图片都以小图形式平铺在下方,客户需要在下方每次选中某张小图,然后上方会显示这张图的放大图。这个很影响客户翻看图片的体验。不知道该怎么设置成别人店铺那种可以有滑动图的方式。是不是由选择的主体决定的?

    匿名2年前 (2020-03-25)回复
    • 建议仔细看下你使用的Shopify主题的主题使用说明,是否支持切换产品图片的展现方式,不少主题在设置页面都是支持你说的两种图片展示方式切换的。如果主题不支持这一功能的话,估计就要换主题或者改代码了。

      Conway2年前 (2020-03-25)回复
  8. #7

    博主,详情页里的图片尺寸一般建议多少呢?像淘宝那种手机竖屏的宝贝详情图 有建议的尺寸吗、需要桌面和移动端分开吗

    匿名2年前 (2020-02-23)回复
    • 你可以先看下你的主题说明文档里面有没有建议的图片尺寸。通常建议图片在1000*1000以上,我自己的网站是1200*1200的产品图片。上传之前用PS或者Tinypng无损压缩保证网站打开速度

      Conway2年前 (2020-02-25)回复
  9. #6

    产品详情里的图片也需要全部命名吗?

    匿名3年前 (2019-06-24)回复
    • 从SEO的角度来讲,建议全部重命名,并且添加ALT属性

      Conway3年前 (2019-06-25)回复
  10. #5

    图片大小多少?

    匿名3年前 (2019-05-22)回复
    • 产品图片1000*1000以上就可以,但是要控制下文件大小,150K以内最好,不要太大

      Conway3年前 (2019-05-26)回复
  11. #4

    如果产品过多,有一部分产品的图片大量重复了,怎么操作啊

    匿名3年前 (2019-03-15)回复
    • 多拍些不一样的图片吧。。。-_-||

      Conway3年前 (2019-03-16)回复
  12. #3

    想问下,shopify怎么给浏览器地址左边添加logo图片,没找到上传的地方

    匿名4年前 (2019-01-15)回复
    • 修改位置通常在Theme Customize – Theme Setting – Favicon

      Conway4年前 (2019-01-24)回复
  13. #2

    图片上传之后还可以改图片名称吗?

    匿名4年前 (2019-01-04)回复
    • 图片上传之后,就不能重命名图片名称了,只能在本地重命名之后再上传。上传之后可以修改图片的ALT属性

      Conway4年前 (2019-01-07)回复
  14. #1

    怎么批量上传所有的产品图片

    匿名4年前 (2018-08-31)回复
    • 使用批量表格上传吧,操作办法是把所有的产品图片上传到图床上,然后把图片的直链一一粘贴到表格中,然后将表格上传到到Shopify

      Conway4年前 (2018-08-31)回复

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容

支付宝扫一扫打赏

微信扫一扫打赏