Configure Image Processor em uma aplicação

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.

Última atualização

Ver como Markdown Configurar agente

Você configura 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.

Pré-requisitos

Configure através do Azion Console

Para ativar Image Processor e Application Accelerator:

Abra a aplicação

Acesse Azion Console > Applications > sua aplicação.

Vá para Main Settings > Modules > Default Modules
Ative Image Processor
Ative Application Accelerator
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:

Abra a aba Cache Settings

Acesse Azion Console > Applications > sua aplicação, então vá para a aba Cache Settings.

Selecione + Cache
Nomeie o cache setting

Em Name, digite um nome que identifique o cache setting. Por exemplo: Images.

Sobrescreva o cache do navegador

Em Browser Cache, selecione Override cache settings.

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.

Sobrescreva o comportamento do cache

Em Cache, selecione Override cache behavior.

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 para o máximo que você pode definir.

Defina o comportamento da query string

Em Application Accelerator, abra Cache vary by Query String e defina Behavior como Allowlist.

Adicione o campo ims

Em Fields, digite ims.

Ative Sort

Ative Sort para manter a cache key consistente, independentemente da ordem em que os parâmetros da query string chegam.

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:

Vá para a aba Rules Engine
Selecione + Rule
Nomeie a regra

Digite um nome para a regra. Por exemplo: Optimize images.

Selecione Request Phase
Selecione a variável na seção Criteria

Na seção Criteria, selecione a variável ${request_uri}.

Selecione matches como operador de comparação
Digite o argumento

Digite \.(jpg|jpeg|gif|bmp|png|ico|webp|avif) como argumento.

Na seção Behaviors, selecione Set Cache Policy
Selecione o cache setting que você criou
Selecione + Add Behavior
Adicione o behavior Optimize Images
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=<width>x<height>, 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 <application_id> pelo ID da sua aplicação:

Shell
01curl --request PATCH \
02 --url https://api.azion.com/v4/workspace/applications/<application_id> \
03 --header 'Accept: application/json' \
04 --header 'Authorization: Token [TOKEN VALUE]' \
05 --header 'Content-Type: application/json' \
06 --data {
07 "modules": {
08 "application_accelerator": {
09 "enabled": true
10 },
11 "image_processor": {
12 "enabled": true
13 }
14 },
15 "active": true
16}

Ao ler de volta, a aplicação carrega os seguintes módulos:

JSON
01{
02 "modules": {
03 "application_accelerator": { "enabled": true },
04 "cache": { "enabled": true },
05 "functions": { "enabled": true },
06 "image_processor": { "enabled": true }
07 }
08}

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:

Shell
01curl --request POST \
02 --url https://api.azion.com/v4/workspace/applications/<application_id>/cache_settings \
03 --header 'Accept: application/json' \
04 --header 'Authorization: Token [TOKEN VALUE]' \
05 --header 'Content-Type: application/json' \
06 --data {
07 "name": "Images",
08 "browser_cache": {
09 "behavior": "override",
10 "max_age": <browser_ttl_in_seconds>
11 },
12 "modules": {
13 "cache": {
14 "behavior": "override",
15 "max_age": <edge_ttl_in_seconds>
16 },
17 "application_accelerator": {
18 "cache_vary_by_querystring": {
19 "behavior": "allowlist",
20 "fields": ["ims"],
21 "sort_enabled": true
22 }
23 }
24 }
25}

Para todos os campos que um cache setting carrega, consulte Cache Settings.

A resposta retorna o cache setting que a Azion criou:

JSON
01{
02 "state": "executed",
03 "data": {
04 "id": <cache_setting_id>,
05 "name": "Images",
06 "browser_cache": {
07 "behavior": "override",
08 "max_age": <browser_ttl_in_seconds>
09 },
10 "modules": {
11 "cache": {
12 "behavior": "override",
13 "max_age": <edge_ttl_in_seconds>,
14 "stale_cache": { "enabled": false },
15 "large_file_cache": { "enabled": false, "offset": 1024 },
16 "tiered_cache": { "enabled": false }
17 },
18 "application_accelerator": {
19 "cache_vary_by_querystring": {
20 "behavior": "allowlist",
21 "fields": ["ims"],
22 "sort_enabled": true
23 },
24 "cache_vary_by_cookies": { "behavior": "ignore", "cookie_names": [] },
25 "cache_vary_by_devices": { "behavior": "ignore", "device_group": [] },
26 "cache_vary_by_method": []
27 }
28 }
29 }
30}

Copie o valor de id. Para criar a regra que aplica o cache setting e otimiza imagens, substituindo <cache_setting_id> pelo ID que você copiou, envie uma requisição POST:

Shell
01curl --request POST \
02 --url https://api.azion.com/v4/workspace/applications/<application_id>/request_rules \
03 --header 'Accept: application/json' \
04 --header 'Authorization: Token [TOKEN VALUE]' \
05 --header 'Content-Type: application/json' \
06 --data {
07 "name": "Optimize images",
08 "description": "Apply the cache setting and optimize images",
09 "active": true,
10 "criteria": [
11 [
12 {
13 "variable": "${request_uri}",
14 "operator": "matches",
15 "conditional": "if",
16 "argument": "\\.(jpg|jpeg|gif|bmp|png|ico|webp|avif)"
17 }
18 ]
19 ],
20 "behaviors": [
21 {
22 "type": "set_cache_policy",
23 "attributes": { "value": <cache_setting_id> }
24 },
25 {
26 "type": "optimize_images"
27 }
28 ]
29 }

