Como otimizar o processamento de imagens no edge

Através do módulo 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.

Via Azion Console

Acesse o Azion Console.
No canto superior esquerdo da página, abra o Products menu, representado por três linhas horizontais, e selecione Edge Application.
Clique na edge application que você deseja configurar.
Ative os módulos Application Accelerator e Image Processor.
Navegue até a aba Cache Settings.
Clique no botão Add Cache Setting.
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).

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

Ainda na página Edge Application, navegue até a aba Rules Engine.
Clique no botão Add Rule e selecione Request Phase.
Nomeie sua regra.
Na seção Criteria, selecione a variável ${request_uri}.
Selecione o operador de comparação matches.
Como argumento, adicione \.(jpg|jpeg|gif|bmp|png).
Clique em Or para adicionar outro critério.
No novo campo, selecione a variável ${uri}.
Selecione o operador de comparação matches.
Como argumento, adicione \.(jpg|jpeg|gif|bmp|png)$.
Na seção Behaviors, selecione Set Cache Policy e selecione a configuração de cache que você criou.
Clique no botão +.
Adicione o comportamento Optimize Images.

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.

Via API

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
}'

Você receberá uma resposta com o valor atualizado.
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"
    ]
}'

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
    }
}

Copie o ID da configuração de cache recebido na resposta.
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)$"
            }
        ]
    ]
}'

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
    }
}

Contribuidores