Configure image resizing for remote storage

By default, Adobe Commerce supports image resizing on the application side. However, by enabling the Remote Storage module, you can use Nginx to offload image resizing to the server side, where you can save disk resources and optimize disk usage.

The following diagram shows how Nginx retrieves, resizes, and stores images in the cache. Resizing is determined by the parameters included in the URL, such as height and width.

Configure URL format in Adobe Commerce

To resize images on the server side, you must configure Adobe Commerce to provide arguments for the height, width, and location (URL) of the image.

To configure Commerce for server-side image resizing:

1. In the Admin panel, click Stores > Settings > Configuration > General > Web.

2. In the right pane, expand Url options.

3. In the Catalog media URL format section, clear Use system value.

4. Select the Image optimization based on query parameters URL in the Catalog media URL format field.

5. Click Save Config.

6. Continue to the Nginx configuration.

Configure Nginx

To continue configuring server-side image resizing, you must prepare the nginx.conf file and provide a proxy_pass value for your chosen adapter.

To enable Nginx to resize images:

1. Install the Nginx image filter module.

   load_module /etc/nginx/modules/ngx_http_image_filter_module.so;
   

2. Create an nginx.conf file based on the included template nginx.conf.sample file. For example:

   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. [Optional] Configure a proxy_pass value for your specific adapter.

   • Amazon Simple Storage Service (Amazon S3)

Business.Adobe.com resources