How to optimize image processing at the edge

Manage image sizes, filters, watermarks, formats, and process images directly at the edge using a single URL query with Image Processor.

View as Markdown

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.

In this guide, there are separate instructions for API v3 and API v4. If you’re not sure which steps apply to your account, see the Verify Your Account Migration guide to determine if your account has already been migrated.

  1. Access Azion Console > Applications.
  2. Click the Application you want to configure.
  3. Activate the Application Accelerator and Image Processor modules.
  4. Click the Save button.
  5. Navigate to the Cache Settings tab.
  6. Click the + Cache Setting button.
  7. In the Cache Expiration Policies 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).
  1. In the Advanced Cache Key section, choose one of the following options:
    • Content varies by some Query String fields (Allowlist): 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 (Blocklist): 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.
  2. 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:

  1. Still on the Applications page, navigate to the Rules Engine tab.
  2. Click the + Rule button.
  3. Name your rule.
  4. Select Request Phase.
  5. In the Criteria section, select the variable ${request_uri}.
  6. Select the comparsion operator matches
  7. As an argument, add \.(jpg|jpeg|gif|bmp|png).
  8. Click + Or to add another criterium.
  9. In the new field, select the variable ${uri}.
  10. Select the comparsion operator matches
  11. As an argument, add \.(jpg|jpeg|gif|bmp|png)$
  12. In the Behavior section, select Set Cache Policy and select the cache setting you created.
  13. Click the + Add Behavior button.
  14. Add the Optimize Images behavior.

Optional — To ensure images are successfully converted to WEBP format, you must also add the behavior Add Request Header and send the header Accept: image/webp.

Optional — To ensure images are successfully converted to AVIF format, you must also add the behavior Add Request Header and send the header Accept: image/avif.

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