商品图片的要求及优化(下)
7 mins / By SHOPLAZZA Learn

在店铺中,需要展示商品图片的位置主要包括商铺首页的轮播图,单图/多图,商品主图/附图等等。不同位置对于图片尺寸的要求是不一样的,必须要进行对应的调整,使图片呈现出最好的效果。本课程以Think Different装修主题为示范,列举了轮播图、商品主图和附图的不同推荐尺寸。 

另外,图片标签和图片大小的优化也可以提升用户体验。本课程着重介绍了图片alt属性的一些简单规则,以供大家参考。
  • 0:00:13 我们接着上一节课的内容继续分享。大家都知道,在店铺中,需要展示商品图片的位置有很多,如商铺首页的轮播图,单图/多图,商品主图/附图等等。为了能够有最好的展示效果,我们还需要对不同位置图片的尺寸进行调整。根据不同的店铺装修主题,以及不同的商品排布,具体的要求会有所差别。在这里我们使用Think Different装修主题,列举2个常用案例,大家可以借鉴一下,举一反三。
  • 0:01:00 首先就是店铺首页的轮播图。 大家在Shoplazza后台进行上传图片操作时,可以在上传位置的下方,看到推荐的图片尺寸。例如Think Different主题的轮播图,pc端图片推荐尺寸为1920*1080px。有经验的卖家,可以根据自己风格和经验进行调整,新手卖家的话,建议根据推荐的尺寸进行图片调整。在这里需要特别注意的一点就是,轮播图推荐把PC端和手机端,两张不同尺寸的图片同时上传,尽量不要只上传一个尺寸的图片。例如,只上传了PC端尺寸的图片,没有上传手机端的。那么在手机端的店铺首页,我们可以看到,经过裁剪后的图片,显示不完整,展示效果不好。所以,有些位置标注了PC端和手机端图片不同尺寸的时候,请一定要注意。
  • 0:02:20 其次是商品的主图以及附图。商品主图的重要性已经不言而喻了,如何制作好商品的主图,我们也会在之后的专题课程中做详细的介绍,这里就不赘述了,还是先介绍一下尺寸的问题。新建商品添加商品图片的时候,在Think Different主题中,并没有对图片的尺寸进行推荐。这是因为卖家所涉及的品类庞杂,不同类型的商品最佳图片尺寸是不同的,方便大家进行个性化装扮。
  • 0:03:03 比如,这里的Think Different主题,就比较适合使用1:1比例的图片。而在服装类主题Nova中,适合使用的图片就比较修长。不过有一个原则是通用的,就是像商品主图及附图、简约轮播等,可以上传多图的位置,尽量使用尺寸一致的图片。如果使用的是尺寸不一致的图片,那么在店铺前端,用户进行图片切换的时候,就会感觉突兀,影响购物体验。在这里还有一点需要注意,除主图以外,所添加的附图的数量推荐在3~5张,不建议添加过多的附图。以上,就是商品图片格式及尺寸的要求及推荐,大家在实际操作中,可以借鉴上述经验,进行类推。
  • 0:04:11 接下来,我们说一下图片的优化。在这里,我们所说的图片优化,包含两个方面。第一点是优化图片标签,让搜索引擎正确理解并索引出对应的商品图片,以便用户可以快速正确的搜索到想要的商品,这对于提升用户体验是非常重要的一环;第二点是优化图片大小,在保证质量的前提下,尽量压缩图片的大小,可以提升网页打开和商品图片加载的速度,大幅提升用户体验。
  • 0:04:55 第二点已在上节课中做过介绍,这里就说一下图片alt属性的设置。alt属性是图片必备的一个属性,主要用于图片因网速等原因无法显示时,在图片区域显示的解释说明文字。在网络情况不佳或在使用屏幕阅读器等情况下,以文字形式向顾客说明图片所表达的内容,优化前端体验。
  • 0:05:31 除此之外,还有非常重要的一点就是,图片alt属性是搜索引擎唯一能识别的图片信息。将包含相关关键字的适当alt属性,添加到商品图片上,可以增加店铺的SEO价值,在搜索引擎中获得更好的排名。事实上,使用alt属性可能是使商品出现在Google图片和网络搜索中的最佳方式。因此,为所有商品图片填写alt属性成为商品图片优化的首要任务。以下是alt属性的一些简单规则,大家可以参考一下: 使用简单的语言描述图像,言简意赅,就像图片文件命名一样; 如果所销售的商品具有型号或者序列号,请在alt属性中添加相关信息; 不要将alt属性进行单纯的关键词堆叠,不利于搜索的优化; 只需要对商品图片进行alt设置,不需要对装饰图片进行设置,过度优化反而可能影响搜索引擎; 推荐使用Shoplazza应用市场的图片SEO插件,可以一键进行alt属性设置,减少工作量。
课程评论 Write review

看看学员怎么说

Write review
Customer Reviews
Newest
Most liked
Highest ratings
Lowest ratings
Wow you reached the bottom
The review would not show in product details on storefront since it does not support to.