Shopify 商品图尺寸指南：推荐 2048 × 2048 px，25 MP 与 20 MP 两种限制，20 MB 文件上限，格式、宽高比、放大查看与快速加载。
对大多数店铺来说，最合适的 Shopify 商品图尺寸是 2048 × 2048 像素的正方形——Shopify 自己的帮助中心说，正方形商品图用这个尺寸通常显示效果最好。围绕这个数字，还有几条硬性限制（百万像素和兆字节）、一个会影响合集页外观的宽高比选择，以及一些影响商品页加载速度的性能决策。本指南只讲商品图：尺寸、上传限制（包括 Shopify 两个页面之间的不一致）、文件格式、宽高比、放大查看、速度、SEO，以及一套把每张商品照片都处理好的工作流程。
横幅、轮播图、Logo 和博客图片的尺寸是另外的话题，本文不涉及。
Shopify 商品图尺寸速览
| 项目 | 数值 | 来源 |
|---|---|---|
| 推荐正方形尺寸 | 2048 × 2048 px | Shopify 帮助中心 |
| 最大尺寸（商品图和合集图） | 5000 × 5000 px，或 2500 万像素 | Shopify 帮助中心，商品媒体 |
| 通用图片上传限制 | 2000 万像素 | Shopify 帮助中心，上传图片 |
| 开发者 API 上限（MediaImage） | 4472 × 4472 px（20 MP） | Shopify.dev |
| 最大文件大小 | 小于 20 MB | Shopify 帮助中心和 Shopify.dev |
| 最适合商品图的文件类型 | PNG，其次是 JPEG | Shopify 帮助中心 |
| 允许的宽高比（API） | 100:1 到 1:100 | Shopify.dev |
下面逐一解释每个数值并注明来源。
推荐尺寸：2048 × 2048
Shopify 的商品媒体文章说，正方形商品图用 2048 × 2048 px 通常显示效果最好，高分辨率照片看起来更精致、更专业（Shopify Help Center）。Shopify 的开发者文档对通过 API 上传的商品图也给出了同样的建议（Shopify.dev）。
这个尺寸好用的原因：
- 足够大，支持放大查看：带放大或灯箱查看功能的商品页，需要在买家放大图片时展示细节。人们会看得很仔细：在 Baymard Institute 的测试中，56% 的用户进入商品页后首先浏览商品图片（Baymard Institute）。
- Shopify 会替你生成小尺寸版本：添加图片后，Shopify 会自动为主题的不同位置生成不同尺寸——商品页用大图，合集网格用小图（Shopify Help Center）。你只需上传一张高质量母图。
- 远在限制之内：2048 × 2048 约为 420 万像素，远低于 Shopify 的任何上限；这个尺寸下压缩得当的 JPEG，通常只占文件大小上限的一小部分。
如果有更大的图片，也可以上传；只要在下面的限制之内，3000 × 3000 的母图不会有任何坏处。只是不要为了达到 2048 而放大一张小照片——放大只会增加像素，不会增加细节。
上传限制：25 MP 还是 20 MP？
这正是 Shopify 自己的文档前后不一致的地方，所以值得说清楚。
- 商品媒体文章：商品图和合集图可以是不超过 5000 × 5000 px 或 2500 万像素的任意尺寸，且必须小于 20 MB（Shopify Help Center）。
- 上传图片文章：上传到 Shopify 的图片不能超过 2000 万像素或 20 MB。同一页面提到，上传商品图有不同的图片和文件大小限制，并在其他地方建议上传最高 5000 × 5000 或 2500 万像素的高分辨率图片（Shopify Help Center）。
- 开发者文档：商品 MediaImage 最大为 20 MB、4472 × 4472 px（20 MP）（Shopify.dev）。
所以 Shopify 同时公布了 25 MP 的数值（用于后台的商品图和合集图）和 20 MP 的数值（用于通用上传，以及通过 API 创建的商品媒体）。实际操作中：
- 如果通过后台商品页上传，Shopify 的商品媒体文章允许最高 25 MP。
- 如果通过应用、CSV 导入或 API 上传，按 20 MP（4472 × 4472）来规划。
- 对所有人最稳妥的规则：图片保持在 20 MP 及以下、小于 20 MB。这适用于所有上传方式，而推荐的 2048 × 2048 远低于这个数值。
如何计算百万像素
百万像素 = 宽 × 高 ÷ 1,000,000。Shopify 自己举的例子：一张 4900 × 6930 px 的图片约为 33.9 MP，超出了限制（Shopify Help Center）。
| 尺寸 | 百万像素 | 符合 20 MP？ | 符合 25 MP？ |
|---|---|---|---|
| 2048 × 2048 | 4.2 | 是 | 是 |
| 3000 × 3000 | 9.0 | 是 | 是 |
| 4000 × 4000 | 16.0 | 是 | 是 |
| 4472 × 4472 | 20.0 | 是（上限） | 是 |
| 5000 × 5000 | 25.0 | 否 | 是（上限） |
| 6000 × 4000 | 24.0 | 否 | 是 |
| 4900 × 6930 | 33.9 | 否 | 否 |
很多现代相机和手机拍出的照片在 24 MP 到 48 MP 甚至更高，所以直出的文件上传前往往需要缩小。一次性把它们批量缩放到你的标准尺寸，而不是等 Shopify 拒绝后再逐张处理。
"文件过大"错误
Shopify 的帮助说明，如果你看到提示文件必须小于等于 20 MB 的错误，而文件其实小于 20 MB，问题出在百万像素数而不是文件大小——请缩小像素尺寸，比如从 5000 × 5000 缩到 4000 × 4000（Shopify Help Center）。
商品照片的文件格式
Shopify 的商品媒体文章说，大多数商品图最好的文件类型是 PNG，其次是 JPEG；TIFF、BMP、GIF、SVG、HEIC 和 WebP 也都支持（Shopify Help Center）。它的图片上传文章补充了一个实用的分工：照片和商品用 JPEG，Logo、图标以及纯色或透明的图形用 PNG（Shopify Help Center）。
落到商品照片上：
- JPEG 用于大多数商品照片。它能处理数百万种颜色，压缩效果好，文件很小。
- PNG 用于需要透明背景的情况，或者以扁平图形展示的商品。全彩照片存成 PNG 通常比 JPEG 大得多。
- WebP 可以上传。你不需要手动转换，原因在于 Shopify 交付图片的方式（见下一节）。
- HEIC（iPhone 照片）也支持，不过转成 JPEG 能让文件在各种工具中表现更可预期。
Shopify 在交付时转换格式
Shopify 不会在上传时压缩图片。图片通过主题展示时，它可能会压缩图片，选择买家浏览器支持的最佳格式，并尽可能以 WebP 或 AVIF 交付（Shopify Help Center）。这很重要，因为现代格式轻得多：Google 报告称，在同等质量下，无损 WebP 图片比 PNG 小 26%，有损 WebP 图片比同类 JPEG 小 25–34%（Google for Developers）。
换句话说，上传高质量的 JPEG 或 PNG，现代格式交给 Shopify 去处理。
宽高比：选定一个并坚持使用
Shopify 的 API 接受 100:1 到 1:100 之间的任何宽高比（Shopify.dev），所以宽高比不是技术限制，而是设计决策。
Shopify 帮助中的关键规则：商品图在合集页上并排显示时，除非所有特色图（主图）都使用统一的宽高比，否则它们会以不同的尺寸显示（Shopify Help Center）。宽高比混杂会让网格参差不齐。
| 宽高比 | 示例尺寸 | 适合 |
|---|---|---|
| 1:1（正方形） | 2048 × 2048 | 大多数商品；整齐的网格；电商平台和广告 |
| 4:5（竖版） | 2048 × 2560 | 服装、瓶子、高的商品；铺满手机屏幕 |
| 3:4（竖版） | 2048 × 2731 | 模特上身的服装 |
| 4:3（横版） | 2048 × 1536 | 家具、宽的商品 |
正方形是稳妥的默认选择。竖版比例能让服装和高的商品在手机上更好看。无论选哪种，都要检查主题在网格和商品页上如何裁剪图片——有些主题有把商品卡片裁成固定比例的设置。
如果某张商品照片不符合你选定的比例——比如把一个高瓶子放进正方形画面——就扩展画布，而不是把商品压扁。ProductShot 的 AI 商品扩图工具可以在商品照片周围补出匹配的背景，达到新的比例，同时不让商品变形。
放大查看与图片质量
放大效果取决于原图。一张 1000 像素的图片放大到铺满桌面屏幕会显得模糊；2048 像素的图片则经得起放大。几条质量规则：
- 拍清晰：用三脚架、好的光线，并对焦在商品的关键细节上。
- 不要放大：如果原图太小，就重拍。放大只会让图片变大，不会变清晰。
- 填满画面：商品只占 2048 画布的一小部分，就浪费了分辨率。裁剪时让商品占据画面大部分，并保持一致的边距。
- 谨慎增强：如果照片有点软或有噪点，像免费电商商品图清晰度提升工具这样的免费工具可以在浏览器中清理它，无需登录、不耗积分、不加水印——但它无法恢复拍摄时根本没有捕捉到的细节。
Google 的图片指南从搜索的角度提出了相关观点：高质量照片比模糊、不清晰的图片更吸引用户，清晰的图片在搜索结果缩略图中也更有吸引力（Google Search Central）。
颜色：为什么上传后图片看起来不一样
如果上传后颜色发生偏移，原因通常是嵌入的色彩配置文件。Shopify 会移除店铺上展示的图片中的色彩配置文件；没有配置文件时，浏览器默认使用 sRGB，这是网页上最常见的配置文件（Shopify Help Center）。因此，以 Adobe RGB 或其他广色域配置文件保存的图片，在店铺前台可能显得发灰或偏色。
解决办法：导出前把商品图转换为 sRGB，然后保存。在手机和桌面显示器上都检查一下效果。
让商品页保持快速
大尺寸商品图往往是商品页上最大的元素，因此对加载速度至关重要。
最大内容绘制（LCP）：Google web.dev 的指南说，良好的 LCP 是 2.5 秒或更短，网站应在至少 75% 的页面访问中达到这一水平（web.dev）。在很多商品页上，主商品图就是 LCP 元素。web.dev 的文章还演示了以高获取优先级预加载 LCP 图片，让它尽早开始加载。
响应式图片：Shopify 的主题文档解释说，如果没有 srcset 和 sizes，无论视口大小，浏览器都只有一张图片可以下载，于是移动设备可能会下载桌面尺寸的图片（Shopify.dev）。现代 Shopify 主题使用 image_tag Liquid 过滤器输出响应式图片；如果你用的是自定义主题或旧主题，请让开发者检查一下。
懒加载：Shopify 主题会先加载较小版本的图片，再在后台加载全分辨率版本，所以图片可能会先模糊一下再变清晰（Shopify Help Center）。首屏的主商品图一般不应懒加载，以便尽快显示。
上传前要压缩吗？Shopify 说上传前不需要手动压缩图片，并建议上传你能提供的最佳质量（Shopify Help Center）。文件非常大时（为了保持在 20 MB 以下，或加快批量上传），轻度压缩仍然有帮助。免费电商商品图压缩工具可以在浏览器中缩小文件，且看不出画质损失。更多细节请看我们的电商商品图压缩指南。
商品照片的图片 SEO
商品图可以从 Google 图片和购物结果中带来流量。Google 的图片 SEO 指南建议：
- 描述性的文件名——用
blue-linen-shirt-front.jpg而不是IMG_4821.jpg，扩展名要与文件类型一致（Google Search Central）。 - 有用的替代文本，描述图片中的商品。在 Shopify 中，在后台媒体编辑器里为每张商品图添加替代文本。
- 高质量图片，放在页面上相关文字附近。
替代文本也能帮助使用屏幕阅读器的买家，所以先为人来写："蓝色亚麻衬衫，正面，贝母纽扣。"
需要多少张商品图，以及哪些
Shopify 没有规定每件商品的最少图片数，但对大多数商品页来说，一组精心挑选的小图组比一张或二十张都更好。每件商品的实用起点：
- 主图：商品单独放在干净的背景上，使用你的标准比例。它会出现在合集页上，所以这里最需要一致。
- 其他角度：背面、侧面、顶部或打开状态——展示买家会问到的部分。
- 细节特写：面料、纹理、缝线、表面处理、接口、成分标签。
- 尺寸图：商品拿在手里、穿在人身上或放在熟悉的物品旁边，让大小一目了然。
- 使用图或场景图：商品在使用环境中，帮助买家想象拥有它的样子。
- 款式图：每种颜色或表面处理一张，并关联到对应的款式，买家选择款式时图集会随之切换。
图组中每张图片都保持与主图相同的像素尺寸和比例，这样买家在手机上滑动时图集高度不会跳动。并把最能影响决定的信息往前放：如果你收到的问题大多关于尺寸，就把尺寸图移到第二位。
在兼容的主题中，商品页也支持视频和 3D 模型，但它们有各自的限制，不在本指南范围内。
Shopify 商品图工作流程
1. 拍摄
在干净的背景上把每件商品拍清晰，光线均匀，相机保持一致的高度和距离。拍下主视图、各个角度、细节和尺寸参照。
2. 清理主图
去掉干扰元素，把商品放到统一的背景上。ProductShot 的 AI 白底商品图生成器只需一张照片就能生成干净的上架图，Product Lock 会保持商品的形状、颜色、Logo 和标签不变；发布前请检查包装上的文字。新账户注册即送 10 个免费积分（一张图消耗 10 积分），而免费工具——清晰度提升、压缩、去背景——不消耗积分。
3. 按比例裁剪
把每张主图裁成相同的比例（例如 1:1），商品四周保持相同的边距。需要时扩展画布，而不是把商品压扁。
4. 尺寸与颜色
以长边 2048 px 导出（正方形为 2048 × 2048），色彩空间为 sRGB。
5. 保存为合适的格式
照片用高质量 JPEG；只有需要透明时才用 PNG。
6. 检查限制
小于 20 MP，小于 20 MB。一张 2048 × 2048 的 JPEG 通常远小于 1 MB。
7. 命名并上传
使用描述性的文件名，在后台上传，添加替代文本，并把主图设为第一张。
8. 在手机上检查
在手机上打开合集页和商品页。检查网格图片是否对齐、主图是否加载迅速、放大后是否清晰。
故障排查
| 问题 | 可能原因 | 解决办法 |
|---|---|---|
| 文件小于 20 MB 却提示"文件过大" | 百万像素超出限制 | 缩小像素尺寸（如 4000 × 4000 或更小） |
| 合集网格参差不齐 | 宽高比混杂 | 所有主图使用同一比例 |
| 商品在卡片上被裁掉 | 主题裁剪为固定比例 | 与主题比例一致，或调整主题设置 |
| 颜色发灰或偏色 | 嵌入了广色域配置文件 | 导出前转换为 sRGB |
| 放大后模糊 | 原图太小或经过放大 | 重拍或上传更大的原图 |
| 商品页加载慢 | 图片过大，没有响应式图片 | 上传合理尺寸；确保主题使用 srcset |
| 图片先模糊后清晰 | 懒加载行为 | 属正常现象；避免主图懒加载 |
| 透明 PNG 显示了错误的背景 | 主题背景颜色 | 合并到你选定的背景上 |
实例：一瓶护肤品
一瓶 30 ml 的精华液，用手机以 4032 × 3024 px（约 12 MP）拍摄。
- 裁剪：围绕瓶子裁成正方形，商品占据画面大部分。
- 背景：清理为白色，带柔和阴影。
- 缩放：2048 × 2048 px，sRGB。
- 导出：高质量 JPEG，约 400–600 KB。
- 文件名：
vitamin-c-serum-30ml-front.jpg。 - 替代文本："维生素 C 精华液，30 ml 琥珀色玻璃滴管瓶，正面。"
- 图集：正面、背面（成分）、质地涂抹、拿在手里体现尺寸、浴室置物架上的场景图——全部正方形，全部 2048 px。
结果完全在 Shopify 的所有限制之内，放大清晰，在合集页上统一，并且足够轻，能快速加载。
FAQ
Shopify 商品照片应该用什么尺寸？
正方形图片用 2048 × 2048 px，这是 Shopify 自己的建议，适用于大多数店铺。所有主图使用同一宽高比。
Shopify 的限制是 25 还是 20 百万像素？
Shopify 两个都公布了。它的商品媒体文章允许商品图和合集图最大 5000 × 5000 px（25 MP）；通用上传文章和开发者文档给出的是 20 MP。保持在 20 MP 和 20 MB 及以下，在任何地方都没问题。
Shopify 接受的最大文件是多大？
商品图必须小于 20 MB。
上传前需要压缩图片吗？
Shopify 说没有必要，并建议上传能提供的最佳质量；它会自己优化交付。文件非常大或批量上传时，轻度压缩仍然有帮助。
Shopify 商品用 PNG 还是 JPEG？
Shopify 把 PNG 列为大多数商品图的首选，其次是 JPEG。实际操作中，照片用 JPEG 文件更小，需要透明时 PNG 最合适。
为什么我的商品图在合集页上对不齐？
因为它们的宽高比不同。特色图使用统一的比例，或者让主题裁剪成固定比例。
应该上传 WebP 吗？
可以，但没必要。Shopify 会自动向支持的浏览器提供 WebP 或 AVIF。
参考来源
- Shopify Help Center, Product media types: https://help.shopify.com/en/manual/products/product-media/product-media-types
- Shopify Help Center, Uploading images: https://help.shopify.com/en/manual/online-store/images/theme-images
- Shopify.dev, Manage media for products and collections: https://shopify.dev/docs/apps/build/online-store/product-media
- Shopify.dev, Serve correctly sized images with srcset and sizes: https://shopify.dev/docs/storefronts/themes/best-practices/performance/use-responsive-images
- web.dev, Optimize Largest Contentful Paint: https://web.dev/articles/optimize-lcp
- Google Search Central, Image SEO best practices: https://developers.google.com/search/docs/appearance/google-images
- Google for Developers, WebP: https://developers.google.com/speed/webp
- Baymard Institute, image resolution and zoom: https://baymard.com/research-articles/ensure-sufficient-image-resolution-and-zoom