A resposta ecoa os critérios e behaviors que a Azion aceitou:

JSON
01{
02 "data": {
03 "criteria": [
04 [
05 {
06 "variable": "${request_uri}",
07 "operator": "matches",
08 "conditional": "if",
09 "argument": "\\.(jpg|jpeg|gif|bmp|png|ico|webp|avif)"
10 }
11 ]
12 ],
13 "behaviors": [
14 {
15 "type": "set_cache_policy",
16 "attributes": { "value": <cache_setting_id> }
17 },
18 {
19 "type": "optimize_images"
20 }
21 ]
22 }
23}

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=<width>x<height>, 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 <application_id> pelo ID da sua aplicação:

Shell
01curl --location --request PATCH 'https://api.azionapi.net/edge_applications/<application_id>' \
02--header 'Accept: application/json; version=3' \
03--header 'Content-Type: application/json' \
04--header 'Authorization: Token [TOKEN VALUE]' \
05--data {
06 "application_acceleration": true,
07 "image_optimization": true
08}

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:

Shell
01curl --location 'https://api.azionapi.net/edge_applications/<application_id>/cache_settings' \
02--header 'Accept: application/json; version=3' \
03--header 'Content-Type: application/json' \
04--header 'Authorization: Token [TOKEN VALUE]' \
05--data {
06 "name": "QS15D img",
07 "browser_cache_settings": "override",
08 "browser_cache_settings_maximum_ttl": <browser_ttl_in_seconds>,
09 "cdn_cache_settings": "override",
10 "cdn_cache_settings_maximum_ttl": <edge_ttl_in_seconds>,
11 "cache_by_query_string": "whitelist",
12 "query_string_fields": [
13 "ims"
14 ]
15}

Para todos os campos que um cache setting carrega, consulte Cache Settings.

A resposta retorna o cache setting que a Azion criou:

JSON
01{
02 "results": {
03 "id": <cache_setting_id>,
04 "name": "QS15D img",
05 "browser_cache_settings": "override",
06 "browser_cache_settings_maximum_ttl": <browser_ttl_in_seconds>,
07 "cdn_cache_settings": "override",
08 "cdn_cache_settings_maximum_ttl": <edge_ttl_in_seconds>,
09 "cache_by_query_string": "whitelist",
10 "query_string_fields": [
11 "ims"
12 ],
13 "enable_query_string_sort": false,
14 "cache_by_cookies": "ignore",
15 "cookie_names": null,
16 "adaptive_delivery_action": "ignore",
17 "device_group": [],
18 "enable_caching_for_post": false,
19 "l2_caching_enabled": false,
20 "is_slice_configuration_enabled": false,
21 "is_slice_edge_caching_enabled": false,
22 "is_slice_l2_caching_enabled": false,
23 "slice_configuration_range": 1024,
24 "enable_caching_for_options": false,
25 "enable_stale_cache": true,
26 "l2_region": null
27 }
28}

Copie o valor de id. Para criar a regra que aplica o cache setting e otimiza imagens, substituindo <cache_setting_id> pelo ID que você copiou, envie uma requisição POST:

Shell
01curl --location --globoff 'https://api.azionapi.net/edge_applications/<application_id>/rules_engine/request/rules' \
02--header 'Accept: application/json; version=3' \
03--header 'Authorization: Token [TOKEN VALUE]' \
04--header 'Content-Type: application/json' \
05--data {
06 "name": "ImgProcessor",
07 "behaviors": [
08 {
09 "name": "set_cache_policy",
10 "target": "<cache_setting_id>"
11 },
12 {
13 "name": "optimize_images",
14 "target": null
15 }
16 ],
17 "criteria": [
18 [
19 {
20 "variable": "${request_uri}",
21 "operator": "matches",
22 "conditional": "if",
23 "input_value": "\\.(jpg|jpeg|gif|bmp|png)"
24 },
25 {
26 "variable": "${uri}",
27 "operator": "matches",
28 "conditional": "or",
29 "input_value": "\\.(jpg|jpeg|gif|bmp|png)$"
30 }
31 ]
32 ]
33}

A resposta retorna a regra que a Azion criou:

JSON
01{
02 "results": {
03 "id": <rule_id>,
04 "name": "ImgProcessor",
05 "phase": "request",
06 "behaviors": [
07 {
08 "name": "set_cache_policy",
09 "target": "132186"
10 },
11 {
12 "name": "optimize_images",
13 "target": null
14 }
15 ],
16 "criteria": [
17 [
18 {
19 "variable": "${request_uri}",
20 "operator": "matches",
21 "conditional": "if",
22 "input_value": "\\.(jpg|jpeg|gif|bmp|png)"
23 },
24 {
25 "variable": "${uri}",
26 "operator": "matches",
27 "conditional": "or",
28 "input_value": "\\.(jpg|jpeg|gif|bmp|png)$"
29 }
30 ]
31 ],
32 "is_active": true,
33 "order": 3,
34 "description": null
35 }
36}

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=<width>x<height>, a resolução solicitada; remova a query string para carregar o arquivo original.

Próximos passos