Primeiros passos do Image Processor

Para configurar o Image Processor, siga os passos:

  1. Acesse o [Azion Console] (https://console.azion.com/).
  2. No canto superior esquerdo da página, selecione Products menu > Edge Application.
  3. Selecione a edge application responsável pelo gerenciamento de suas imagens na lista de aplicativos existentes ou adicione um novo aplicativo com a ajuda do Ponto de partida.
  4. Na aba Cache Settings, adicione ou edite uma política de cache personalizada para suas imagens.
  5. Na seção Expiration Settings, configure a política de expiração para suas imagens.
  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 (Blocklist): 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 edge 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)

    Ou:

    If ${uri} matches \.(jpg|jpeg|gif|bmp|png)$

  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.

  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 edge 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.

Contribuidores