Como otimizar o processamento de imagens no edge

Descubra como o Image Processor da Azion permite ajustar tamanhos de imagem, adicionar filtros e converter formatos, otimizando a entrega de conteúdo e reduzindo custos.

Ver como Markdown

Através do módulo Image Processor, você pode ajustar tamanhos de imagem, adicionar filtros e marcas d’água, ou converter formatos para adequar a entrega de conteúdo mais eficiente, economia de largura de banda e reduzir os custos de armazenamento de objetos. Essas alterações podem ser aplicadas diretamente na URL da sua imagem, anexando queries ims à URL da imagem.

Nesse guia existem instruções separadas para API v3 e API v4. Se você não tem certeza de quais etapas se aplicam à sua conta, consulte este guia para determinar se sua conta já foi migrada.

  1. Acesse o Azion Console > Application.
  2. Clique na application que você deseja configurar.
  3. Ative os módulos Application Accelerator e Image Processor.
  4. Clique no botão Save.
  5. Navegue até a aba Cache Settings.
  6. Clique no botão + Cache Setting.
  7. Na seção Cache Expiration Policies, configure a política de expiração para suas imagens.
  • Para imagens, você pode adicionar valores de tempo de vida (TTL) maiores, como 1296000 segundos (15 dias).
  1. Na seção Advanced Cache Key, escolha uma das seguintes opções:
    • O conteúdo varia por alguns campos de Query String (Allowlist): se você deseja listar todos os campos na query string que identificarão suas imagens. Image Processor usa o campo ims, então este deve ser incluído na lista como um dos campos necessários para sua aplicação de gerenciamento de imagens.
    • O conteúdo varia pela Query String, exceto por alguns campos (Blocklist): se você deseja listar apenas aqueles campos na query string que devem ser ignorados para identificar os objetos em seu cache. Neste caso, garante que o campo ims será removido da lista.
    • O conteúdo varia por todos os campos de Query String: se você não sabe ou não tem certeza sobre quais campos listar na query string porque não é responsável por todo o conteúdo no cache ou não tem Application Accelerator ativado.
  2. Clique no botão Save.

Agora você precisa indicar o que acionará a ativação do módulo Image Processor. Você pode criar uma regra que identifica formatos de imagem da seguinte maneira:

  1. Ainda na página Application, navegue até a aba Rules Engine.
  2. Clique no botão + Rule.
  3. Nomeie sua regra.
  4. Selecione Request Phase.
  5. Na seção Criteria, selecione a variável ${request_uri}.
  6. Selecione o operador de comparação matches.
  7. Como argumento, adicione \.(jpg|jpeg|gif|bmp|png).
  8. Clique em + Or para adicionar outro critério.
  9. No novo campo, selecione a variável ${uri}.
  10. Selecione o operador de comparação matches.
  11. Como argumento, adicione \.(jpg|jpeg|gif|bmp|png)$.
  12. Na seção Behaviors, selecione Set Cache Policy e selecione a configuração de cache que você criou.
  13. Clique no botão + Add Behavior.
  14. Adicione o comportamento Optimize Images.

Opcional — Para garantir que as imagens sejam convertidas com sucesso para o formato WEBP, você também deve adicionar o comportamento Add Request Header e enviar o cabeçalho Accept: image/webp.

Opcional — Para garantir que as imagens sejam convertidas com sucesso para o formato AVIF, você também deve adicionar o comportamento Add Request Header e enviar o cabeçalho Accept: image/avif.

  1. Clique no botão Save para salvar sua regra.

Para confirmar se sua imagem está sendo otimizada, inspecione a página usando seu navegador e encontre o caminho correspondente na imagem. Na query string da URL, o campo ims=VALUExVALUE corresponde à resolução carregada na página. Para ver o arquivo original, você só precisa remover a query string adicionada na URL.