Edge Security Acceleration (ESA) provides the image transformations feature. You can convert image formats and quality, crop, resize, and cache images from the origin server. This accelerates image retrieval and reduces origin traffic.
Before you begin
Before you use image transformations, take note of the following items:
Limitations on source images:
Supported image formats: JPEG, JPG, PNG, WebP, BMP, GIF, TIFF, and JPEG 2000.
The size of a source image cannot exceed 10 MB.
The total number of pixels of a source image cannot exceed 16,777,216.
NoteIf a source image is a GIF image, the total number of pixels is the sum of all frames. You can use tools such as ImageMagick to query the frame information of a GIF image.
Limitations on processed images:
The total number of pixels of a transformed image cannot exceed 16,777,216.
If you want to convert a transformed image to the WebP format, the total pixels of the image cannot exceed 16,777,216 pixels. The width or height cannot exceed 16,384 pixels. If a source image is a dynamic image, a static image is generated when you convert the source image to the WebP format.
Enable image transformations
In the ESA console, choose Websites and click the website name you want to manage.
In the left-side navigation pane, click Speed and Network. On the Speed and Network page, click the Speed Optimization tab.
Enable Image Transformations. Then, you can add image editing parameters to request URLs to transform images.
For example, you can convert an image to another format in JavaScript by writing editing a URL processing method.
function updateImageUrl(format) { let baseUrl = "https://example.com/image_01"; let newUrl = `${baseUrl}.png?image_process=format,${format}`; document.getElementById('imageElement').src = newUrl; } // Call example to transform the image to BMP format updateImageUrl("bmp"); // Transform the image to another format, such as JPG: // updateImageUrl("jpg");
image_process=format,${format}
in the preceding code is the configuration of the image editing parameter. For more information about the parameters that can be modified and their values, see Image editing methods.
Image editing methods
The following part describes the image editing parameters that are supported by ESA.
Parameter: format
Description: Converts images into specified formats.
Parameter: quality
Description: Adjusts the quality of images.
Parameter: crop
Description: Crops images.
Parameter: resize
Description: Resizes images. The feature only supports decreasing the size of images.
Parameter:
auto-orient: automatically rotates images.
rotate: rotates images to specific orientations.
Description: Rotates images based on the orientation parameter, or rotates images clockwise based on the angle that you specify.
Parameter:
bright: the brightness of images.
contrast: the contrast of images.
sharpen: the sharpness of images.
Description: Adjusts the brightness, contrast, and sharpness of images.
Parameter: watermark
Description: Adds picture or text watermarks to images.
Parameter: info
Description: Queries image information, including the width, height, format, and quality.