Shopify店铺产品图片要求与图片优化

本篇文章是对《Shopify网站产品图片的上传与优化》的补充,补充内容如下:

Shopify支持的图片格式包括

  • JPEG / JPG
  • Progressive JPEG
  • PNG
  • GIF

如果你上传的图片格式不是以上类型的图片,Shopify会自动将你上传的图片格式转换为以上类型的图片,大部分其他格式的图片都会转化为JPEG,SVG格式的图片会被自动转化为PNG格式的文件。

另外如果你的浏览器支持,比方说你用Chrome浏览器打开你的Shopify网站的任意页面,那么Shopify会自动将该页面的所有JPG格式的图片以“WebP”格式的图片代替。如果你用不支持“WebP”格式的浏览器,如IE浏览器访问同样的页面,那么该页面所有的图片还是JPG格式的图片。之所以Shopify会自动将图片转化为JPG格式或者Webp格式的文件,是因为这类型的文件在显色效果和文件大小也就是打开速度方面都可以达到最优化。

关于WebP格式,你只需要知道这一点就行,这是一个不需要我们参与的技术问题,我们在实际操作过程中也不会和这一技术有太多的交叉,不过你有兴趣的话,可以再去Google或者百度上多了解下关于Webp的内容。以下来自百度:

WebP格式,谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间。它可以减小图片加载资源的大小、节省用户流量资源,也可以降低服务器流量资源。因为是Google自家的服务,所以兼容性还没有那么的全面,不过这些都不需要我们担心,Shopify会依据客户的浏览器环境来自动决定是显示JPG格式的图片还是Webp格式的图片。

以上几种类型的产品图片,在不同的使用环境中各有优势,Shopify官方的建议如下:

JPEG / JPG格式的图片

JPEG/JPG格式的图片适合用于显示色彩相对丰富复杂的静止图像,例如拍照的照片图片格式通常为JPG格式的文件。JPEG/JPG格式的图片色彩丰富,同时可以在保证图片质量的前提下保证图片的显示效果,就是对图片的无损压缩,这样既保证了图片的显示效果,对图片的无损压缩减小的文件的大小从而保证了网站的打开速度。

因此,JPEG/JPG格式的图片适用于 产品图片,网站的Banner图片,轮播图片,网站页面和博客文章里面的图片。

PNG格式的图片

PNG格式的图片是图形图标文件的理想格式,同时也支持透明度功能,因此在网站的里的Logo图片,以及社交图标文件等等图片应用建议选择PNG格式的图片。

Shopify店铺对图片的自动压缩和转换

为了提高网站的打开速度,减少网站页面的加载时间,同时将更多的图片存储在特定数量的磁盘中,Shopify会在特定的条件下对满足特定要求的图片进行压缩。图片压缩之后可能会导致图像质量的改变。压缩之后的图片的分辨率和你上传的图片的分辨率以及图片尺寸有关系。通常被压缩之后的图片的分辨率DPI为

  • JPEG:65-90之间
  • PNG:90
  • GIF:不会被压缩

图片的具体分辨率设置可以使用PS查看与调整(快捷键Ctrl+Alt+I)如下图所示中分辨率“72”就是我们所说的该图片的DPI值。

Shopify店铺产品图片要求与图片优化

对JPEG格式的文件来说,Shopify会依据原图的分辨率,来决定上传后的图片要不要进行压缩。例如,如果你上传的图片分辨率大于86,图片的尺寸任意一边大于等于1024px,那么Shopify就会对该图片进行压缩,并且压缩之后的图片分辨率为85。

如果上传之前的图片分辨率在65-85之间,并且图片尺寸任意一边大于等于1024px,则Shopify不会对该图片进入任何处理,Shopify会使用你上传的图片的原图。

原图分辨率图片尺寸压缩之后的分辨率
86或者更高分辨率图片宽或高大于等于1024px85
65 – 85图片宽或高大于等于1024pxOriginal quality
64或者更低分辨率图片宽或高大于等于1024px65
76或者更高分辨率图片宽和高都小于1024px75
65 – 75图片宽和高都小于1024pxOriginal quality
64或者更低分辨率图片宽和高都小于1024px65

另外,在最新的更新中,shopify会自动按照你上传的图片为其生成WebP格式的图片,来进一步提高Shopify网站的打开速度。

 

图片文件限制

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

  • 图片像素方面的限制为4472*4472。2000万像素, (图片长与宽像素的乘积)
  • 文件大小方面的限制为20M
  • 单个产品的产品图片数量不能超过250张图片
  • Shopify推荐的产品图片长宽尺寸为2048*2048像素

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

大部分的Shopify主题(例如Boundless,Brooklyn,Venture)支持使用全屏的Slideshow图片或者Banner图片,在上传这些图片之前,你需要首先了解这些图片在不同设备上的显示问题,因为Shopify是一个自适应的系统,会自动调整图片的显示尺寸以适应不同屏幕的大小,在电脑上可以全屏显示的图片,当用户使用手机访问时显示的图片可能只是原图的一部分。

部分主题,例如我在使用的Prestige主题,是可以分开设置网站的Desktop上Banner图片和Mobile上的Banner图片的。无论如何,为了保证你的图片能够在任意大小的屏幕上有最佳的显示效果,在制作网站的Banner等等全屏大图时需要注意以下几点:

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

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

3. 图片不应该过于复杂,以防止你在后期添加文字的时候文字显示效果太差难以阅读,如果确实无法避免使用太过复杂的图片,可以在图片上传之后使用Shopify的图片Overlay功能,在图片上方蒙上一层可以调整透明度和颜色的涂层,以凸显文字的显示。

如下图分别为不使用Overlay的文字显示效果和使用黑色+30% Overlay的显示效果以及使用红色+30% Overlay的显示效果。在不使用Overlay效果的情况下,网站的Banner图片虽然显色效果特别的好,但是因为图片复杂,导致白色文字很难辨识,客户体验会很差,即使调成黑色字体,显示效果也非常的差。但是在下图中使用Overlay的效果之后,图片文字辨识度则要高很多了。

shopify产品图片

shopify产品图片

另外,Google上搜索到的图片,你要注意该图片是不是有版权的。在设置Banner图片的时候避免侵犯他人的版权。Shopify官方提供了一个免费高清大图的资源网站 – burst.shopify.com 里面的图片可以随意使用。类似网站还有很多,可以自行Google搜索Free Stock Image获取相关资源。

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

留言交流 6

  1. #3

    手机端和电脑端的banner图片只能设置成同一张吗 不能分开设置的吗

    Glam Camp8个月前 (09-30)回复
    • 这个看主题了,有一些主题是可以分开设置网站的Banner图片的,比如 Prestige 这个主题

      Conway8个月前 (10-08)回复
  2. #2

    Shopify的图片Overlay功能在哪里?我怎么没找到

    Gail1年前 (2021-04-25)回复
    • 看主题,有些Shopify主题可能没有这个功能

      Conway1年前 (2021-04-26)回复
  3. #1

    猫哥,我在产品页面点击不同SKU图片预览时,总是会加载一会才显示出对应的图片出来!这个要怎么解决

    一生所向2年前 (2020-08-29)回复
    • 如果你的图片比较多的话,确实会出现这个问题,Shopify为了保证网站的打开速度,对图片采取了Lazy Loading的策略,没有出现在屏幕上的图片,在你发出请求之后,才会加载显示出来,你能做的,就是尽可能减少产品变体图片的数量,减小单个文件的大小

      Conway2年前 (2020-08-29)回复

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

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

支付宝扫一扫打赏

微信扫一扫打赏