Image Processor first steps

Optimize, resize, crop, and apply filters to your images automatically with the dynamic image processing capabilities of Azion Image Processor for Applications.

View as Markdown

To configure Image Processor, follow the steps below:

  1. Access Azion Console > Applications.
  2. Select the application responsible for managing your images from your list of existing applications or add a new one with the help of the build an application page.
  3. In the Cache Settings tab, add or edit a custom cache policy for your images.
  4. In the Cache Expiration Policies section, configure the expiration policy for your images.

For images, Azion recommends that you choose larger time-to-live (TTL) values, such as the Maximum TTL for Cache Settings, which is 7.776.000 seconds (3 months).

  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. For this, you must enable the Application Accelerator module.
    • 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. For this, you must enable the Application Accelerator module.
    • 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.
  1. Edit the remaining settings as required and click the Save button.
  2. In the Rules Engine tab for the application, add or edit a Request phase rule for one or more image paths.
  3. In the Criteria section, select the variable to indicate the path of your images in your origin:
    • If ${request_uri} matches \.(jpg|jpeg|gif|bmp|png|ico|webp|avif)
      Or:
    • If ${uri} matches \.(jpg|jpeg|gif|bmp|png|ico|webp|avif)$
  4. In the Behavior section, select Set Cache Policy and select the cache setting you created.
  5. 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.

From this point on, images from the configured path will be automatically processed.

To resize, crop, optimize, convert, or apply filters to an image, you’ll need to append the queries described in the Image Processor page to the image’s URL, which you may do using an function. To see the original file, you only need to remove the query string added to the URL.

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.

In addition, Image Processor detects the browser’s compatibility with WEBP format and, when possible, it’ll convert the image format automatically. BMP images will also be automatically converted to JPEG or WEBP, depending on the browser’s compatibility.