Image Processor first steps

To configure Image Processor, follow the steps below:

  1. Access Azion Console.
  2. On the upper-left corner of the page, select Products menu > Edge Application.
  3. Select the edge application responsible for managing your images from your list of existing applications or add a new one with the help of the getting started guide.
  4. In the Cache Settings tab, add or edit a custom cache policy for your images.
  5. In the Expiration Settings section, configure the expiration policy for your images.

  1. 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. For this, you must enable the Application Accelerator module.
    • 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. 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.

  2. Edit the remaining settings as required and click the Save button.

  3. In the Rules Engine tab for the edge application, add or edit a Request rule for one or more image paths.

  4. 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)

    Or:

    If ${uri} matches \.(jpg|jpeg|gif|bmp|png)$

  5. In the Behavior section, select Set Cache Policy and select the cache setting you created.

  6. Add the Optimize Images behavior.

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

Contributors