Image Processor is an Edge Application module that can manipulate and process images directly at the edge, which allows you to optimize content transfer times and elevate user experience across your applications.
Starting with an original image from your library, Image Processor can create derived images on demand, allowing you to:
- Resize images to meet your requirements.
- Crop images with precision.
- Optimize processing times while ensuring image quality.
- Convert image formats at the edge.
- Apply filters or add watermarks to enhance images.
ImplementationSection titled Implementation
|Image processor first steps||Image Processor first steps|
Supported image formatsSection titled Supported image formats
This module supports an array of image formats, including:
- WEBP (for compatible browsers)
Resize imagesSection titled Resize images
Specify the required size as arguments in the query string using the key-value pair
Height parameters should be changed to the width and height of the image in pixels.
The following file
/image.jpg?ims=WidthxHeight would be resized according to the set
AutocropSection titled Autocrop
By specifying both
Height, the image may be cropped automatically to fit 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.
By appending the query
?ims=400x400 to the image URL, it’ll be resized to 400 by 400 pixels with autocrop. For example:
Preserve aspect ratioSection titled Preserve aspect ratio
Aspect ratio can be preserved by keeping only one of the two parameters in the query string. You can preserve width by using
Widthx calculating the corresponding height, or
xHeight to specify only the height and calculate the corresponding width.
By changing the query of the image to
?ims=400x, the height will be calculated automatically and the width will be set to 400 pixels:
Conversely, by using the query
?ims=x100, the width will be calculated automatically, but the height will be set to 100 pixels:
Maintain original dimensionSection titled Maintain original dimension
orig can be replaced to maintain the original dimension of the image without autocropping.
The following image has the appended query string
?ims=450xorig, keeping the original height but setting the width to 880 pixels:
Resize to fit dimensionsSection titled Resize to fit dimensions
Another way to resize an image to fit a specific area is by using the query string
The aspect ratio of the original image is preserved. If the specified area is larger than the image dimensions, the image will keep its original size. You don’t have to specify both dimensions, since one or both dimensions of the image can be smaller than its boundaries.
An image with the query string
?ims=fit-in/400x400 will be resized to fit the maximum size limit of the area it can occupy. In this case, 400 pixels in width or 400 pixels in height, whichever is reached first:
Crop imagesSection titled Crop images
Crop images from one coordinate to another using the query
AxBis the starting point for the crop. It indicates, in pixels, the coordinates of the upper-left corner of the image where the cropping starts.
CxDis the endpoint for the crop. It indicates, in pixels, the coordinates form the bottom-right corner of the image where the cropping ends.
For example, the query string of the image URL
?ims=430x20:910x730 will start the crop at the initial coordinate of 430x20 pixels and finish at the coordinate 910x730 pixels.
Rotate imagesSection titled Rotate images
Rotate an image to the left through the query
?ims=filters:rotate(Angle). You can specify the
Angle as the following values:
0: no rotation.
90: rotates the image 90° to the left.
180: rotates the image 180° to the left.
270: rotates the image 270° to the left.
360: no rotation.
Values different from the ones listed above won’t rotate the image.
The following image is rotated by 270° through the query
Change qualitySection titled Change quality
Reduce file size and transfer time by processing lower quality values without affecting image visuals by appending the query
value must be a whole number between
100, which represents the level of quality you wish to apply to the image.
The recommended quality value, which provides optimization without any noticeable loss of visual quality, is 85%.
The following image has the query
?ims=filters:quality(100), for 100% quality:
The next image has the recommended 85% quality through the query
Finally, the next image has been adjusted to 15% quality with the query
Add a watermarkSection titled Add a watermark
Add watermarks to your images by appending the query
WatermarkURLis the URL of the image that you wish to insert as a watermark. If the URL contains parentheses, they must be coded as
Xrepresents the horizontal position for the watermark’s insertion. Positive numbers represent the 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.
Yrepresents the vertical position for the watermark’s insertion. Positive numbers represent the 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 repetitions of the watermark.
Alphais the transparency of the watermark. It must be a number between 0 (completely opaque) and 100 (completely transparent).
For example, the query
?ims=filters:watermark(http://yourdomain.com/watermark-image.png,-25,-10,50) will apply the watermark 25 pixels left of center and 10 pixels below center, at 50% transparency.
Convert image to another formatSection titled Convert image to another format
You can convert the image to another format using the query
ImageFormat can be replaced by
Therefore, the PNG image
http://yourdomain.com/image.png?ims=filters:format(gif) will be converted to GIF format:
Fill imageSection titled Fill image
Create a derived image that is larger than the original, but instead of resizing it to the required size, you can fill the area with a custom color by appending the query
?ims=fit-in/WidthxHeight/filters:fill(Color) to the URL. You can use the same resize parameters with the desired dimensions for
Color is the fill color, following hexadecimal code values.
For instance, an image with the query
?ims=fit-in/400x400/filters:fill(gray) will have its surroundings resized to fit a 400x400 pixel area, and the color around this area will be gray:
By changing the color code, you can modify the surrounding color of the resized area, such as
Combine multiple filtersSection titled Combine multiple filters
Combine the filters you want by separating filter with
: into one string:
For instance, the query
?ims=fit-in/400x400/filters:fill(00ffff):quality(100) will resize an image to fit an area of 500 by 500 pixels, fill the resized area with the color
#00ffff and improve the quality to 100%: