DocumentaçãoCommerceGuia do Commerce na nuvem

[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."}

Otimização rápida de imagens

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Administrador
  • Desenvolvedor

O Fastly image otimization (Fastly IO) fornece manipulação e otimização de imagem em tempo real para acelerar a entrega de imagens e simplificar a manutenção de conjuntos de fontes de imagem para aplicativos web responsivos. Uma vez configurado, o Fastly IO fornece os seguintes recursos de otimização de imagem:

  • Forçar conversão com perdas
  • Otimização profunda de imagem
  • Taxas de pixels adaptáveis
  • Suporte para formatos comuns de imagem: PNG, JPEG, GIF e WebP

Antes de ativar e configurar a opção Fastly IO, você deve configurar o serviço Fastly e configurar a blindagem do Origin.

Com base nas suas configurações, o trecho Fastly Image Otimization (Fastly IO) insere o código VCL para executar a otimização de imagem que acelera a entrega da imagem do produto na loja. Há três etapas para configurar o Fastly IO: Habilitar, Configurar e Verificar.

Habilitar Fastly IO

Ative a otimização de imagem do Fastly (Fastly IO) no painel Admin fazendo upload do trecho do Fastly IO VCL. O snippet fornece as instruções de configuração do Fastly para processar todas as imagens por meio de otimizadores de imagem, usando as configurações padrão.

Pré-requisitos:

Para habilitar o Fastly IO:

  1. Faça logon como administrador no painel Administrador local.

  2. Selecione Lojas > Configurações > Configuração > Avançadas > Sistema.

  3. No painel direito, expanda Cache de Página Inteira.

  4. Selecione Configuração do Fastly > Otimização de Imagem para especificar as definições de configuração.

  5. No campo Fastly IO, selecione Enable/Disable.

  6. Carregue o trecho Fastly IO:

    • Selecione Opções de configuração de E/S padrão para abrir a página Opções de configuração padrão de otimização de imagem.
    • Selecione Carregar para carregar o trecho de VCL para o servidor.

Configurar o Fastly IO

Revise e atualize as definições de configuração de E/S padrão para otimização de imagem, conforme necessário. Por exemplo, você pode querer alterar os níveis de qualidade WebP e JPEG para formatos com perdas, ou alterar o formato para veicular imagens JPEG para Progressivo ou Linha de Base. Além disso, você pode usar o Fastly IO para obter recursos de otimização de imagem mais granulares, como:

  • Forçar conversão com perdas
  • Otimização profunda de imagem
  • Taxas de pixels adaptáveis

Para atualizar o Fastly IO:

  1. Na página Configuração do Fastly no campo Opções de configuração de E/S Padrão, selecione Configurar.

    Exibir as configurações do Fastly IO

  2. Revise e atualize as definições de configuração do Fastly IO na página Opções de configuração padrão de otimização de imagem:

    Revisar a configuração do Fastly IO

    • WebP Automático?—deixe a configuração padrão (Yes) para converter imagens para o formato WebP nos navegadores que suportam esse formato. Se você alterar a configuração para Não, o Fastly usará o tipo de arquivo de imagem, em vez de converter a imagem para o formato WebP.

    • Qualidade padrão de WebP (com perdas)—deixe a configuração padrão (85) ou digite o nível de compactação para imagens formatadas em arquivo com perdas. Você pode especificar qualquer número inteiro de 1 a 100.

    • Controles de formato de JPEG padrão — mantenha a configuração padrão (Auto) ou selecione o tipo de JPEG a ser usado ao veicular uma imagem. Se o valor for definido como Auto, o Fastly entrega imagens com o tipo de saída correspondente ao tipo de entrada. Selecione Linha de Base para exibir imagens linha por linha, começando pela parte superior esquerda e indo até a parte inferior direita. Selecione Progressivo para exibir uma imagem borrada que ficará clara durante o carregamento.

    • Qualidade de JPEG padrão—deixe a configuração padrão (85) ou digite o nível de compactação para obter a qualidade dos formatos de arquivo com perdas. Especifique qualquer número inteiro de 1 a 100.

    • Permitir upscaling?—deixe a configuração padrão (No) ou selecione Yes para retornar imagens maiores que o arquivo de origem original para que elas possam caber nas dimensões solicitadas.

    • Redimensionar filtro—deixe a configuração padrão (Lancsoz3) ou selecione uma alternativa. Essa configuração especifica o filtro usado para fornecer uma imagem redimensionada. Dependendo do filtro selecionado, a imagem redimensionada pode ter um número de pixels maior ou menor.

      • Lanczos3 (padrão) — Fornece a imagem de melhor qualidade. Ele aumenta a capacidade de detectar bordas e recursos lineares em uma imagem e usa a reamostragem de sinc ​para fornecer a melhor reconstrução possível.
      • Lanczos2 — Usa o mesmo filtro que Lancsoz3, mas com uma aproximação menos precisa da função de reamostragem sinc.
      • Bicubic — Tem um efeito de nitidez natural ao tornar uma imagem menor.
      • Bilinear — Tem um efeito de suavização natural ao tornar uma imagem maior.
      • Nearest — Tem um efeito de pixelização natural ao redimensionar a arte de pixels.

  3. Depois de especificar as definições de configuração de E/S para o serviço Fastly, selecione Cancelar para retornar às definições de configuração do Fastly.

  4. No campo Configuração de otimização de imagem Habilitar otimização de imagem profunda, selecione Sim para ativar a otimização de imagem profunda.

    Habilitar a otimização de imagem profunda do Fastly IO

    A otimização de imagem profunda está desativada por padrão. Quando esse recurso está ativado, o recurso de redimensionamento integrado no Adobe Commerce é desativado e o trabalho de redimensionamento é descarregado para o serviço Fastly IO. A otimização de imagem se aplica somente a imagens de produtos. As imagens do CMS não são redimensionadas. Consulte a documentação do Fastly.

  5. Depois de habilitar a otimização de imagens profundas, habilite o recurso proporções de pixel adaptáveis para gerar imagens otimizadas para uso em sites responsivos.

    Habilitar proporções de pixel adaptáveis do Fastly IO

    • No campo Habilitar proporções de pixel do dispositivo adaptável, selecione Sim.
    • No campo Taxas de pixels do dispositivo, aceite a configuração padrão ou marque a caixa de seleção Entrada do sistema para remover a configuração. Em seguida, selecione a proporção desejada. Uma configuração de proporção de pixels de dispositivo mais alta oferece imagens maiores.

  6. Selecione Salvar Configuração.

Forçar conversão com perdas

Por padrão, o serviço Fastly IO força a conversão de formatos sem perdas, como PNG, BMP ou WEBP, para o formato JPEG/WEBP.

A vantagem de forçar conversões com perdas é que imagens menores são servidas.
Por exemplo, usando o formato JPEG ou WEBp em vez de PNG, o tamanho pode ser reduzido em 60 a 70%, dependendo do nível de qualidade especificado na configuração do Fastly IO.

Dependendo do nível de qualidade selecionado para otimização de imagem, você pode perceber diferenças visuais nas imagens. Por exemplo, o canal/transparências de Alpha são removidos e substituídos por um plano de fundo branco, a menos que você use a Otimização de imagem profunda, que usa a cor do plano de fundo do seu tema.

Se você desativar a conversão com perdas (WebP Auto? = No), o Fastly IO alterará apenas imagens JPEG para o formato WEBP para navegadores compatíveis. Nenhum outro tipo de imagem foi alterado. Por exemplo, se a imagem original for PNG, a saída do serviço Fastly IO será PNG.

Otimização profunda de imagem

A otimização de imagem profunda está desativada por padrão. Habilitar essa opção desativa o redimensionamento interno do Adobe Commerce e o descarrega completamente no serviço Fastly IO.
Este recurso redimensiona apenas imagens do produto. As imagens do CMS não são redimensionadas.

A ativação da otimização de imagens profundas adiciona uma definição de cor de plano de fundo a cada imagem, conforme definido no seu tema. Como resultado, as imagens WebP são trocadas de WebP sem perdas para WebP com perdas. Uma das principais diferenças entre sem perda e com perda é que as perdas descartam o canal alfa de imagens PNG, que fornece imagens muito menores. No entanto, imagens com transparências podem parecer estranhas em páginas de produtos e campanhas que usam um plano de fundo diferente.

Por exemplo, o código a seguir representa a fonte original de uma imagem do tema Luma:

<img class="product-image-photo"
     src="https://mymagentosite/pub/media/catalog/product/cache/f073062f50e48eb0f0998593e568d857/m/b/mb02-gray-0.jpg"
     width="240"
     height="300"
     alt="Fusion Backpack"/>

Quando o recurso de otimização de imagem Fastly IO Deep está habilitado, o código fonte original da imagem é regravado conforme mostrado no exemplo a seguir:

<img class="product-image-photo"
     src="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds"
     width="240"
     height="300"
     alt="Fusion Backpack"/>

Taxas de pixels adaptáveis

O recurso proporções de pixel adaptáveis é útil para otimizar imagens para aplicativos web progressivos. Ele permite que você forneça vários tamanhos e resoluções de imagem de um arquivo de origem de imagem, adicionando um srcset para cada imagem de produto.

Quando o recurso proporções de pixel adaptáveis está habilitado, o serviço Fastly IO fornece uma imagem de largura fixa que pode se adaptar a device-pixel-ratios variados.
Por exemplo, o serviço modifica a definição da imagem do produto conforme mostrado no exemplo a seguir:

<img class="product-image-photo"
     srcset="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds&dpr=2 2x,
  https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds&dpr=3 3x"
     src="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds"
     width="240"
     height="300"
     alt="Fusion Backpack"/>

Consulte srcset suporte a navegador e especificação.

Validar o Fastly IO

Depois de habilitar e configurar o Fastly IO, valide sua configuração executando testes de velocidade de página da Web com e sem o Fastly IO habilitado. Além disso, revise as imagens no armazenamento para verificar o tamanho e a aparência da imagem quanto a problemas.

recommendation-more-help
7c2b03ac-000c-497d-aba3-2c6dc720a938