Resize. Reduce image size when delivering over the CDN

About Resize 
Use it 

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&parameter#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

image_1735.png 500×333  

 

After: image.jpg?width=300  

image_1736-2.png300×200

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 

image_1737-2.png500×333 

 

After: image.jpg?height=300

image_1738.png450×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: 

  1. It will compare the width and height values and select the largest. In this case, the width value is greater (500 pixels). The height value will be ignored. 
  2. It will calculate the aspect ratio of an original image. In this case, it is 1000x500, which means the height is half as much as the width. 
  3. It will compress the image considering the following: the width is 500, the height should be half as much. So, the height needs to be 250. Resize will compress the image to 500x250. 

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: 

  1. It will compare the width and height values and select the smaller one. In this case, the height is smaller (500 pixels). The width parameter will be ignored. 
  2. It will calculate the aspect ratio of an original image. In this case, it is 1000x500, which means the width is twice as much as the height. 
  3. It will compress the image considering the following: the height is 300, the width should be twice as much. So, the width needs to be 600. The image will be compressed to 500x250.

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

image_1739.png500×333 


After: width=200&height=100&fit=fit or image.jpg?width=200&height=100

image_1740.png
200×100

 After: image.jpg?width=200& height=100&fit=bounds 

image_1741.png
200×133

 

 






After: image.jpg?width=200& height=100&fit=cover 

image_1742.png
150×100 

 











After: image.jpg?width=200& height=50&fit=force 

image_1743.png
200х50

 

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. 

image_1743-2.png

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.

 

Was this article helpful?
Recently viewed articles