1 of 20
2 of 20
3 of 20
4 of 20
5 of 20
6 of 20
7 of 20
8 of 20
9 of 20
10 of 20
11 of 20
12 of 20
13 of 20
14 of 20
15 of 20
16 of 20
17 of 20
18 of 20
19 of 20
20 of 20

site

doc

blog

success stories

Image Processor

Edit on GitHub

The Azion Image Processor automates your workflow for processing images.

Processing your images reduces their size without any noticeable loss of visual quality, which reduces the transfer time of your content and improves the user experience. This increases the fluidity of your pages and the speed of navigation, without you having to do practically anything.

You automate your image processing workflow, using the functions to resize, crop, or apply filters to your images, without the need to manage dozens of versions and edit each image in your library.

  1. Instructions
  2. Resizing the image with auto-crop
  3. Resizing the image with fit-in
  4. Cropping the image
  5. Changing image quality
  6. Adding a watermark to the image
  7. Converting image to another format
  8. Filling image
  9. Combining Filters

1. Instructions

We developed this product so that you can optimize, resize, crop and apply filters to their images, with the aim of providing more speed and dynamism to your user’s experience.

It supports the following formats: JPEG, GIF, PNG, BMP, ICO and WEBP (for compatible browsers)

How to configure Azion Image Processor

To configure Azion Image Processor, follow the steps below and, whenever necessary, check the technical documentation:

Step 1: Edit or add a new Edge Application setting for sending your images.

  1. Access Real-Time Manager , go to Edge Computing > Edge Application menu;
  2. If you have already added an Edge Application setting for sending your images, skip directly to Step 2;
  3. If not, add an Edge Application setting for sending your images, according to the First Steps guide.

Step 2: Set up Advanced Cache Key for your images

In order to use the resize, crop or apply filters to images, you will need to configure the content variation for Query String:

  1. Open the Edge Application setting that is responsible for sending your images, created in Step 1;
  2. In the Cache Settings tab, add or edit a cache policy customized for your images;
  3. Give your policy a suitable name, you will need to identify it in Step 3.
  4. In the Expiration Settings section, configure the expiration policy for your images in Edge Caching, following what you learned in the First Steps documentation; for images, Azion recommends that you choose times that are longer than the Maximum TTL for the CDN Cache, for example, 7.776.000 seconds (3 months);
  5. 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 need the Application Acceleration product.
    • 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 need the Application Acceleration product.
    • 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 do not have the Application Acceleration product.
  6. In the other sections, edit the settings as required and click on the Save button to save your cache setting.

Step 3: Enable Image Processor

  1. In the Edge Application’s Rules Engine tab, add or edit a custom rule for one or more image paths;

  2. In the Path field, enter the path for your images or use the regex recommended by Azion:

    • If you select the parameter $ {request_uri}, use the regex below:
      \.(jpg|jpeg|gif|bmp|png)
      
    • If you select the parameter $ {uri}, use the regex below:
      \.(jpg|jpeg|gif|bmp|png)$
      
  3. Choose the logical operator Matches, if you used the regular expression in the Path field;

  4. In the Behavior field Set Cache Settings, select the preset used in Stage 2.

  5. Also select Optimize Images in the Behavior field;

  6. In all other sections, use the appropriate settings for your needs;

  7. Click the Save button to save your rule.

From this point on, images from the configured path will be automatically processed. In addition, the Image Processor detects the browser’s compatibility with the WEBP format and, when possible, will convert the image format automatically, bringing even more gains for you. BMP images will also be automatically converted to JPEG or WEBP, depending on the browser’s compatibility.

Follow the Bandwidth Saving graph through Real-Time Metrics to monitor the traffic savings resulting from the processed images.

Learn more about the product’s other functionalities, configured as arguments in the Query String of the image’s URL.


2. Resizing the image with auto-crop

You can use Azion’s Image Processor to resize your images, without having to manage multiple files in your image library.

Starting with an original image from your library, the Image Processor can create derived images on demand, in the size that best suits your page.

You specify the required size as arguments in the Query String, in the format:

ims=WidthxHeight
  • Width: in pixels for the derived image
  • Height: in pixels for the derived image

To resize the image while preserving the aspect ratio, delete one of the two values, which will be calculated automatically. Use Widthx to specify only the width and let the height be calculated proportionally, or xHeight, to specify only the height and let the width be calculated automatically.

You can also specify both dimensions, Width and Height and crop - auto-crop - the image to the required size. The cropping is centered and can be either vertical or horizontal, depending on how well the original dimensions fit the specified dimensions.

Use the value orig for any of the image dimensions, if you want to keep the original dimension.

Example:

http://yourdomain.com/image.jpg?ims=880x (880 pixels in width, automatic height)

Image_Processor_1

