enable image transformation

Edge Security Acceleration (ESA) provides an image transformation feature. You can use this feature to transform the format and quality of images from your origin server, and also crop, scale, and cache them. This process speeds up image retrieval and reduces origin traffic.

Limits

The following limits apply to the image editing feature.

Source image limits:

Supported formats: JPEG, JPG, PNG, WebP, BMP, GIF, TIFF, and JPEG 2000.
The source image cannot exceed 10 MB.
The width × height of the source image cannot exceed 16,777,216 px.
Note
If the image is in GIF format, its width × height is the sum of all its frames. You can use a tool such as ImageMagick to view the frame information of a GIF image.

Limits for processed images:

The total number of pixels in an image (width × height) cannot exceed 16,777,216.
When you transform an image to the WebP format, its total number of pixels (width × height) cannot exceed 16,777,216. Neither the width nor the height of the image can exceed 16,384 pixels. If the source image is animated, it is converted to a static image when transformed to the WebP format.

Cache prefetch limits:

The image transformation feature does not apply to prefetched content. When an ESA point of presence (POP) prefetches content, it only fetches the original image file from the origin and does not perform image transformations.

In the ESA console, go to Websites. In the Website column, click the target site.
In the navigation pane on the left, choose Speed and Network > Optimize.
Go to the Speed Optimization tab and turn on the Image Transformations switch. You can then add image editing parameters to the request URL to perform different image editing operations.
For example, in JavaScript, you can write a URL processing method to transform an image to another format.
```
function updateImageUrl(format) {
  let baseUrl = "https://example.com/image_01";
  let newUrl = `${baseUrl}.png?image_process=format,${format}`;
  document.getElementById('imageElement').src = newUrl;
}

// Example: Transform the image to BMP format.
updateImageUrl("bmp");

// To transform the image to another format, such as JPG:
// updateImageUrl("jpg");
```
In the code, image_process=format,${format} is the configuration for the image editing parameter. For more information about supported parameters and their value ranges, see Supported image editing methods.

Verify the result

Original request

Requesting example.com/bb.jpeg returns an image resource in .jpeg format with normal orientation.

Transformed request

Format transformation: For example, to transform a .jpeg image to .png format, change the request URL to example.com/bb.jpeg?image_process=format,png. The response is an image in .png format.
Image rotation: For example, to rotate an image 90 degrees clockwise, change the request URL to example.com/bb.jpeg?image_process=rotate,90. The response is the image rotated 90 degrees clockwise.

Supported image editing methods

ESA supports one or more transformation parameters to edit images. The following table describes the supported parameters.

Image editing method	Parameter	Description
Format transformation	format	Transforms the image format.
Quality transformation	quality	Adjusts the image quality.
Image cropping	crop	Crops the image to a specified size.
Image scaling	resize	Scales the image to a specified size. You can only scale down an image. Scaling up is not supported.
Image rotation	Automatic rotation: auto-orient Specified rotation: rotate	Automatically rotates an image based on its orientation parameter or rotates it clockwise by a specified angle.
Image color	Brightness: bright Contrast: contrast Sharpening: sharpen	Adjusts the brightness, contrast, and definition of the image.
Add watermarks	watermark	Adds an image or text watermark to the image.
Get information	info	Gets image information, such as its length, width, height, format, and quality.