DocumentaciónCommerceGuía de configuración

Configurar el cambio de tamaño de la imagen para almacenamiento remoto

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

Creado para:

  • Experimentado
  • Administrador
  • Desarrollador

De forma predeterminada, Adobe Commerce admite el cambio de tamaño de las imágenes en la aplicación. Sin embargo, al habilitar el módulo Almacenamiento remoto, puede utilizar Nginx para descargar el cambio de tamaño de la imagen en el servidor, donde puede ahorrar recursos de disco y optimizar el uso del disco.

El diagrama siguiente muestra cómo Nginx recupera, cambia de tamaño y almacena imágenes en la caché. El cambio de tamaño viene determinado por los parámetros incluidos en la dirección URL, como la altura y la anchura.

cambio de tamaño de imagen

TIP
Para Adobe Commerce sobre proyectos de infraestructura en la nube, consulte Configuración del almacenamiento remoto para Commerce en la infraestructura en la nube

Configuración del formato de URL en Adobe Commerce

Para cambiar el tamaño de las imágenes en el servidor, debe configurar Adobe Commerce para que proporcione argumentos para la altura, la anchura y la ubicación (URL) de la imagen.

Para configurar Commerce para cambiar el tamaño de las imágenes del lado del servidor:

  1. En el panel Admin, haga clic en Stores > Settings > Configuration > General > Web.

  2. En el panel derecho, expanda Url options.

  3. En la sección Formato de URL de medios de catálogo, borre Use system value.

  4. Seleccione la URL Image optimization based on query parameters en el campo Formato de URL de medios del catálogo.

  5. Haga clic en Save Config.

  6. Continúe con la configuración de Nginx.

Configuración De Nginx

Para seguir configurando el cambio de tamaño de las imágenes del lado del servidor, debe preparar el archivo nginx.conf y proporcionar un valor proxy_pass para el adaptador seleccionado.

Para permitir que Nginx cambie el tamaño de las imágenes:

  1. Instale Nginx image filter module.

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

  2. Crear un archivo de nginx.conf basado en el archivo de plantilla nginx.conf.sample incluido. Por ejemplo:

    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. [Opcional] Configure un valor de proxy_pass para su adaptador específico.

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