Como otimizar o processamento de imagens no edge

1. Acesse o Azion Console > Edge Application.
2. Clique na edge 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).

8. 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.
9. 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 Edge 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.

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

1. Acesse o Real-Time Manager (RTM).
2. No canto superior esquerdo da página, abra o Products menu, representado por três linhas horizontais, e selecione Edge Application.
3. Clique na edge application que você deseja configurar.
4. Ative os módulos Application Accelerator e Image Processor.
5. Navegue até a aba Cache Settings.
6. Clique no botão Add Cache Setting.
7. Na seção Expiration Settings, 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).

8. Na seção Advanced Cache Key, escolha uma das seguintes opções:
   • O conteúdo varia por alguns campos de Query String (Whitelist): 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 (Blacklist): 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.
9. 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 Edge Application, navegue até a aba Rules Engine.
2. Clique no botão Add Rule e selecione Request Phase.
3. Nomeie sua regra.
4. Na seção Criteria, selecione a variável ${request_uri}.
5. Selecione o operador de comparação matches.
6. Como argumento, adicione \.(jpg|jpeg|gif|bmp|png).
7. Clique em Or para adicionar outro critério.
8. No novo campo, selecione a variável ${uri}.
9. Selecione o operador de comparação matches.
10. Como argumento, adicione \.(jpg|jpeg|gif|bmp|png)$.
11. Na seção Behaviors, selecione Set Cache Policy e selecione a configuração de cache que você criou.
12. Clique no botão +.
13. Adicione o comportamento Optimize Images.

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

1. Execute a seguinte requisição PATCH em seu terminal, substituindo [TOKEN VALUE] por seu personal token e a variável <edge_application_id> por seu ID de edge application para ativar os módulos Application Accelerator e Image Processor:

curl --location --request PATCH 'https://api.azionapi.net/edge_applications/<edge_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 e a variável <edge_application_id> pelo id de sua edge application:

curl --location 'https://api.azionapi.net/edge_applications/<edge_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"
    ]
}'

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

{
    "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 edge application e o ID de configuração de cache que você recebeu na resposta anterior:

curl --location --globoff 'https://api.azionapi.net/edge_applications/<edge_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)$"
            }
        ]
    ]
}'

7. Você receberá a seguinte resposta:

{
    "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 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.