# Primeiros passos do Image Processor

Para configurar o [Image Processor](/pt-br/documentacao/produtos/build/applications/image-processor/), siga os passos:

1. Acesse o [Azion Console](/pt-br/documentacao/produtos/guias/como-acessar-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](/pt-br/documentacao/produtos/guias/build/criar-uma-aplicacao/).
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](/pt-br/documentacao/produtos/build/applications/cache-settings/#browser-cache-settings) para suas imagens.

:::tip
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).
:::

5. 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](/pt-br/documentacao/produtos/build/applications/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](/pt-br/documentacao/produtos/build/applications/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**.

:::caution
Para garantir o processamento adequado das imagens, o parâmetro de query string `ims=` deve ser o último parâmetro na URL. Se quaisquer parâmetros de query string adicionais forem incluídos após `ims=`, a requisição pode retornar um erro **504**.

Exemplo de uma URL **válida**: *example.com/image.jpeg?ts=1234&ims=1000x1000*

Exemplo de uma URL **inválida** (causa erro 504): *example.com/image.jpeg?ims=1000x1000&ts=1234*
:::

6. Edite as configurações restantes conforme necessário e clique no botão **Save**.
7. Na aba **Rules Engine** da application, adicione ou edite uma regra **Request** para um ou mais caminhos de imagem.
8. 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)`<br/>
        Or:
    - If `${uri}` matches `\.(jpg|jpeg|gif|bmp|png|ico|webp|avif)$`
9. Na seção **Behavior**, selecione **Set Cache Policy** e selecione a configuração de cache que você criou.
10. Adicione o comportamento **Optimize Images**.

:::note[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`.
:::

:::note[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`.
:::


11. 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](/pt-br/documentacao/produtos/build/applications/image-processor/) ao URL da imagem, o que pode ser feito usando uma [function](/pt-br/documentacao/produtos/build/applications/functions/). 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](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) 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.

---