Shopifyは、Amazonのようなマーケットプレイスより画像の寸法に寛容です——ほとんど何でも喜んで表示します。その柔軟さが罠です。巨大でばらばらのファイルをアップロードすると、テーマは遅くちぐはぐな格子をレンダリングし、ある商品はくっきり、別の商品は切れたり小さかったりに見えます。最初にサイズを正しくすれば、店全体がプロらしく感じられ、速く読み込まれます。
サイズやテーマの挙動は進化するので、これらは一般的で広く使われている推奨として扱い、現在のテーマのドキュメントと照らし合わせて確認してください。
推奨サイズ
| 画像の種類 | 一般的な推奨 | 縦横比 |
|---|---|---|
| 商品写真 | 2048 × 2048 px | 1:1（正方形） |
| 全体的に正方形が最も安全 | 最大4472 × 4472 pxまで | 1:1 |
| コレクション/サムネイル | 約1024 × 1024 px | 1:1 |
| スライドショー/ヒーローバナー | 横約1600 px（またはより広く） | 16:9またはテーマ設定 |
| 最大ファイルサイズ | 1画像あたり20 MB（はるかに低く狙う） | — |
どの単一の数字よりも重要なことが2つあります。
縦横比を1つ選んで貫く。 Shopifyのテーマは、すべての商品写真が同じ形を共有するとき最も見栄えします。正方形（1:1）が最も信頼できる選択です。ぎこちない切り取りなしに、ほぼどのテーマの格子にも収まるからです。正方形、縦長、横長を混ぜると、格子がぎざぎざに見えます。
2048 × 2048が商品にちょうどいいところ。 デスクトップでのShopify内蔵ズームに十分くっきりで、サムネイルやモバイル向けにきれいに縮小され、ファイルサイズの上限に十分収まります。それより大きくても、たいてい重みを足すだけです。
カタログまるごとを一度に標準化する
数十枚の商品写真を手でリサイズするのは、午後が消えるところです。やめましょう。EC画像リサイズにはShopifyのプリセットがあり、白背景に2048 × 2048の正方形を出力し、各商品を自動で中央に置き、縁に何も触れないよう調整できる余白を付けます。フォルダを放り込み、ZIPを受け取る——どの画像も同じサイズ、同じ形、同じ構図です。
その一貫性こそ、Shopifyの格子を寄せ集めではなくデザインされたものに見せるものです。
それからファイル重量を削る
正しい寸法はレイアウトを解決します。ファイル重量は速度を解決します——そしてShopifyでは速度がお金です。遅いページはこっそりコンバージョンを奪い、検索順位を損ないます。
カメラから出したばかりの2048pxの写真は数メガバイトになりえます。ページが必要とするよりずっと多いのです。すべての画像を画像圧縮に通しましょう。写真なら品質75〜85でたいてい目に見える違いなくファイルを40〜70%削り、PNGは自動で減色されます。圧縮ツールは渡したものより大きなファイルを決して返さないので、店まるごとを安全にバッチ処理できます。
うまくいく順序：
- Shopifyプリセットで2048 × 2048にリサイズ。
- 品質75〜85で圧縮（またはPNGの減色に任せる）。
- アップロード——同じ形、小さなファイル、速い格子。
WebP、JPG、PNG？
Shopifyは対応ブラウザに自動でWebPを配信するので、たいてい自分で形式を変換する必要はありません。写真にはきれいなJPG、透過やくっきりした文字が必要なグラフィックにだけPNGをアップロードしましょう。形式の配信はプラットフォームに任せ、あなたの仕事は正しいサイズでよく圧縮した元ファイルを送り出すことです。
すべてがマシンにとどまる
両ツールともCanvasとWebAssemblyを使って完全にブラウザ内で動きます——アップロードなし、アカウントなし、透かしなし。商品写真がサーバーに触れることはありません。初回訪問後はツールがキャッシュされてオフラインで動き続けるので、電車でカタログまるごとを準備し、オンラインに戻ってから一度アップロードできます。
正方形にし、2048にサイズを合わせ、圧縮すれば、あなたのShopifyストアは速く読み込まれ、ランダムなアップロードの山ではなく、一貫した1つのショップに見えます。