Primeiros passos do Image Processor

Otimize, redimensione, recorte e aplique filtros em suas imagens automaticamente, proporcionando mais velocidade e dinamismo à experiência do seu usuário nas suas aplicações web.

Ver como Markdown

Para configurar o Image Processor, siga os passos:

  1. Acesse o Azion Console > Applications.
  2. Selecione a application responsável pelo gerenciamento de suas imagens na lista de aplicações existentes ou adicione uma nova aplicação com a ajuda da página sobre criar uma aplicação.
  3. Na aba Cache Settings, adicione ou edite uma política de cache personalizada para suas imagens.
  4. Na seção Cache Expiration Policies, configure a política de expiração para suas imagens.

Para imagens, a Azion recomenda que você escolha valores maiores de time-to-live (TTL), como o Maximum TTL para o Cache Settings, que é de 7.776.000 segundos (3 meses).

  1. Na seçao Advanced Cache Key, selecione uma das opções:
  • Content varies by some Query String fields (Allowlist): se você desejar listar todos os campos da Query String que diferenciam suas imagens. O Image Processor utiliza o campo ims, que deverá ser incluído na listagem com os demais campos necessários por sua aplicação de gestão de imagens. Essa opção requer que o módulo Application Accelerator esteja ativado.
  • Content varies by Query String, except for some fields (Blacklist): se você desejar listar apenas quais campos da Query String devem ser ignorados ao diferenciar os objetos em cache. Nesse caso, garanta que o campo ims seja removido da listagem. Essa opção requer o módulo Application Accelerator esteja ativado.
  • Content varies by all Query String fields: se você não sabe ou não se sente seguro para listar os campos da Query String que são responsáveis pela variação do seu conteúdo em cache ou se não possui o produto Application Accelerator.
  1. Edite as configurações restantes conforme necessário e clique no botão Save.
  2. Na aba Rules Engine da application, adicione ou edite uma regra Request para um ou mais caminhos de imagem.
  3. Na seção Criteria, selecione a variável para indicar o caminho das imagens na sua origem:
    • If ${request_uri} matches \.(jpg|jpeg|gif|bmp|png|ico|webp|avif)
      Or:
    • If ${uri} matches \.(jpg|jpeg|gif|bmp|png|ico|webp|avif)$
  4. Na seção Behavior, selecione Set Cache Policy e selecione a configuração de cache que você criou.
  5. 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.

A partir desse momento, as imagens do path configurado serão processadas automaticamente.

Para redimensionar, cortar, otimizar, converter ou aplicar filtros a uma imagem, você precisará adicionar as query strings descritas na página Image Processor ao URL da imagem, o que pode ser feito usando uma function. Para ver o arquivo original, você só precisa remover a string de consulta adicionada no URL.

Para confirmar se a imagem está sendo otimizada, inspecione a página usando o navegador e localize o path correspondente na imagem. Na string de consulta do URL, o campo ims=VALUExVALUE corresponde à resolução carregada na página.

Além disso, o Image Processor detecta a compatibilidade do navegador com o formato WEBP e, quando possível, converterá o formato da imagem automaticamente. As imagens BMP também serão convertidas automaticamente para JPEG ou WEBP, dependendo da compatibilidade do navegador.