リモートストレージの画像のサイズ変更の設定
デフォルトでは、Adobe Commerceは、アプリケーション側での画像のサイズ変更をサポートします。 ただし、リモートストレージモジュールを有効にすると、Nginx を使用して画像のサイズ変更をサーバー側にオフロードでき、ディスクリソースを節約し、ディスク使用量を最適化できます。
次の図は、Nginx が画像を取得、サイズ変更、およびキャッシュに格納する方法を示しています。 サイズ変更は、URL に含まれているパラメーター（高さや幅など）によって決まります。
Adobe Commerceでの URL フォーマットの設定
サーバーサイドで画像のサイズを変更するには、Adobe Commerceを設定して、画像の高さ、幅および場所（URL）の引数を指定する必要があります。
サーバーサイド画像のサイズ変更用にCommerceを設定するには:
-
管理者 パネルで、Stores/Settings/Configuration/General/Web をクリックします。
-
右側のペインで Url options を展開します。
-
「カタログメディアの URL 形式」セクションで、Use system value をオフにします。
-
Image optimization based on query parametersカタログメディア URL 形式 フィールドで 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ファイルに基づいてnginx.conf.sampleファイルを作成します。 例：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値を設定します。