DocumentationCommerceConfiguration Guide

Configure image resizing for remote storage

Last update: Tue May 16 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Experienced
  • Admin
  • Developer

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.

image resize

TIP
For Adobe Commerce on cloud infrastructure projects, see Configure remote storage for Commerce on Cloud infrastructure

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.

    code language-shell 
    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:

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

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