[Somente PaaS]{class="badge informative" title="Aplica-se somente a projetos do Adobe Commerce na nuvem (infraestrutura do PaaS gerenciada pela Adobe) e a projetos locais."}

Configurar redimensionamento de imagem para armazenamento remoto

Por padrão, o Adobe Commerce oferece suporte ao redimensionamento de imagens no lado do aplicativo. No entanto, ao ativar o módulo de Armazenamento remoto, você pode usar o Nginx para descarregar o redimensionamento de imagens no lado do servidor, onde é possível salvar recursos de disco e otimizar o uso do disco.

O diagrama a seguir mostra como o Nginx recupera, redimensiona e armazena imagens no cache. O redimensionamento é determinado pelos parâmetros incluídos no URL, como altura e largura.

Configuração de nginx para redimensionamento de imagem de armazenamento remoto mostrando as configurações de bloco do servidor

TIP
Para projetos do Adobe Commerce na infraestrutura em nuvem, consulte Configurar armazenamento remoto para a infraestrutura do Commerce na nuvem

Configurar formato de URL no Adobe Commerce

Para redimensionar imagens no lado do servidor, você deve configurar o Adobe Commerce para fornecer argumentos para a altura, a largura e o local (URL) da imagem.

Para configurar o Commerce para redimensionamento de imagem do lado do servidor:

  1. No painel Admin, clique em Stores > Settings > Configuration > General > Web.

  2. No painel direito, expanda Url options.

  3. Na seção Formato da URL de mídia de catálogo, desmarque Use system value.

  4. Selecione a URL Image optimization based on query parameters no campo Formato da URL de mídia de catálogo.

  5. Clique em Save Config.

  6. Prossiga para a Configuração do Nginx.

Configurar Nginx

Para continuar configurando o redimensionamento de imagem do lado do servidor, você deve preparar o arquivo nginx.conf e fornecer um valor de proxy_pass para o adaptador escolhido.

Para permitir que o Nginx redimensione imagens:

  1. Instale o módulo do filtro de imagem Nginx.

    code language-shell
    load_module /etc/nginx/modules/ngx_http_image_filter_module.so;
    
  2. Crie um arquivo nginx.conf com base no arquivo de modelo nginx.conf.sample incluído. Por exemplo:

    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 um valor de proxy_pass para o adaptador específico.

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