# Como otimizar o processamento de imagens no edge

import Tabs from '~/components/tabs/Tabs'
import Apiv4Rollout from '~/includes/snippets/apiv4Rollout/pt/snippet.mdx'
import Code from '~/components/Code/Code.astro'

<Apiv4Rollout />

Através do módulo [Image Processor](/pt-br/documentacao/produtos/build/applications/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.

:::caution[atenção]
Se você deseja otimizar suas imagens, além do módulo **Image Processor**, a ativação do módulo [Application Accelerator](/pt-br/documentacao/produtos/build/applications/application-accelerator/) é recomendada para eficiência de cache. Se esses módulos estiverem ativados, imagens processadas e transferência de dados podem gerar custos relacionados ao uso. Consulte a [página de preços](/pt-br/documentacao/produtos/precos/) para mais informações.
:::

:::tip
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](/pt-br/documentacao/produtos/guias/verificar-migracao-conta/) para determinar se sua conta já foi migrada.
:::

---

<Tabs client:visible>
    <Fragment slot="tab.console">Console</Fragment>
    <Fragment slot="tab.apiv3">API v3</Fragment>
    <Fragment slot="tab.apiv4">API v4</Fragment>

<Fragment slot="panel.console">
1. Acesse o [Azion Console](/pt-br/documentacao/produtos/guias/como-acessar-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](/pt-br/documentacao/produtos/build/applications/cache-settings/#browser-cache-settings) 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](/pt-br/documentacao/produtos/build/applications/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**.

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

15. Clique no botão **Save** para salvar sua regra.

Para confirmar se sua imagem está sendo otimizada, [inspecione a página](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) 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.
</Fragment>

<Fragment slot="panel.apiv4">

1. Execute a seguinte requisição `PATCH` em seu terminal, substituindo `[TOKEN VALUE]` por seu [personal token](/pt-br/documentacao/produtos/guias/personal-tokens/) e a variável `<application_id>` por [seu ID de application](/pt-br/documentacao/produtos/guias/build/definir-configuracoes-principais/) para ativar os módulos [Application Accelerator](/pt-br/documentacao/produtos/build/applications/application-accelerator/) e [Image Processor](/pt-br/documentacao/produtos/build/applications/image-processor/):

<Code lang="bash" code={` 
curl --request PATCH \
  --url https://api.azion.com/v4/edge_application/applications/<application_id> \
  --header 'Accept: application/json' \
  --header 'Authorization: Token [TOKEN VALUE]]' \
  --header 'Content-Type: application/json' \
  --data '{
  "modules": {
    "application_accelerator": {
      "enabled": true
    },
    "image_processor": {
      "enabled": true
    }
  },
  "active": true,
  "debug": false
}'
`} />

2. Você receberá uma resposta com o valor atualizado.
3. Execute a seguinte requisição `POST` em seu terminal, substituindo `[TOKEN VALUE]` por seu [personal token](/pt-br/documentacao/produtos/guias/personal-tokens/) e a variável `<application_id>` pelo `id` de sua application:

<Code lang="bash" code={` 
curl --request POST \
  --url https://api.azion.com/v4/edge_application/applications/<application_id>/cache_settings \
  --header 'Accept: application/json' \
  --header 'Authorization: Token [TOKEN VALUE]' \
  --header 'Content-Type: application/json' \
  --data '{
  "name": "QS15D img",
  "browser_cache": {
    "behavior": "override",
    "max_age": 60
  },
  "modules": {
    "edge_cache": {
      "behavior": "override",
      "max_age": 1296000
    },
    "application_accelerator": {
      "cache_vary_by_method": [
        "options"
      ],
      "cache_vary_by_querystring": {
        "behavior": "allowlist",
        "fields": ["ims"],
        "sort_enabled": true
      },
      "cache_vary_by_cookies": {
        "behavior": "ignore",
        "cookie_names": []
      },
      "cache_vary_by_devices": {
        "behavior": "ignore"
      }
    }
  }
}'
`} />

:::note
Para mais informações sobre o endpoint de configurações de cache, consulte o guia sobre [como ajustar suas configurações de cache](/pt-br/documentacao/produtos/guias/build/ajustar-cache-settings/).
:::

4. Você receberá uma resposta semelhante a esta:

<Code lang="json" code={` 
{
  "state": "executed",
  "data": {
    "id": <cache_setting_id>,
    "name": "QS15D img",
    "browser_cache": {
      "behavior": "override",
      "max_age": 60
    },
    "modules": {
      "edge_cache": {
        "behavior": "override",
        "max_age": 1296000,
        "stale_cache": {
          "enabled": false
        },
        "large_file_cache": {
          "enabled": false,
          "offset": 1024
        }
      },
      "tiered_cache": null,
      "application_accelerator": {
        "cache_vary_by_method": [
          "options"
        ],
        "cache_vary_by_querystring": {
          "behavior": "allowlist",
          "fields": [
            "ims"
          ],
          "sort_enabled": true
        },
        "cache_vary_by_cookies": {
          "behavior": "ignore",
          "cookie_names": []
        },
        "cache_vary_by_devices": {
          "behavior": "ignore",
          "device_group": []
        }
      }
    }
  }
}
`} />

5. Copie o ID da configuração de cache recebido na resposta.
6. Execute a seguinte requisição `POST` para criar uma regra na **Request Phase**, substituindo o valor do ID da application e o ID de configuração de cache que você recebeu na resposta anterior:

<Code lang="bash" code={` 
curl --request POST \
  --url https://api.azion.com/v4/edge_application/applications/<application_id>/request_rules \
  --header 'Accept: application/json' \
  --header 'Authorization: Token [TOKEN VALUE]' \
  --header 'Content-Type: application/json' \
  --data '{
    "name": "ImgProcessor",
    "active": true,
    "criteria": [
      [
        {
          "variable": "\${request_uri}",
          "operator": "matches",
          "conditional": "if",
          "input_value": "\\.(jpg|jpeg|gif|bmp|png)"
        },
        {
          "variable": "\${uri}",
          "operator": "matches",
          "conditional": "or",
          "input_value": "\\.(jpg|jpeg|gif|bmp|png)$"
        }
      ]
    ],
    "behaviors": [
      {
        "type": "set_cache_settings",
        "cache_settings_id": "<cache_settings_id>"
      },
      {
        "type": "optimize_images"
      }
    ],
    "description": "Apply cache settings and optimize images"
  }'
`} />

:::note
Para mais informações sobre o endpoint de regras, consulte o guia sobre [como trabalhar com Rules Engine](/pt-br/documentacao/produtos/guias/build/trabalhar-com-rules-engine/).
:::

Para confirmar se sua imagem está sendo otimizada, [inspecione a página](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) 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.

:::tip
Confira a [documentação da API da Azion](https://api.azion.com/) e a [especificação OpenAPI](https://github.com/aziontech/azionapi-openapi/) para saber mais sobre todos os recursos disponíveis via API.
:::

</Fragment>

<Fragment slot="panel.apiv3">
1. Execute a seguinte requisição `PATCH` em seu terminal, substituindo `[TOKEN VALUE]` por seu [personal token](/pt-br/documentacao/produtos/guias/personal-tokens/) e a variável `<application_id>` por [seu ID de application](/pt-br/documentacao/produtos/guias/build/definir-configuracoes-principais/) para ativar os módulos [Application Accelerator](/pt-br/documentacao/produtos/build/applications/application-accelerator/) e [Image Processor](/pt-br/documentacao/produtos/build/applications/image-processor/):

<Code lang="bash" code={` 
curl --location --request PATCH 'https://api.azionapi.net/edge_applications/<application_id>' \
--header 'Accept: application/json; version=3' \
--header 'Content-Type: application/json' \
--header 'Authorization: Token [TOKEN VALUE]' \
--data '{
    "application_acceleration": true,
    "image_optimization": true
}'
`} />

2. Você receberá uma resposta com o valor atualizado.
3. Execute a seguinte requisição `POST` em seu terminal, substituindo `[TOKEN VALUE]` por seu [personal token](/pt-br/documentacao/produtos/guias/personal-tokens/) e a variável `<application_id>` pelo `id` de sua application:

<Code lang="bash" code={` 
curl --location 'https://api.azionapi.net/edge_applications/<application_id>/cache_settings' \
--header 'Accept: application/json; version=3' \
--header 'Content-Type: application/json' \
--header 'Authorization: Token [TOKEN VALUE]' \
--data '{
    "name": "QS15D img",
    "browser_cache_settings": "override",
    "browser_cache_settings_maximum_ttl": 60,
    "cdn_cache_settings": "override",
    "cdn_cache_settings_maximum_ttl": 1296000,
    "cache_by_query_string": "whitelist",
    "query_string_fields": [
        "ims"
    ]
}'
`} />

:::note
Para mais informações sobre o endpoint de configurações de cache, consulte o guia sobre [como ajustar suas configurações de cache](/pt-br/documentacao/produtos/guias/build/ajustar-cache-settings/).
:::

4. Você receberá uma resposta semelhante a esta:

<Code lang="json" code={` 
{
    "results": {
        "id": <cache_setting_id>,
        "name": "QS15D img",
        "browser_cache_settings": "override",
        "browser_cache_settings_maximum_ttl": 60,
        "cdn_cache_settings": "override",
        "cdn_cache_settings_maximum_ttl": 1296000,
        "cache_by_query_string": "whitelist",
        "query_string_fields": [
            "ims"
        ],
        "enable_query_string_sort": false,
        "cache_by_cookies": "ignore",
        "cookie_names": null,
        "adaptive_delivery_action": "ignore",
        "device_group": [],
        "enable_caching_for_post": false,
        "l2_caching_enabled": false,
        "is_slice_configuration_enabled": false,
        "is_slice_edge_caching_enabled": false,
        "is_slice_l2_caching_enabled": false,
        "slice_configuration_range": 1024,
        "enable_caching_for_options": false,
        "enable_stale_cache": true,
        "l2_region": null
    }
}
`} />

5. Copie o ID da configuração de cache recebido na resposta.
6. Execute a seguinte requisição `POST` para criar uma regra na **Request Phase**, substituindo o valor do ID da application e o ID de configuração de cache que você recebeu na resposta anterior:

<Code lang="bash" code={` 
curl --location --globoff 'https://api.azionapi.net/edge_applications/<application_id>/rules_engine/request/rules' \
--header 'Accept: application/json; version=3' \
--header 'Authorization: Token [TOKEN VALUE]' \
--header 'Content-Type: application/json' \
--data '{
    "name": "ImgProcessor",
    "behaviors": [
        {
            "name": "set_cache_policy",
            "target": "<cache_settings_id>"
        },
        {
            "name": "optimize_images",
            "target": null
        }
    ],
    "criteria": [
        [
            {
                "variable": "\${request_uri}",
                "operator": "matches",
                "conditional": "if",
                "input_value": "\\.(jpg|jpeg|gif|bmp|png)"
            },
            {
                "variable": "\${uri}",
                "operator": "matches",
                "conditional": "or",
                "input_value": "\\.(jpg|jpeg|gif|bmp|png)$"
            }
        ]
    ]
}'
`} />

:::note
Para mais informações sobre o endpoint de regras, consulte o guia sobre [como trabalhar com Rules Engine](/pt-br/documentacao/produtos/guias/build/trabalhar-com-rules-engine/).
:::

7. Você receberá a seguinte resposta:

<Code lang="json" code={` 
{
    "results": {
        "id": <rule_id>,
        "name": "ImgProcessor",
        "phase": "request",
        "behaviors": [
            {
                "name": "set_cache_policy",
                "target": "132186"
            },  
            {
                "name": "optimize_images",
                "target": null
            }
        ],
        "criteria": [
            [
                {
                    "variable": "\${request_uri}",
                    "operator": "matches",
                    "conditional": "if",
                    "input_value": "\\.(jpg|jpeg|gif|bmp|png)"
                },
                {
                    "variable": "\${uri}",
                    "operator": "matches",
                    "conditional": "or",
                    "input_value": "\\.(jpg|jpeg|gif|bmp|png)$"
                }
            ]
        ],
        "is_active": true,
        "order": 3,
        "description": null
    }
}
`} />

Para confirmar se sua imagem está sendo otimizada, [inspecione a página](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) 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.

:::tip
Confira a [documentação da API da Azion](https://api.azion.com/v3) para saber mais sobre todos os recursos disponíveis via API.
:::

</Fragment>

</Tabs>