About Resize
What is it? Resize is a tool that reduces height and width of an original image when it is delivered over the CDN. You set the height, width and reduction method (compression or cropping) for each image.
Example: an origin server hosts a 1000x600 pixel image, but you set the following Resize parameters: height=500, width=300. As soon as the image gets in the CDN cache, it is automatically reduced in size. As a result, the origin still has the 1000x600 image, but end-users receive its reduced version — 500x300.
How it works. To set a new height and width for an image, you add the necessary query string to the image URL on your website source. These query strings are described in the Use Resize section. When a user requests a website page, the CDN will deliver it with reduced images.
Features. Resize is included in the paid WebP compression option. This option helps to optimize images: convert to WebP format, crop, change quality and size. To use Resize, you need to enable WebP compression.
Use Resize
1. Activate WebP compression for a CDN resource linked to the website which images you want to reduce. You can do this according to the guide: Enable and configure WebP compression.
2. Open the website source code.
3. Find the strings with the URLs of the images that you want to reduce using Resize.
4. Add the query strings to the URLs of the images.
A query parameter should be set as follows:
image.jpg?parameter=value
Two or more parameters should be set as follows:
image.jpg?parameter#1=value¶meter#2=value&…
where image.jpg is the URL of an image on the website.
|
Query parameter, how it works |
Example |
|
Width Width compresses an image while preserving the aspect ratio of an original image. This parameter is used to set the target width of a new image in pixels. The height will be automatically adjusted to maintain the original aspect ratio. Example: an origin server hosts an image 900 (wide) × 600 (high). You set the target width: width=300. The width must be reduced by three. The height will also be reduced by three, and you will get a 300x200 image. |
Before: image.jpg
After: image.jpg?width=300
|
|
Height Height parameter compresses an image while preserving the aspect ratio of an original image. This parameter is used to specify the target height of a new image in pixels. The width will be automatically adjusted to maintain the original aspect ratio. Example: an origin server hosts an image 900 (wide) × 600 (high). You set the target height: height=300. The height must be reduced by two. The width will also be reduced by two, and you will get a 450x300 image. |
Before: image.jpg
After: image.jpg?height=300
|
|
Fit Fit controls how the image will be reduced: cropped from sides, compressed keeping the original aspect ratio, or compressed ignoring the original aspect ratio. To use fit, specify both width and height of a future image and then add the fit parameter as follows: image.jpg?width=300&height=100&fit=… If you specify only width and height, without fit parameter, the default value fit=fit will be applied. There are four possible values for fit: 1. fit=fit The image will be as wide and high as you have specified. The excess pixels will be cut off evenly from all four sides. Example: an original image is 1000×500 pixels, and you specify: width=800, height=100, fit=fit. To fit the final image for 800×100, the system will cut off 100 pixels from the top and bottom, and 200 pixels from the left and right sides. 2. fit=bounds The image will be compressed proportionally. Resize will select the greater dimension between the width and height, and will use it to resize, ignoring the second dimension value. Simply put, the size of a greater dimension will be as you have specified. And the size of a smaller one will be adjusted to maintain the aspect ratio of an original image. Example: an origin server hosts an image that is 1000×500 pixels. You specify: width=500, height=300, fit=bounds. How Resize will work:
3. fit=cover The image will be compressed proportionally. Resize will select the smaller dimension between the width and height, and will use it to resize, ignoring the second dimension value. Simply put, the size of a smaller dimension will be as you have specified. And the size of a greater one will be adjusted to maintain the aspect ratio of an original image. Example: an origin server hosts an image that is 1000×500 pixels. You specify: width=500, height=300, fit=bounds. How Resize will work:
4. fit=force The final image will be as wide and high as you have specified in the parameters. The image will be compressed in width and height, and the aspect ratio of an original image will be ignored. |
Before: image.jpg
After: image.jpg?width=200& height=100&fit=bounds
|
500×333 
300×200
500×333 
450×300
500×333 
5. Save the changes in the website source code.
Now images on the website will be shown to an end-user with the dimensions that you set.
You can use the HTTP header value of the image to check if the changes have been applied. The X-Img-Operations header reflects all the conversions performed. If the value includes "resize", the image size has changed.
If the HTTP header contains no resize value and CDN returns origin image, check the Img-skip-reason HTTP header. It explains the reason why the operation could not be done.