ドキュメントCommerce実装プレイブック

カタログ画像のサイズ変更のベストプラクティス

最終更新日： 2026年5月19日

作成対象：

  • Experienced
  • Developer

ストアを本番環境に導入する前に、あらゆるカタログ画像のサイズを変更する必要があります。 本番環境に導入する前に画像のサイズを変更しないと、ページの読み込み中に画像のサイズが変更されるため、サイトの読み込み速度が大幅に低下し、導入後の最初の数日から数週間でサーバーの読み込みが増加します。

ザ・スローウェイ

デフォルトのCLI コマンドを使用して、すべてのイメージのサイズを変更します。

bin/magento catalog:images:resize

このアプローチの欠点は、次のとおりです。

  • このプロセスはシングルスレッドです
  • 既にサイズ変更されている画像は、プロセスによってサイズ変更されます
  • プロセスを中断することはできません。これには数日かかる場合があります

より高速な方法

Adobe Commerce 2.4では、非同期画像のサイズ変更が導入され、画像のサイズ変更を高速に行えるようになりました。

  1. 各web サーバーで、一時的にいくつかの追加のキューハンドラーを開始します（サーバーあたりの物理プロセッサ数の2倍）。

    code language-bsh 
    for i in {1.."$((2 * `nproc --all`))"};do bin/magento queue:consumers:start media.storage.catalog.image.resize &;done;

  2. キューハンドラーが実行されていることを確認します。

    code language-shell 
    pgrep -fl media.storage.catalog.image.resize

  3. 画像のサイズ変更リクエストをすべてキューに入力します。

    code language-shell 
    bin/magento catalog:images:resize --async

  4. すべての画像のサイズを変更したら、プロセスを終了します。

    code language-shell 
    pkill -f media.storage.catalog.image.resize

迅速な方法

フロントエンドを使用して画像のサイズを変更する別の方法があります。

このアプローチの利点は次のとおりです。

  • プロセスはマルチスレッドです
  • プロセスはマルチサーバーです（複数のweb ノードがある場合は、ロードバランサーと、media/ ディレクトリの共有ディスク領域）
  • 既にサイズ変更済みの画像はスキップされます

この方法では、100,000個の画像のサイズを8時間未満で変更しますが、CLI コマンドの完了には6日かかります。

  1. サーバーにログインします。
  2. pub/media/catalog/productに移動し、いずれかのハッシュをメモします（例：0047d83143a5a3a4683afdf1116df680）。
  3. 次の例では、www.example.comをストアのドメインに置き換え、ハッシュをメモしたドメインに置き換えます。
sed
code language-shell 
cd pub/
find ./media/catalog/product -path ./media/catalog/product/cache -prune -o -type f -print | sed 's~./media/catalog/product/~https://www.example.com/media/catalog/product/cache/0047d83143a5a3a4683afdf1116df680/~g' > images.txt
包囲戦

siegeの欠点は、同時実行が10に設定されている場合、10回以内にすべてのURLにアクセスすることです。

code language-shell 
siege --file=./images.txt --user-agent="image-resizer" --no-follow --no-parser --concurrent=10 --reps=once
curl
code language-shell 
xargs -0 -n 1 -P 10 curl -X HEAD -s -w "%{http_code} %{time_starttransfer} %{url_effective}\n" < <(tr \\n \\0 <images.txt)

-P引数によってスレッドの数が決まります。

ワンライナーをバッシュ

find/curlの例の1行目。画像が存在するのと同じコンピューターからcurlを実行できる場合に使用します。

code language-shell 
find ./media/catalog/product -path ./media/catalog/product/cache -prune -o -type f -print | sed 's~./media/catalog/product/~https://www.example.com/media/catalog/product/cache/0047d83143a5a3a4683afdf1116df680/~g' | xargs -n 1 -P 10 curl -X HEAD -s -w "%{http_code} %{time_starttransfer} %{url_effective}\n"

繰り返しますが、www.example.comをweb サイトのドメインに置き換え、-Pをクラッシュせずにサーバーが処理できるスレッド数に設定します。

出力は、ストア内のすべての商品画像のリストを返します。 利用可能なすべてのサーバーとプロセッサーのコアを使用して、画像（siegeまたはその他のweb クローラー）をクロールし、サイズ変更キャッシュを他のアプローチよりも大幅に高速で生成できます。

1つの画像キャッシュ URLにアクセスすると、画像がまだ存在しない場合は、すべての画像サイズがバックグラウンドで生成されます。 また、既にサイズが変更されているファイルはスキップされます。

NOTE
  • Adobe Commerceのクラウドインフラプロジェクトでは、Fastly サービスに商品イメージのサイズ変更をオフロードできます。 クラウドガイド​の深層画像最適化を参照してください。
  • リモートストレージモジュールを使用する場合は、画像のサイズをnginxにオフロードすることもできます。 設定ガイド​の「​ リモートストレージ用の画像サイズ変更の設定」を参照してください。
recommendation-more-help
commerce-operations-help-implementation-playbook