ドキュメントCommerce設定ガイド

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 経験者
  • 管理者
  • 開発者

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

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

画像のサイズ変更

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

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

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

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

  1. 管理者 パネルで、Stores/Settings/Configuration/General/Web をクリックします。

  2. 右側のペインで Url options を展開します。

  3. 「カタログメディアの URL 形式」セクションで、Use system value をオフにします。

  4. カタログメディア URL 形式 フィールドで Image optimization based on query parameters URL を選択します。

  5. 「Save Config」をクリックします。

  6. Nginx 設定を続行します。

Nginx の設定

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

Nginx で画像のサイズを変更するには:

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

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

  2. 含まれているテンプレート 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;
}

  3. [オプション] 特定のアダプタの proxy_pass 値を設定します。

recommendation-more-help
386822bd-e32c-40a8-81c2-ed90ad1e198c