How to optimize image processing at the edge

Through the Image Processor module, you can adjust image sizes, add filters and watermarks, or convert formats to suit for more efficient content delivery, bandwidth saving, and reduce object storage costs. These changes can be applied directly in the URL of your image by appending ims queries to the image’s URL.

Via Azion Console

Access Azion Console.
On the upper-left corner of the page, open the Products menu, represented by three horizontal lines, and select Edge Application.
Click the edge application you want to configure.
Activate the Application Accelerator and Image Processor modules.
Navigate to the Cache Settings tab.
Click the Add Cache Settings button.
In the Expiration Settings section, configure the expiration policy for your images.

For images, you may add larger time-to-live (TTL) values, such as 1296000 seconds (15 days).

In the Advanced Cache Key section, choose one of the following options:
- Content varies by some Query String fields (Whitelist): if you want to list all the fields in the Query String that will identify your images. Image Processor uses the ims field, so this has to be included in the list as one of the required fields for your image manager application.
- Content varies by Query String, except for some fields (Blacklist): if you only want to list those fields in the Query String that should be ignored to identify the objects in your cache. In this case, it guarantees that the ims field will be removed from the list.
- Content varies by all Query String fields: if you don’t know or aren’t sure about which fields to list in the Query String because you aren’t responsible for all the content in the cache or don’t have Application Accelerator activated.
Click the Save button.

Now you need to indicate what will trigger the activation of the Image Processor module. You can create a rule that identifies image formats as follows:

Still on the Edge Application* page, navigate to the Rules Engine tab.
Click the Add Rule button and select Request Phase.
Name your rule.
In the Criteria section, select the variable ${request_uri}.
Select the comparsion operator matches
As an argument, add \.(jpg|jpeg|gif|bmp|png).
Click Or to add another criterium.
In the new field, select the variable ${uri}.
Select the comparsion operator matches
As an argument, add \.(jpg|jpeg|gif|bmp|png)$
In the Behavior section, select Set Cache Policy and select the cache setting you created.
Click the + button.
Add the Optimize Images behavior.

Click the Save button to save your rule.

To confirm whether your image is being optimized, inspect the page using your browser and find the corresponding path in the image. In the URL’s query string, the ims=VALUExVALUE field corresponds to the resolution loaded on the page. To see the original file, you only need to remove the query string added in the URL.

Via API

Run the following PATCH request in your terminal, replacing [TOKEN VALUE] with your personal token and the <edge_application_id> variable with your edge application ID to activate the Application Accelerator and Image Processor modules:

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

You’ll receive a response with the updated value.
Run the following POST request in your terminal, replacing [TOKEN VALUE] with your personal token and the <edge_application_id> variable with the id of your 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"
    ]
}'

You’ll receive a response similar to this:

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

Copy the cache setting ID received in the response.
Run the following POST request to create a rule in the Request Phase, replacing the edge application ID value and the cache setting ID you received in the previous response:

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)$"
            }
        ]
    ]
}'

You’ll receive the following response:

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

Contributors

See all contributors