WooCommerce の商品画像サイズ：3 つのサイズと本当の変更方法

WooCommerce はアップロードされた商品写真ごとに 3 つの画像サイズを生成しますが、WordPress の管理画面で編集できるのはそのうち 2 つだけです。woocommerce_thumbnail はカタログのグリッド画像、woocommerce_single は商品ページの大きな画像、woocommerce_gallery_thumbnail はその下に並ぶ小さなサムネイル列です。変更は「外観 > カスタマイズ > WooCommerce > 商品画像」から行います。このパネルに切り抜きのドロップダウンだけがあって幅の入力欄がない場合は、テーマが意図的にコード側で幅を固定しています。

3 つのサイズ

サイズ名	使われる場所	切り抜き	カスタマイザーでの編集
woocommerce_thumbnail	ショップページ、カテゴリーのグリッド、関連商品、クロスセル	初期設定で正方形にハードクロップ	幅と比率
woocommerce_single	単一商品ページのメイン画像	切り抜きなし — 元の縦横比を維持	幅のみ
woocommerce_gallery_thumbnail	メイン商品画像の下の小さな列	正方形にハードクロップ	不可

これらは WordPress 標準のサイズに上乗せされます。1 枚の商品写真から通常 thumbnail、medium、medium_large、large、WooCommerce の 3 サイズ、さらにテーマが add_image_size で登録した追加サイズが生成されます。アップロード 1 件あたりのファイル数はかなりのもので、300 商品のインポートに時間がかかるのはこのためです。

意外に思われるのがギャラリーサムネイルです。管理画面に設定項目が一切ありません。標準のインストールでは小さな正方形（従来は 100px）で、ファイル自体が本当に小さいため、Retina 画面でぼやけて見えやすいサイズでもあります。

設定の実際の場所

「外観 > カスタマイズ > WooCommerce > 商品画像」には 3 つの設定があります。

• メイン画像の幅 — woocommerce_single の幅です。高さは自動なので、元の縦横比が保たれます。
• サムネイルの幅 — woocommerce_thumbnail の幅です。
• サムネイルの切り抜き — 1:1（正方形、初期設定）、カスタム（4:3 のような比率を入力）、切り抜きなし から選びます。

ないものにも注目してください。カタログサムネイルには高さの入力欄がありません。高さは切り抜き比率から導かれるためです。そしてギャラリーサムネイルの設定は一切ありません。

何かを変更する前に、あるファイルから実際にどの派生画像が作られるのかを見ておくと役立ちます。実際の商品写真を WordPress 画像サイズツールに投入すれば、拡大処理なしで各サイズを満たせるだけの解像度があるかどうかも含めて、一覧で確認できます。

カタログ画像がおかしく見える理由

カタログのサムネイルは正方形にハードクロップされます。ハードクロップとは、WooCommerce が写真から中央の正方形を切り出し、残りを捨てるということです。レターボックス処理も、縦横比の変形もしません。2000x1200 の商品写真は、中央から切り出した 1200x1200 のスライスになり、そこから縮小されます。

余白を取って中央に配置されたボトルの写真なら問題ありません。問題になるのはこういうケースです。

• 長い商品（スキー板、ケーブル、カーテンレール）— 真ん中の 3 分の 1 しか見えません
• 中央から外れた構図 — 商品がフレームの端に寄り、切り落とされます
• 商品がフレームいっぱいに写っている写真 — 上下が切れます
• 商品が隅にあるライフスタイル写真

よくあるアドバイスは「切り抜きを『切り抜きなし』に変える」です。それでも解決しますが、代償は正直に押さえておきましょう。切り抜きなしにすると各サムネイルが自前の縦横比を保つため、縦横が混在した写真のグリッドは見た目がばらつき、テーマの CSS が可変の高さを扱えない限り行が揃わなくなります。ほとんどのテーマは正方形を前提にしています。

余裕があるなら、より良い解決策は元画像側にあります。商品を中央に置き、余白を均等に取った正方形の写真に統一することです。そうすれば正方形のハードクロップは実質何もしないのと同じになり、下流のすべてが予測可能になります。切り抜き設定の変更は回避策であり、元画像を揃えることが本当の解決策です。

テーマが幅を固定している場合

商品画像のパネルに切り抜きの設定しかない場合、テーマは WooCommerce のサポートを登録する際に固定幅を宣言しています。

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

テーマがこれらの値を渡すと、WooCommerce はカスタマイザーから幅の設定を取り除き、比率だけを残します。これはバグでもテーマの意地悪でもありません。テーマの商品レイアウト CSS がその正確なピクセル幅を前提に組まれており、自由に変更できるとグリッドが崩れるからです。

子テーマの functions.php から、サイズごとのフィルターで上書きできます。

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

同じ書き方が woocommerce_get_image_size_thumbnail にも使えます。またこれは、UI を持たないギャラリーサムネイルを変更する唯一の方法でもあります。

代償もはっきり書いておきます。固定された幅を上書きすると、WooCommerce が生成するファイルはテーマの CSS が想定するものと一致しなくなります。多くの場合、画像は枠より大きくなるだけなのでブラウザー側で縮小表示され、見た目は問題ありません。ただしテーマが高さ固定のコンテナを使っている場合は、レターボックスやはみ出しが発生します。2,000 件を再生成する前に、1 商品で試してください。

サイズ変更には再生成が伴う

サイズ設定が影響するのは新規アップロードだけです。既存の商品はアップロード時に生成されたファイルを配信し続けるため、再構築するまで表示は何も変わりません。

WooCommerce はカスタマイザーの保存時にバックグラウンドの再生成を開始します。小規模なカタログならそれで十分です。大規模な場合は WP-Cron が確実に動くかどうかに依存し、アクセスの少ないストアでは動かないことが多く、ライブラリが中途半端に再生成された状態になりがちです。自分で実行しましょう。

wp media regenerate --yes

商品画像だけを再構築する場合。

wp media regenerate --yes --post_type=product

手動作業の邪魔にならないようバックグラウンドジョブを止めたい場合。

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

再生成がやってくれないことが 2 つあります。1 つは古いファイルの削除です。以前の設定で作られた孤立した派生ファイルはアップロードディレクトリに残り続け、容量は増えていきます。もう 1 つは、元画像より大きなサイズを作ることです。WordPress は拡大処理を行いません。メイン画像の幅を 1200 に設定しても商品写真が 800px 幅なら、1200px のファイルは作られず、ブラウザーは 800px のファイルを引き伸ばし、srcset にもそれ以上の候補はありません。

実際にアップロードすべきサイズ

設定した最大幅のおよそ 2 倍の正方形を目安にしてください。メイン画像が 600px なら 1200x1200、テーマが 800px を使うなら 1600x1600 です。これで 2 倍の Retina ディスプレイをカバーでき、WordPress が拡大処理なしにすべての派生画像を作れるだけのピクセル数が確保できます。グリッドを均一に保つため、全商品で寸法を揃えてください。

それでも解決しない場合

サイズは正しく設定され、再生成も済ませたのに、まだ商品の見た目がおかしいなら、画像を新しいタブで開いてファイル名を読んでください。設定したどのサイズとも一致しない寸法のサフィックスが付いていれば、別の何かがそのサイズを登録しています。サフィックスがまったくない場合は WooCommerce がフルサイズのファイルにフォールバックしており、これはほぼ確実に、要求したサイズに対して元画像が小さすぎたことを意味します。その元ファイルを画像サイズツールに通し、WordPress が生成するはずのものとブラウザーが実際に読み込んだものを比べてください。食い違っている場合は、たいてい最適化プラグインか CDN の画像リサイザーが間に挟まっています。