直接の回答
JPG・PNG・WebP 写真を既定の 2048×2048 または本ツールの 1024×1024・1200×1200 に調整します。Shopify は正方形画像では通常 2048×2048 が適すると案内しています。実際の表示はテーマによって決まります。余白追加は既定で小さな写真を拡大せず、切り抜きは枠外を除きます。
このツールの使い方
Shopify ストアの商品写真をアップロード
最大20枚の JPG、PNG、WebP 写真を選択します。Shopify 推奨の 2048×2048 正方形プリセットが初期選択されています。
Shopify 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)
出力: 500×500 の画像を拡大せず配置し、各辺に 774 px の余白を加えた 2048×2048 PNG
倍率は 1 のままです。大きな画布は余白を追加するだけで、画像の細部を増やしません。
3000×3000 の写真を Shopify 推奨 2048×2048 正方形へリサイズ
入力: 3000×3000 JPEG 商品写真 (3.6 MB)
出力: 2048×2048 JPEG 最適化商品画像
既定の正方形に縮小します。実際の容量とテーマ上の表示を確認してください。
縦長のアパレル写真 (1200×1600) を白余白付き 2048×2048 正方形に整形
入力: 1200×1600 縦長 JPEG 写真 (3:4 比率)
出力: 1200×1600 の写真を拡大せず含み、左右各 424 px・上下各 224 px の余白を加えた 2048×2048 JPEG
余白追加は写真全体を保持します。ストア上ではテーマによる切り抜きが起こる場合があります。
制限事項
- Shopify テーマによっては表示時にトリミングされる場合があります。テーマエディタで表示形式をご確認ください。
- 本ツールはサイズ調整および余白補正を行うもので、自動背景切り抜き機能は含みません。
- 透明な余白には PNG または WebP が必要です。JPEG と透明余白の組み合わせはブロックされるため、形式を変更するか単色背景を選択してください。
よくある質問
Shopify が推奨する商品画像の解像度は？
Shopify は正方形画像では通常 2048×2048 が適すると案内しています。テーマに合う寸法を選び、ストア表示を確認してください。サイズだけではズームの品質や読み込み速度は保証されません。
Shopify ではすべての画像を正方形にする必要がありますか？
いいえ。Shopify は正方形なら 2048×2048 を推奨していますが必須ではなく、テーマの仕様に合わせて選べます。
元画像が 2048×2048 より小さい場合はどうなりますか？
拡大を許可しない余白追加では小さな写真は元の大きさで周囲に余白が付きます。切り抜き範囲が出力より小さい場合、拡大を許可するまで処理をブロックします。
写真が外部サーバーに送信されることはありますか？
いいえ。すべての処理はブラウザの HTML5 Canvas 上で安全に行われます。
信頼できる参考文献・標準規格
- 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.