http://yourdomain.com/image.jpg?ims=880xorig (880 pixels in width, original height)

Image_Processor_2

http://yourdomain.com/image.jpg?ims=400x (400 pixels in width, automatic height)

Image_Processor_1

http://yourdomain.com/image.jpg?ims=400x400 (400 pixels in width, 400 pixels in height)

Image_Processor_1

http://yourdomain.com/image.jpg?ims=x100 (automatic width, 100 pixels in height)

Image_Processor_1


3. Resizing the image with fit-in

Another way to resize an image is using fit-in:

ims=fit-in/WidthxHeight
  • Width: maximum width, in pixels for the derived image
  • Height: maximum height, in pixels for the derived image

The derived image will be resized to fit the area specified by WidthxHeight. The aspect ratio of the original image is preserved, and you can hide one of the values if you wish.

If the specified area is larger than the image dimensions, the image will not be enlarged. The dimensions specified as fit-in parameters represent the maximum size limits of the area the image can occupy. One or both dimensions of the image can be smaller than the bounding area.

Example:

https://yourdomain.com/image.jpg?ims=fit-in/400x400 (maximum width of 400 pixels and maximum height of 400 pixels)

Image_Processor_1


4. Cropping the image

The image cropping can be done by entering a start point (AxB) and an end point (CxD), as an argument in the Query String of the image URL:

ims=AxB:CxD
  • AxB: the starting point for the crop indicates the coordinates, in pixels, of the top left corner of the area to be cropped.
  • CxD: the end point for the crop indicates the coordinates, in pixels, form the lower right corner of the area to be cropped.

Example:

http://yourdomain.com/image.jpg?ims=430x20:910x730

Image_Processor_7


5. Changing image quality

The Image Processor process your images, reducing file size and, therefore, the transfer time. The default quality value used is 85%, which provides optimization without any noticeable loss of visual quality.

If needed, you can set a custom quality for your images using the filter:

filters:quality(Number)

Where Number must be a whole number between 0 and 100, which represents the level of quality you wish.

Example:

http://yourdomain.com/image.jpg?ims=filters:quality(100)

Image_Processor_1

http://yourdomain.com/image.jpg?ims=filters:quality(85)

Image_Processor_1

http://yourdomain.com/image.jpg?ims=filters:quality(15)

Image_Processor_1


6. Adding a watermark to the image

To add watermarks to images using the Image Processor, use the fllowing filter:

filters:watermark(ImageURL,X,Y,Alpha)
  • ImageURL: this is the URL of the image that you wish to insert as a watermark. If the URL contains parentheses, they must be encoded as% 28 for “(” and% 29 for “)”.
  • X: horizontal position for the watermark’s insertion. Positive numbers represent offset, in pixels, from left edge to right edge, while negative numbers represent offset from right edge to left edge. You can use the value center, to center the watermark horizontally, or the value repeat, to fill the image horizontally with repetitions of the watermark.
  • Y: The vertical position for the watermark insertion. Positive numbers represent the degree of offset, in pixels, from top to bottom, while negative numbers represent the offset from bottom to top. You can use the value center, to center the watermark vertically, or the value repeat, to fill the image vertically with repeats of the watermark.
  • Alpha: transparency of the watermark. It must be a number between 0 (completely opaque) and 100 (completely transparent).

Example:

http://yourdomain.com/image.jpg?ims=filters:watermark(http://yourdomain.com/watermark-image.png,-25,-10,50)


7. Converting image to another format

You can convert the image to another format using the filter:

filters:format(ImageFormat)

Where ImageFormat can be replaced by the values webp, jpeg, gif or png.

Example:

To convert jpeg image to gif:

http://yourdomain.com/image.jpg?ims=filters:format(gif)

Image_Processor_1


8. Filling Image

The Image Processor can also be used to create a derived image that is a larger size than the original, but instead of resizing it to the required size, you can fill the area with a custom color. Use the same parameters as fit-in to the dimensions you want, together with the filter fill:

filters:fill(Color)

Where Color is the fill color, following the nomenclature and codes specified for the standard HTML.

Example:

http://yourdomain.com/image.jpg?ims=fit-in/400x400/filters:fill(gray)

Image_Processor_1

http://yourdomain.com/image.jpg?ims=fit-in/400x400/filters:fill(008080)

Image_Processor_1

http://yourdomain.com/image.jpg?ims=fit-in/400x400/filters:fill(00ffff)

Image_Processor_1


9. Combining filters

Image Processor allows you to combine the filters you want, separating each of them with “:”.

filters:filter1(arg1):filter2(arg2)

Where filter1(arg1) and filter2(arg2) are the filters you want to apply.

Example:

http://yourdomain.com/image.jpg?ims=fit-in/400x400/filters:fill(gray):quality(100)


Didn’t find what you were looking for? Open a support ticket.