リモートストレージ用の画像サイズ変更の設定

最終更新日： 2026年10月12日

トピック：
設定
Storage

作成対象：

経験者
管理
開発者

デフォルトでは、Adobe Commerceはアプリケーション側での画像のサイズ変更をサポートしています。ただし、リモートストレージモジュールを有効にすることで、Nginxを使用して画像サイズをサーバーサイドにオフロードし、ディスクリソースを保存してディスク使用を最適化できます。

次の図は、Nginxがキャッシュ内の画像を取得、サイズ変更、および保存する方法を示しています。サイズ変更は、高さや幅など、URLに含まれるパラメーターによって決まります。

リモートストレージのNginx設定による画像サイズ変更サーバーブロック設定の表示

TIP

クラウドインフラストラクチャプロジェクト上のAdobe Commerceについては、クラウドインフラストラクチャ上のCommerceのリモートストレージの設定を参照してください

Adobe CommerceでのURL フォーマットの設定

サーバーサイドの画像のサイズを変更するには、Adobe Commerceを設定して、画像の高さ、幅、場所（URL）に関する引数を指定する必要があります。

サーバーサイドの画像サイズ変更用にCommerceを設定するには：

管理者 パネルで、Stores > Settings > Configuration > General > Webをクリックします。
右側のウィンドウで、Url optionsを展開します。
カタログメディア URL形式 セクションで、Use system valueをクリアします。
「カタログメディア URL形式」フィールドで「Image optimization based on query parameters URL」を選択します。
Save Configをクリックします。
Nginx設定に進みます。

Nginxの設定

サーバーサイド画像のサイズ変更を引き続き設定するには、nginx.conf ファイルを準備し、選択したアダプターにproxy_pass値を指定する必要があります。

Nginxによる画像サイズの変更を有効にするには:

Nginx画像フィルターモジュールをインストールします。

code language-shell
`load_module /etc/nginx/modules/ngx_http_image_filter_module.so;`

含まれているテンプレート nginx.conf.sample ファイルに基づいてnginx.conf ファイルを作成します。例：

code language-conf

location ~* \.(jpg|jpeg|png|gif|webp)$ {
    set $width "-";
    set $height "-";
    if ($arg_width != '') {
        set $width $arg_width;
    }
    if ($arg_height != '') {
        set $height $arg_height;
    }
    image_filter resize $width $height;
    image_filter_jpeg_quality 90;
}

[オプション]特定のアダプタにproxy_pass値を設定します。
- Amazon Simple Storage Service （Amazon S3）

recommendation-more-help

commerce-operations-help-configuration