← 博客
阅读约 4 分钟

Shopify 商品图尺寸:2048 正方形最稳

为什么 2048 像素的正方形比 5000 像素母图更好用、Dawn 主题实际会请求多大的图,以及一个统一比例如何撑住整个商品系列的卖相。附一份上传前速查清单。

  • shopify
  • product photography
  • ecommerce
  • page speed
  • image optimization
  • background removal
  • alt text
Shopify 商品图尺寸:2048 正方形最稳

Shopify 的商品图翻车,通常只有两个方向。要么太小——顾客想看清一条缝线或一颗宝石的镶口,放大视图就糊成一团。要么直接从相机里搬过来,大得离谱,手机上页面卡到爬,而你的流量大半就落在手机上。后台两种都照单全收,一声不吭。

Shopify 替你做的事,比多数店主意识到的要多:它会为店铺里的不同位置各生成一套尺寸,CDN 也会在浏览器支持时挑一个现代格式,比如 WebP 或 AVIF。它不会做的是:修正参差不齐的宽高比、猜哪张照片属于哪个变体,或者救回一张边缘毛糙的抠图。下面这些,才是你能控制的部分。

从 2048 x 2048 开始,也到此为止

Shopify 官方的说法:正方形商品图,2048 x 2048 像素通常显示效果最好。硬性上限要高得多——一张商品图或商品系列图必须小于 20 MB,最大可以到 5000 x 5000 像素,也就是 2500 万像素。

但上限不是目标。在 Dawn 主题里,商品页内嵌的图库向 CDN 请求的图从不超过 1946 像素宽,连放大灯箱点名的尺寸也止步于 4096 像素。一张 5000 像素的母图,换来的多半只是更慢的上传和中间更慢的编辑。主图库就守住 2048 像素的正方形。支持上传的格式包括 PNG、JPEG 和 WebP,所以给 Shopify 一个压缩过的文件,别丢一个 6 MB 的 TIFF 过去。

正方形还是竖版:选一个比例,然后别摇摆

商品系列的网格页,是宽高比不统一最容易露馅的地方,所以 Shopify 建议所有主图使用统一比例。像 Dawn 这样的主题,既可以让画框去适应每张图,也可以把所有图锁进一个固定比例,而这两条路都会惩罚不一致:自适应给你一个参差不齐的网格,锁定则从瓶口上方一刀裁过去,或者在戒指周围留下一大片空。

四个高矮胖瘦明显不同的塑料瓶,排成一排立在同一块纯白背景前

所以,一次决定好。正方形(1:1)是最稳妥的默认选择,在窄屏上重排也体面。4:5 或 2:3 这类竖版比例适合服装和高瓶子,在手机上能占掉更多纵向空间。唯一不能做的,是在同一个商品系列里两种混着来。

落实的办法,是把商品抠出来,画面自己重搭。把照片上传到 remover.bg,去掉背景,换成和其他商品页一模一样的纯白背景或品牌色。然后用你手边现成的导出工具,把结果缩放到你选定的画框尺寸——这样一只手持的马克杯和一件及地长外套,落地时尺寸完全一致。同一张抠图还能直接拿去应付要求更严的电商平台,参见 Amazon 商品主图要求;或者干脆保留透明、之后再合成——看看什么时候该输出透明 PNG

Shopify 的 CDN 会缩放,但救不了你的原图

主题通过 Liquid 的 image_urlimage_tag 过滤器请求图片,它们会生成 srcset,让 CDN 按设备给出尺寸合适、格式合适的文件。所以一个做得规矩的主题,绝不会把你那张 2048 像素的图原样推给一部 390 像素宽的手机。

但有两件事它管不着。上传时选什么格式仍然重要:导出 WebP 能在文件到达 CDN 之前就把体积压下来,而 Shopify 接收 WebP 无需转换,就像 remover.bg 从头到尾都支持 WebP 一样。另外,几百个 SKU 没有“拖一个文件夹进去”的捷径;那种活儿该交给一段调用去背景 API 的脚本,和你的 CSV 导入一起跑。

放大只有在像素够的时候才管用

Shopify 的说法是,图片要大于 800 x 800 像素,放大才能正常工作。在 Dawn 主题里,商品模板的放大设置给了三个选项:点击与悬停、打开灯箱,或者干脆不放大。

粗针灰色麻花针织羊毛的极近特写,每一针上的单根纤维和翘起的毛头都清晰可见

质感就是卖点的时候,把放大打开:针织、皮革纹理、雕刻、宝石刻面、木纹。平面图形和小图标就关掉,那里放大只是在替压缩噪点做广告。放大对边缘同样毫不留情——毛领、碎发、细带子会把每一处失误都摊开给人看,这正是一张干净抠图值钱的地方。

变体图与媒体顺序

每个变体只支持指定一张图——只能是图片,不能是视频或 3D 模型——顾客选中那个选项时,它就成为预览图。

一个变体一张图往往不够用,所以要把它周围的图库用起来。把每一张照片都加进商品媒体,让相关的照片挨在一起,再把最强的那张放到最前面:第一个媒体项决定商品卡片长什么样,也决定默认展示的是哪张。

alt 文本:上限 512 字符,125 就够

Shopify 把 alt 文本上限设在 512 字符,并建议不超过 125。这是可读性建议,不是读屏软件的限制:太长的 alt 文本听起来很累,因为听的人没法跳读。描述画面,包括变体。“藏青亚麻衬衫,正面,扣好扣子”胜过“衬衫”。别写“一张……的图片”,也别堆关键词。alt 文本可以通过 CSV 上传批量修改,不必一个商品一个商品地改。

上传前的速查清单

一批图进 Shopify 之前:除非你选了竖版,否则一律导出 2048 像素的正方形;文件大小离 20 MB 的上限留足余量;整个商品系列只用一种背景处理;每个变体指定一张图,并围着它排好图库;alt 文本控制在 125 字符以内。没有一条听起来光鲜,但只要哪一条做错了,商品系列页上立刻就看得出来。

继续阅读