直接答案
将 JPG、PNG 和 WebP 商品照片调整为默认 2048×2048，或选择本工具的 1024×1024、1200×1200 方图。Shopify 说明正方形图片通常以 2048×2048 展示较好，实际呈现取决于主题。补边默认保持小图原尺寸，裁剪则去掉画框外的部分。
如何使用此工具
批量上传 Shopify 商品图片
选取至多 20 张 JPG、PNG 或 WebP 图片。工具默认开启 Shopify 推荐的 2048×2048 高清方图预设。
选取 2048×2048 或其他方图预设
保持推荐的 2048×2048 高清方图，或一键切换至 1024×1024 轻量方图或 1200×1200 标准方图。
选择智能补边或裁剪填充
选用「智能补边」保留完整商品边缘并自动居中，或选用「裁剪填充」去除留白满幅平铺。
导出 Shopify 规格商品图片
单张下载或批量导出 ZIP 压缩包，即刻上传至 Shopify 后台商品媒体库。
Shopify 商品媒体规范：2048×2048 推荐方图、主题自适应与放大保护机制
Shopify 商品媒体文档说明，正方形商品图片通常以 2048×2048 展示较好，实际展示取决于主题。1024×1024 与 1200×1200 是本工具提供的替代尺寸。未允许放大时，补边保留小图原有像素尺寸并添加边距，不生成细节，也不保证缩放画质或加载速度。
- 2048×2048 默认方图遵循 Shopify 的方形图片建议；1024×1024 与 1200×1200 是本工具的替代选项。
- 主题契合度认知：提供规范方图预设，同时兼顾主题与销售渠道的多样比例灵活性。
- 端侧放大保护：对较小尺寸素材保持内容缩放 scale <= 1，以干净的画布留白承载，杜绝模糊失真。
实用示例
将 500×500 小图标居中放入 2048×2048 画布（不强行放大拉伸）
输入： 500×500 PNG 正方形图标徽章 (1:1)
输出： 2048×2048 PNG，500×500 图标不放大，四周各补 774 px
缩放比例保持为 1。大画布只添加边距，不增加图标细节。
将 3000×3000 高清大图缩小为 Shopify 推荐的 2048×2048 方图
输入： 3000×3000 JPEG 商品大图 (3.6 MB)
输出： 2048×2048 JPEG 优化主图
缩小至默认方图。检查实际输出体积并在主题中预览。
将 1200×1600 竖版服饰模特图补充白边放入 2048×2048 正方形中
输入： 1200×1600 JPEG 服饰照片 (3:4 比例)
输出： 2048×2048 JPEG，照片保持 1200×1600，左右各补 424 px，上下各补 224 px
补边保留完整照片。店铺主题仍可能对实际展示进行裁剪。
限制
- Shopify 主题模板可能会对媒体按其自身容器样式裁剪，请在主题编辑器中预览实际效果。
- 本工具提供尺寸缩放与边距填充，不提供 AI 自动抠图或主体背景移除功能。
- 透明补边需要 PNG 或 WebP。JPEG 与透明补边同时启用时会阻止处理；请选择其他格式或实色背景。
常见问题
Shopify 官方推荐的商品图片尺寸是多少？
Shopify 说明正方形商品图片通常以 2048×2048 展示较好。请按主题选尺寸并预览店铺；尺寸本身不保证缩放画质或加载速度。
Shopify 上的所有商品图片都必须是正方形吗？
不是。Shopify 推荐方图使用 2048×2048，但并不强制所有素材为方形，实际展示形式取决于您使用的主题样式。
如果我的原图尺寸小于 2048×2048 会怎样？
未允许放大时，补边模式保留小图原尺寸并在周围添加边距。裁剪区域小于目标尺寸时会阻止处理，除非您允许放大。
我的商品图片会被上传到任何服务器吗？
绝对不会。所有图像变换均在您的本地浏览器中通过 HTML5 Canvas API 执行，无网络外发。
权威技术标准与参考文献
- Shopify Help Center: Product media types ↗ — 2048×2048 usually displays best for square product images; actual presentation depends on the theme.
- W3C Portable Network Graphics (PNG) Specification (Third Edition) ↗ — PNG file format, including lossless encoding and alpha transparency; resizing can change pixel detail.
- MDN: CanvasRenderingContext2D.drawImage() ↗ — Source crop rectangles and destination dimensions.
- MDN: HTMLCanvasElement.toBlob() ↗ — Browser image export; JPEG and WebP quality can introduce compression loss.