shopify123.cn--一个shopify自学开店、赚美金的网站!
当前位置:shopify > shopify产品 > 正文

【干货分享】Shopify产品图片的优化技巧


相信做跨境电商的都听说过一句话:做电商卖产品,其实卖的就是图片。无论是做平台或者独立站,图片都起着决定性的作用。


相较于平台而言,独立站图片优化需要从更多的角度考虑:网站速度、SEO优化、兼容性等。以下是精心总结过的5大Shopify店铺产品图片的优化技巧:


1、正确命名你的产品图片


以这张图片为例。



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


为什么?Google搜索引擎不仅仅会抓取你网页上的文字,还会抓取你的图片名称。如下图,为上图野马跑车的图片名称。如果是默认的DCMIMAGE10.jpg,搜索引擎是无法知道这张图片上是什么内容的。如果是2012-Ford-Mustang-LX-Red.jpg,则搜索引擎会将图片名称中的这几个关键词进行索引。



那么,2012 Red Ford Mustang LX; Ford Mustang LX Red 2012; Red Ford Mustang LX 2012这三个命名哪个更好呢?以Google搜索引擎的算法来看,只要是语序具有逻辑性、能够准确描述产品图片的名字效果是差不多的。


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


2、仔细优化 alt 属性


Alt 属性是浏览器无法正确呈现图片时的替代文本。Alt属性也能够用来提升顾客的浏览体验。在浏览网页时顾客如果把鼠标悬浮在上面,他们就会看到 alt 属性文本(取决于浏览器设置)。


除了帮助用户在无法打开图片的时候理解图片内容,ALT的另外一个重要作用就是帮助搜索引擎更好的理解图片的内容了。


ALT中的关键词,可以帮搜索引擎理解图片上的内容,让你的图片在搜索引擎,尤其是图片搜索引擎如Google Image中有个更好的排名。因此我们说图片的SEO优化,要做的就是给每个产品图片都加上Alt标签。


让我们看一下 alt 属性的源代码。



图片优化的首要任务是为网站上的每张产品图片填写 alt 属性。

以下是 alt 属性的一些简单规则:

用简单的语言描述你的图片,就像你为图片文件命名那样。

如果你销售的产品有型号或序列号,请一定要在 alt 属性中填写。

不要在 alt 属性中使用太多关键词(例如,alt=“福特野马肌肉车马上购买便宜最优价”)。

不要对装饰性图片使用 alt 属性。如果被Google捕捉到过度优化行为你的网站权重将大大下降。


3、尽量控制图片大小


你可能有听说过:在桌面电脑上,如果一个网站3秒内还没有打开,很多人就会选择离开;在移动设备上,这一时间增加到5秒;


Amazon的一项数据研究表明,他们的网站打开速度慢1秒,一年的销售损失大约为16亿美元;Google的排名算法中,网站打开速度也是帮你获得更高排名的重要因素之一。


因此,如果你的网站打开速度很慢的话,大部分人都会在网页还未加载完的情况下直接选择关闭网页离开,就谈不上什么订单转化了。


虽然Shopify采用了包括CDN技术,图片压缩技术等等多项网页加速技术为网站加速,但是如果你的网站上需要加载很多的大文件,例如很多人会用的动辄2M大小的Banner图,以及很大的产品图片,这些还是会成为影响网站打开速度的重要因素。


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

Tinypng https://tinypng.com/

Compressor.io https://compressor.io/compress

Kraken.io https://kraken.io/web-interface

OptimiZilla https://optimizilla.com/


4、选择合适图片类型


在网上发布图片有三种常用的文件类型:JPEG、GIF 和 PNG。

让我们举一个极端的例子看一下这三种文件类型以及它们如何影响同一图片:



可以看到在文件大小一样的情况下,jpg的色彩明显要比gif和png要鲜艳好多。

以下是选择文件类型时要记住的一些技巧:

在大多数情况下,JPG 都会是你的最佳选择。它们以最小的文件大小提供最好的质量。

大型产品图片切勿使用 GIF 格式。

PNG 可以很好地替代 JPEG 和 GIF。如果你只能有 PNG 格式的图片,那么尽量使用 PNG-8 而不是 PNG-24。PNG 图片文件非常小,因此十分适合用作简单的装饰性图片。


5、优化装饰性图片


网站通常有各种各样的装饰性图片,比如背景图、按钮和边框。任何与产品无关的东西都可能被视为装饰性图片。


虽然装饰性图片可以为网页添加很多美感,但它们可能导致合并文件较大和加载时间缓慢。


因此,你可能需要考虑仔细检查你的装饰性图片,以防它们影响你的网站将访客转化为顾客的能力。


你需要检查网站上所有装饰性图片的文件大小,并使用最小化文件大小的模板。

以下是一些减小装饰性图片文件大小的技巧:

对于构成边框或简单图案的图片,使用 PNG-8 。

尽可能使用 CSS 来替换任何装饰性图片。

在不破坏图片质量的情况下尽可能缩小大墙纸风格的背景图片。


补充


shopify图片文件限制


上传到Shopify网站的图片在网站的像素尺寸和文件大小方面都有限制,超过以下任意限制在上传文件的时候会显示出错。

图片像素方面的限制为4472*4472。2000万像素, (图片长与宽像素的乘积)

文件大小方面的限制为20M

单个产品的产品图片数量不能超过250张图片

Shopify推荐的产品图片长宽尺寸为2048*2048像素


关于大尺寸图片在不同设备终端的显示问题


Shopify是一个自适应的系统,会自动调整图片的显示尺寸以适应不同屏幕的大小,在电脑上可以全屏显示的图片,当用户使用手机访问时显示的图片可能只是原图的一部分。


为了保证你的图片能够在任意大小的屏幕上有最佳的显示效果,在制作网站的Banner等等全屏大图时需要注意以下几点:


1. 尽可能的将你想要展示给客户的重要图片信息显示在图片中间,以防止在电脑上可以正常显示的图片在手机上访问时被截掉。如下图,Shopify系统对大图的截取示意:



2. 用于Banner或者Slideshow的图片在上传到Shopify上之前,请不要添加任何文字信息,以防止在手机上访问时文字别截掉。你可以在图片上传之后使用Shopify系统为图片添加文字信息,这些文字是独立于图片的,是自适应的,不会被截掉。


3. 图片不应该过于复杂,以防止你在后期添加文字的时候文字显示效果太差难以阅读


尚睿出海

为您创建一个属于自己的Shopify网站

广东尚睿网络技术有限公司SainStore是一家服务生产制造型客户的互联网公司,我们致力于加快“中国制造”的“品牌塑造”,为客户提供包括整体视觉设计、品牌数字营销、店铺运营、IT研发、客户关系管理、供应链管理在内的跨境电商整体解决方案,作为国内首家Shopify官⽅合作伙伴,Shopify Plus国内官⽅认证伙伴,我们致⼒于帮助商⼾快速搭建⾃⼰的品牌商城,创造深度的品牌店铺体验,全⽅位解决商家的运营和技术难题,从0到1开启跨境电商的新商机。




关注即可联系Shopify建站顾问







版权保护: 本文由 shopify 原创,转载请保留链接: http://www.shopify123.cn/shopifychanpin/912.html