Overview
The image processing feature allows you to adjust the size and format of images as needed. By directly processing, caching, and responding to images through EdgeOne edge servers, your business origin only needs to store the original images, thereby reducing image management costs. EdgeOne edge servers compress images without affecting visual perception to improve page loading speed and optimize image acceleration performance, enhancing user experience while maintaining image quality.
Supported Image Processing Capabilities
Resize
Feature | Parameter | Value (type/pixel) | Note |
Resize | eo-img.resize | w/<Width>. For example: w/100 | Changes the width to the specified value. The height is automatically adjusted based on the aspect ratio. |
| | h/<Height>. For example: h/100 | Changes the height to the specified value. The width is automatically adjusted based on the aspect ratio. |
| | w/<Width>/h/<Height>. For example: w/100/h/100 | Specify both the width and height |
| | l/<Long>. For example: l/100 | Changes the long side of an image to the specified value. The short side is automatically adjusted based on the aspect ratio. |
| | s/<Short>. For example: s/100 | Changes the short side of an image to the specified value. The long side is automatically adjusted based on the aspect ratio. |
Format Conversion
Supports converting the original image into a specified format by carrying designated parameters.
Feature | Parameter | Supported Input Formats | Supported Output Formats |
Format Conversion | eo-img.format | Static images: JPG, PNG, BMP, JP2, JXR, GIF, WebP, AVIF, HEIF | Supported static formats: JPG, PNG, BMP, JP2, JXR, GIF, HEIF, WebP, AVIF |
| | Animated Images: GIF, WebP, AVIF, HEIF | Static: JPG, PNG, BMP, JP2, JXR (using the first frame of a GIF animation as a single static image)
Dynamic: GIF, WebP, AVIF, HEIF |
Description
The original image to be processed should not exceed 32 MB.
The width and height of the input original image should not exceed 30,000 pixels, and the total pixels should not exceed 250 million pixels. For animated images, the product of the original image's width, height, and frame number should not exceed 250 million pixels.
The input GIF format animation does not exceed 300 frames.
The width and height of the output image must not exceed 9999 pixels.
Note:
In any of the following situations, image processing may fail, resulting in the original image being returned:
1. If any parameter of the original image or the resulting image exceeds the above limits, we will be unable to process the image and can only respond with the original image.
2. When incorrect request parameters are entered, the image will not be processed and the original image will be returned directly, as in the following scenarios:
Repeated input parameters:
eo-img.resize=w/100&eo-img.resize=w/200 will be considered as invalid arguments;Spelling Error: Any parameter with a format or spelling error, such as
eo-img.resize=w=100, will be considered an invalid argument;Resize Parameter Error: The parameters
w/ (width) and h/ (height) should not be mixed with s/ (short side) and l/ (long side). For instance, w/300/s/200 is an invalid argument, and the image will remain unchanged.3. If the Image Resize feature is disabled in the console, all eo-img related parameters are treated as standard query strings, and the image processing feature will not be triggered.
4. If an abnormal situation occurs that prevents the image from being processed normally, we will prioritize providing the original image. In subsequent requests, we will automatically attempt to reprocess the image.
Billing description
This feature is billed based on the number of image resizing requests. For more information, see Billing Overview.
Note
The image resize feature is currently free for a limited time. An announcement will be released when the free trial ends.
Directions
You can directly implement image scaling by concatenating image processing related parameters in the client request URL. Refer to the following steps to understand how to use it.
If you prefer not to alter the original client request URL, you can utilize the capabilities of EdgeOne's edge functions to automatically adapt the scale or convert the image format based on the client request information. For usage, please refer to: Implementing Adaptive Image Format Conversion through Edge Functions.
Adding Image Processing Parameters to the Client Request URL
If you need to resize images by adding relevant parameters to the client request URL, you can refer to the following steps:
1. Log in to the EdgeOne console and choose Site Acceleration > Media Processing on the left sidebar.
2. On the Media Processing page, activate the Image Scaling feature by toggling the switch to the 'On' position to start using it.
3. Once enabled, you simply need to append the
eo-img related parameters to the client request URL to convey the image scaling requirements. EdgeOne will automatically complete the image processing based on the image processing parameters in the client request URL. For example, https://www.example.com/foo.png?eo-img.resize=w/100.Image Processing Example
In the following examples, the original image is 500 × 280 pixels in resolution and 500 KB in size.
1. Change the width to 200 pixels, and the height is automatically adjusted based on the aspect ratio.
Request URL:
http://www.example.com/foo.png?eo-img.resize=w/200.
2. Change the height to 200 pixels, and the width is automatically adjusted based on the aspect ratio.
Request URL:
http://www.example.com/foo.png?eo-img.resize=h/200.
3. Change the width to 300 pixels and the height to 200 pixels.
Request URL:
http://www.example.com/foo.png?eo-img.resize=w/300/h/200.Note
If both the width and height are specified, the aspect ratio of the original image may not be retained.
4. Change the long side to 400 pixels, and the short side is automatically adjusted based on the aspect ratio.
Request URL:
http://www.example.com/foo.png?eo-img.resize=l/400.
5. Change the short side to 200 pixels, and the long side is automatically adjusted based on the aspect ratio.
Request URL:
http://www.example.com/foo.png?eo-img.resize=s/200.
6. Convert the image to WebP format.
Request URL:
http://www.example.com/foo.png?eo-img.format=webp.Output image format: WebP
7. Change the width to 200 pixels, with the height automatically adjusted based on the aspect ratio, and convert the format to WebP.
Request URL:
http://www.example.com/foo.png?eo-img.resize=w/200&eo-img.format=webp.