DocumentaçãoCommerceGuia de configuração

Configurar redimensionamento de imagem para armazenamento remoto

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

Criado para:

  • Experiente
  • Administrador
  • Desenvolvedor

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.

redimensionamento da imagem

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