Otimização rápida de imagens
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:
- Instalar ou atualizar para o módulo Fastly versão 1.2.62 ou posterior
- Configuração do escudo Fastly Origin e back-end
Para habilitar o Fastly IO:
-
Faça logon como administrador no painel Administrador local.
-
Selecione Lojas > Configurações > Configuração > Avançadas > Sistema.
-
No painel direito, expanda Cache de Página Inteira.
-
Selecione Configuração do Fastly > Otimização de Imagem para especificar as definições de configuração.
-
No campo Fastly IO, selecione Enable/Disable.
-
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:
-
Na página Configuração do Fastly no campo Opções de configuração de E/S Padrão, selecione Configurar.
-
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:
-
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 selecioneYespara 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 queLancsoz3, 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.
-
-
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.
-
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.
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 CMS não são redimensionadas. Consulte a documentação do Fastly.
-
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.
- 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.
-
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 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.