--- name: azion-configure-image-processor-em-uma-aplicacao description: >- Ative Image Processor e crie uma regra do Rules Engine que otimiza e armazena imagens em cache pelo parâmetro ims, via Console, API v4 ou API v3. --- # Configure Image Processor em uma aplicação Você configura [Image Processor](/pt-br/documentacao/plataforma/applications/#image-processor) em uma aplicação através do Azion Console, da Azion API v4 ou da Azion API v3. Para um primeiro contato com o produto, consulte [Primeiros passos com Image Processor](/pt-br/documentacao/plataforma/applications/image-processor/primeiros-passos/). --- ## Pré-requisitos - Uma aplicação. Para criar uma, consulte [Primeiros passos com Applications](/pt-br/documentacao/plataforma/applications/primeiros-passos/). - Acesso a Azion Console, para o procedimento via Console. Consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). - Um [personal token](/pt-br/documentacao/guias/plataforma/conta-e-billing/personal-tokens/), para os procedimentos via API. --- ## Configure através do Azion Console Para ativar Image Processor e Application Accelerator: 1. **Abra a aplicação** Acesse [Azion Console](https://console.azion.com/) > **Applications** > **sua aplicação**. 2. **Vá para Main Settings > Modules > Default Modules** 3. **Ative Image Processor** 4. **Ative Application Accelerator** 5. **Selecione Save** A aplicação roda com os dois módulos. Application Accelerator é exigido para variar o cache pelo parâmetro de query string `ims`, porque o controle **Cache vary by Query String** fica na seção **Application Accelerator** do cache setting. Ele não é exigido para processar uma imagem. Para criar o cache setting que dá às imagens derivadas um time-to-live (TTL) e varia a cache key por `ims`: 1. **Abra a aba Cache Settings** Acesse [Azion Console](https://console.azion.com/) > **Applications** > **sua aplicação**, então vá para a aba **Cache Settings**. 2. **Selecione + Cache** 3. **Nomeie o cache setting** Em **Name**, digite um nome que identifique o cache setting. Por exemplo: `Images`. 4. **Sobrescreva o cache do navegador** Em **Browser Cache**, selecione *Override cache settings*. 5. **Defina por quanto tempo o navegador mantém a imagem** Defina **Max Age**, em **Browser Cache**, com a duração que o navegador mantém a imagem. 6. **Sobrescreva o comportamento do cache** Em **Cache**, selecione *Override cache behavior*. 7. **Defina por quanto tempo a imagem derivada fica em cache** Defina **Max Age**, em **Cache**, com uma duração longa. Imagens mudam com menos frequência do que outros conteúdos, então uma duração longa reduz as requisições à origem. Consulte [Cache Settings](/pt-br/documentacao/plataforma/applications/cache/cache-settings/) para o máximo que você pode definir. 8. **Defina o comportamento da query string** Em **Application Accelerator**, abra **Cache vary by Query String** e defina **Behavior** como *Allowlist*. 9. **Adicione o campo ims** Em **Fields**, digite `ims`. 10. **Ative Sort** Ative **Sort** para manter a cache key consistente, independentemente da ordem em que os parâmetros da query string chegam. 11. **Selecione Save** O cache setting aparece na aba **Cache Settings**, com um TTL longo e a cache key variando pelo campo `ims`. Para criar a regra que aplica o cache setting e otimiza imagens: 1. **Vá para a aba Rules Engine** 2. **Selecione + Rule** 3. **Nomeie a regra** Digite um nome para a regra. Por exemplo: `Optimize images`. 4. **Selecione Request Phase** 5. **Selecione a variável na seção Criteria** Na seção **Criteria**, selecione a variável `${request_uri}`. 6. **Selecione matches como operador de comparação** 7. **Digite o argumento** Digite `\.(jpg|jpeg|gif|bmp|png|ico|webp|avif)` como argumento. 8. **Na seção Behaviors, selecione Set Cache Policy** 9. **Selecione o cache setting que você criou** 10. **Selecione + Add Behavior** 11. **Adicione o behavior Optimize Images** 12. **Selecione Save** > **Opcional** > > Para converter imagens para o formato WEBP ou AVIF, adicione o behavior **Add Request Header** e defina o valor dele como `Accept: image/webp` ou `Accept: image/avif`. As requisições cuja URI corresponde ao argumento carregam o cache setting e passam por Image Processor. Para confirmar que uma imagem está otimizada, inspecione a página com as ferramentas de desenvolvedor do navegador e encontre a requisição da imagem. A query string carrega `ims=x`, a resolução solicitada; remova a query string para carregar o arquivo original. --- ## Configure através da Azion API v4 Para ativar Image Processor e Application Accelerator, envie uma requisição `PATCH`, substituindo `[TOKEN VALUE]` pelo seu personal token e `` pelo ID da sua aplicação: ```bash curl --request PATCH \ --url https://api.azion.com/v4/workspace/applications/ \ --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 }' ``` Ao ler de volta, a aplicação carrega os seguintes módulos: ```json { "modules": { "application_accelerator": { "enabled": true }, "cache": { "enabled": true }, "functions": { "enabled": true }, "image_processor": { "enabled": true } } } ``` Application Accelerator é exigido para variar o cache pelo parâmetro de query string `ims`, porque esse campo pertence a `modules.application_accelerator` em um cache setting. Ele não é exigido para processar uma imagem. Para criar o cache setting que dá às imagens derivadas um time-to-live (TTL) e varia a cache key por `ims`, envie uma requisição `POST`: ```bash curl --request POST \ --url https://api.azion.com/v4/workspace/applications//cache_settings \ --header 'Accept: application/json' \ --header 'Authorization: Token [TOKEN VALUE]' \ --header 'Content-Type: application/json' \ --data '{ "name": "Images", "browser_cache": { "behavior": "override", "max_age": }, "modules": { "cache": { "behavior": "override", "max_age": }, "application_accelerator": { "cache_vary_by_querystring": { "behavior": "allowlist", "fields": ["ims"], "sort_enabled": true } } } }' ``` Para todos os campos que um cache setting carrega, consulte [Cache Settings](/pt-br/documentacao/plataforma/applications/cache/cache-settings/). A resposta retorna o cache setting que a Azion criou: ```json { "state": "executed", "data": { "id": , "name": "Images", "browser_cache": { "behavior": "override", "max_age": }, "modules": { "cache": { "behavior": "override", "max_age": , "stale_cache": { "enabled": false }, "large_file_cache": { "enabled": false, "offset": 1024 }, "tiered_cache": { "enabled": false } }, "application_accelerator": { "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": [] }, "cache_vary_by_method": [] } } } } ``` Copie o valor de `id`. Para criar a regra que aplica o cache setting e otimiza imagens, substituindo `` pelo ID que você copiou, envie uma requisição `POST`: ```bash curl --request POST \ --url https://api.azion.com/v4/workspace/applications//request_rules \ --header 'Accept: application/json' \ --header 'Authorization: Token [TOKEN VALUE]' \ --header 'Content-Type: application/json' \ --data '{ "name": "Optimize images", "description": "Apply the cache setting and optimize images", "active": true, "criteria": [ [ { "variable": "${request_uri}", "operator": "matches", "conditional": "if", "argument": "\\.(jpg|jpeg|gif|bmp|png|ico|webp|avif)" } ] ], "behaviors": [ { "type": "set_cache_policy", "attributes": { "value": } }, { "type": "optimize_images" } ] }' ``` A resposta ecoa os critérios e behaviors que a Azion aceitou: ```json { "data": { "criteria": [ [ { "variable": "${request_uri}", "operator": "matches", "conditional": "if", "argument": "\\.(jpg|jpeg|gif|bmp|png|ico|webp|avif)" } ] ], "behaviors": [ { "type": "set_cache_policy", "attributes": { "value": } }, { "type": "optimize_images" } ] } } ``` > **Opcional** > > Para converter imagens para o formato WEBP ou AVIF, adicione um behavior do tipo `add_request_header` com `"attributes": {"value": "Accept: image/webp"}` ou `"attributes": {"value": "Accept: image/avif"}`. As requisições cuja URI corresponde ao argumento carregam o cache setting e passam por Image Processor. Para confirmar que uma imagem está otimizada, inspecione a página com as ferramentas de desenvolvedor do navegador e encontre a requisição da imagem. A query string carrega `ims=x`, a resolução solicitada; remova a query string para carregar o arquivo original. --- ## Configure através da Azion API v3 Para ativar Image Processor e Application Accelerator, envie uma requisição `PATCH`, substituindo `[TOKEN VALUE]` pelo seu personal token e `` pelo ID da sua aplicação: ```bash curl --location --request PATCH 'https://api.azionapi.net/edge_applications/' \ --header 'Accept: application/json; version=3' \ --header 'Content-Type: application/json' \ --header 'Authorization: Token [TOKEN VALUE]' \ --data '{ "application_acceleration": true, "image_optimization": true }' ``` A resposta retorna o valor atualizado. Application Accelerator é exigido para variar o cache pelo parâmetro de query string `ims`. Ele não é exigido para processar uma imagem. Para criar o cache setting que dá às imagens derivadas um time-to-live (TTL) e varia a cache key por `ims`, envie uma requisição `POST`: ```bash curl --location 'https://api.azionapi.net/edge_applications//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": , "cdn_cache_settings": "override", "cdn_cache_settings_maximum_ttl": , "cache_by_query_string": "whitelist", "query_string_fields": [ "ims" ] }' ``` Para todos os campos que um cache setting carrega, consulte [Cache Settings](/pt-br/documentacao/plataforma/applications/cache/cache-settings/). A resposta retorna o cache setting que a Azion criou: ```json { "results": { "id": , "name": "QS15D img", "browser_cache_settings": "override", "browser_cache_settings_maximum_ttl": , "cdn_cache_settings": "override", "cdn_cache_settings_maximum_ttl": , "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 valor de `id`. Para criar a regra que aplica o cache setting e otimiza imagens, substituindo `` pelo ID que você copiou, envie uma requisição `POST`: ```bash curl --location --globoff 'https://api.azionapi.net/edge_applications//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": "" }, { "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)$" } ] ] }' ``` A resposta retorna a regra que a Azion criou: ```json { "results": { "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 } } ``` As requisições cuja URI corresponde a qualquer um dos argumentos carregam o cache setting e passam por Image Processor. Para confirmar que uma imagem está otimizada, inspecione a página com as ferramentas de desenvolvedor do navegador e encontre a requisição da imagem. A query string carrega `ims=x`, a resolução solicitada; remova a query string para carregar o arquivo original. --- ## Próximos passos - [Parâmetros de URL do Image Processor](/pt-br/documentacao/plataforma/applications/image-processor/parametros-de-url/) - a gramática completa do `ims` para redimensionar, recortar, girar, aplicar filtros e converter formato. - [Configurações do Image Processor](/pt-br/documentacao/plataforma/applications/image-processor/configuracoes/) - cada campo que o módulo e o cache setting dele carregam, com os valores e os padrões. - [Limites de Applications](/pt-br/documentacao/plataforma/applications/limites/#image-processor) - o tamanho e as dimensões máximas que Image Processor aceita. - [Cache Settings](/pt-br/documentacao/plataforma/applications/cache/cache-settings/) - cada campo que um cache setting carrega, incluindo o TTL máximo. - [Otimizar imagens para sites e aplicações móveis](/pt-br/documentacao/casos-de-uso/melhorar-performance-e-confiabilidade/otimizar-imagens-para-sites-e-aplicacoes-moveis/) - um caminho de imagens que redimensiona sob demanda, guarda cada variação em cache e serve um conjunto fixo de tamanhos.