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

新注册Shopify账户可获得 14 天免费使用优惠 – 立即注册账户获取

本篇文章是对《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或者更高分辨率 图片宽或高大于等于1024px 85
65 – 85 图片宽或高大于等于1024px Original quality
64或者更低分辨率 图片宽或高大于等于1024px 65
76或者更高分辨率 图片宽和高都小于1024px 75
65 – 75 图片宽和高都小于1024px Original quality
64或者更低分辨率 图片宽和高都小于1024px 65

另外,在最新的更新中,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获取相关资源。

未经允许不得转载:歪猫跨境独立站博客 » Shopify店铺产品图片要求与图片优化

赞 (33)
新评论邮件通知
提醒
guest
2 评论
由新到旧
由旧到新 点赞最多
Inline Feedbacks
View all comments
  • 关注公众号 “ WaimaoB2C ” 第一时间获取网站最新内容,了解跨境电商独立站圈内圈外每天发生的那些事儿,和20000+独立站卖家共同成长。

    $$$$$$$$ 每月 1 本书 $$$$$$$$
    2020年8月推荐
    <The Truly Ultimate Guide To 10X Your Shopify Store> 

    公众号回复信息“ 10X ”获取本电子书下载链接。不想关注公众号的直接Google搜索书名,在搜索结果中同样可以获得电子书下载链接地址。
    该电子书不是“葵花宝典”,所以不能指望靠它“独步武林”,不过个人觉得对独立站新手来说还是有非常大的帮助的。对老手来说,实用性没那么大,不过如果电子书中有那么一两点对你的网站运营有所启发,我觉得也算是比较值了。

    *推荐亚马逊购买正版Kindle电子书或纸质书籍,获取最佳阅读体验。本分享来自于互联网以及网友上传,网站内所提供的下载链接均为站外链接,版权归原作者以及开发商所有,网站本身不存储相关资源文件. 如侵犯到版权方,请发送邮件到 hello@waimaob2c.com,站长会在第一时间删除并向您道歉。

  • Shopify 新卖家账户注册注意事项-非常重要

  • Shopify新卖家注册账户前请务必认真阅读以下注意事项:

    注册前使用本地IP; 不建议使用 QQ,126,163邮箱注册账号
    打开Shopify官网 WWW.SHOPIFY.COM 获取 14 天免费使用
    注册账户时地址信息真实有效; 缴纳月租前使用本地IP