Crop. Crop images when delivering over the CDN

About Crop
Use Crop
Crop parameters 
      Crop an image changing its aspect ratio 
      Crop an image at its center 
      Crop a section at a specific location: 
            • using two offsets measured in pixels 
            • using two coordinates measured as a percentage of an original image
            • using ratio of unwanted areas
            • using one offset and one coordinate

About Crop

What is it? Crop is a tool that crops an original image before it is delivered over the CDN. You specify cropping parameters in the settings (a target area and its location).

Example: an origin server hosts a 500×500 px image, but with Crop, you set 200×200 as dimensions of a new image to be cropped at its center. When the CDN delivers the image, it gets automatically cropped — the tool cuts off everything except for the 200×200 area at the center. The origin still has the 500×500 image, but end-users get its cropped version — 200×200.

How it works. To use Crop, you add necessary query strings to image URLs on your website source. So, when a user requests a webpage, the CDN returns it with cropped images.

Features. The Crop tool supports only PNG and JPG images.

Crop is included in the paid WebP compression option. This option helps to optimize images: convert to WebP format, crop, resize, and change quality. To use Crop, you need to enable WebP compression.

Use Crop

1. Activate WebP compression for the 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 strings with URL of the images you want to crop.

4. Add the query strings to the URLs of the images as follows:

image.jpg?parameter=values

where image.jpg is the image URL on the website. Learn more about all available parameters in the "Crop parameters" section.

For example, you can use the ?crop=width,height parameter — it specifies dimensions of the target area to be cut from the center of an original image. Let's say you want to cut out a 200×100 area.

Frame_1411.png

To do this, add the query string to the image URL as follows: image.jpg?crop=200,100. The tool cuts out a 200x100 section from the center of the original image. It is the section that will be returned to the users who request the image.

image_1798.png

5. Save the changes in the website source code.

Setup is finished! Now, when a user goes to the webpage, it will open with cropped pictures.

You can use the x-img-operations HTTP header of an image to check if cropping parameters have been applied. It reflects all conversions. If the value includes "crop", the image has been cropped.

image_1874.png

If the header contains no "crop" value and the CDN returns the original uncropped image, check the img-skip-reason header. It explains why the conversion fails.

image_1876.png

Crop parameters

With Crop, you can cut out a section of an original image. This is the section that your users will receive. You add a query string with a target area and its location. There are three configuration options. Each of them is described below. 

Crop an image customizing its aspect ratio

Parameter: ?crop=16:9

where:

  • 16 — the ratio of the target width to its height,
  • 9 — the ratio of the target height to its width.

How it works: the tool crops an image evenly to fit for the specified aspect ratio. 

Example: an origin server hosts a 400×300 image. Its aspect ratio is 4:3. To illustrate it, we place a grid on the picture.

Frame_1423.png

You set a new aspect ratio (4:5) by adding the query parameter to the image URL:

img.jpg?crop=4:5 

The tool selects a section with this aspect ratio at the center of the original image.

Frame_1424.png

Then it cuts off unwanted parts. Your users will see the image as follows:

image_1831_2x.png

How the tool defined what to crop:

1. It compared the values in the aspect ratio (4 and 5) and chose the greater one (5). So, it figured out which side of the original image did not need to be cropped. The value 5 corresponded to the height, so the height would remain the same — 300 pixels.

2. It calculated the width to fit for the aspect ratio. It multiplied the original height by the ratio of 4:5 — that was, 300 by 4:5. So, it got the target width — 240 pixels.

3. It placed a 240×300 area at the center of the original image and cropped it.

Crop an image at its center

Parameter: ?crop=300,200

where:

  • 300 — the target width,
  • 200 — the target height.

How it works: the tool keeps the target area at the center and cuts off unwanted parts.

Example: an origin server hosts a 400×300 image. You only want to keep a 200×100 section at the center. To do this, you add the desired parameter to the image URL:

img.jpg?crop=200,100

Frame_1412.png

The tool crops a 200×100 area from the center. It is the section that users will receive when downloading the webpage.

image_1848.png

Crop a section of an original image from a specific location 

To cut out a section from a specific location, first add the parameters of target width and height (?crop=(width),(height)), and then the location of the section. The location can be specified in four ways. We describe them below. 

Specify a location with two offsets measured in pixels

Parameter: ?crop=300,200,x100,y50

where:

  • 300 — the target width,
  • 200 — the target height,
  • 100 — the number of pixels to offset from the original left side,
  • 50 — the number of pixels to offset from the original top.

How it works: the tool positions the target area so that its upper-left corner is at the specified coordinate. Then it cuts out the section.

Example: an origin server hosts a  400×300 image; you want to cut out only the 200×100 section with the dog's muzzle.

Frame_1413.png

To crop an image, you add the query parameter to the URL:

img.jpg?crop=200,100,x107,y30 

Before being delivered to an end-user, an image goes through the following conversions:

1. As you set in the query parameter, the target area is 200×100 (crop=200,100), so the tool selects this area in the picture.

Frame_1414.png

2. You also indicate the coordinates of the starting point for cropping — 107 pixels from the left side and 30 pixels from the top (x107,y30). The tool drags the target area so that its upper-left corner is at this point.

Frame_1415.png

3. The tool cuts out the section. The cropped image looks as follows:

image_1832.png

Specify a location using two coordinates measured as a percentage of an original image

Parameter: ?crop=300,200,x25p,y10p

where:

  • 300 — the target width,
  • 200 — the target height,
  • 25 — the percent of the original width to offset from the left side,
  • 10 — the percent of the original height to offset from the top.

How it works: the tool positions the target area so that its upper-left corner is at the specified coordinate. Then it cuts out the section.

Example: an origin server hosts a  400×300 image; you want to cut out only a 200×100 section with the dog's muzzle.

Frame_1416.png

To crop an image, you add the query parameter to the URL:

img.jpg?crop=200,100,x25p,y10p 

Before being delivered to an end-user, an image goes through the following conversions:

1. As you set in the query parameter, the target area is 200×100 (?crop=200,100,x25p,y10p), so the tool selects this area in the picture.

Frame_1417.png

2. You also indicate the starting point for cropping (?crop=200,100,x25p,y10p) — offset 25% of the original width from the left side and 10% of the original height from the top (x25p,y10p). The tool drags the target area so that its upper-left corner is at this point.

Frame_1418.png

3. The tool cuts out the section. The cropped image looks as follows:

image_1843.png

Specify a location using the ratio of unwanted areas

Parameter: ?crop=300,200,offset-x20,offset-y40

where:

  • 300 — the target height,
  • 200 — the target width,
  • 20 — the percent of the unwanted width that should be cropped from the left side,
  • 20 — the percent of the unwanted height that should be cropped from the top,

How it works: the tool positions the target area so that the specified percentage of unwanted area remains on the left and on the top. Then it crops the image.

Example: an origin server hosts a  400×300 image; you want to cut out only a 100×100 section with the dog's paws.

Frame_1419.png

To crop an image, you add the query parameter to the URL:

img.jpg?crop=100,100,offset-x50,offset-y81 

Before being delivered to an end-user, an image goes through the following conversions:

1. You specify the target area — 100×100 (crop=100,100,offset-x50,offset-y81). The tool selects the target area in the picture.

Frame_1420.png

2. The tool drags the target area to the right until 50% of the unwanted width remains on the left (crop=100,100,offset-x50,offset-y81). Accordingly, 50% of the unwanted area remains on the right.

Frame_1421.png

3. It moves the target area down until 81% of the unwanted height remains on the top (crop=100,100,offset-x50,offset-y81). Accordingly, 19% of the unwanted height remains at the bottom.

Frame_1422.png

3. The tool cut outs the target area. The cropped image looks as follows:

image_1840.png

Specify a location using an offset measured in pixels and one coordinate measured as a percentage of an original image

You can combine the previous options to crop an original image from a specific place. For example, you can set the horizontal coordinate in pixels and the percentage of unwanted vertical area.

Examples of combined query parameters:

  • ?crop=width,height,x(x-axis value),offset-y(percentage of unwanted area to be cropped from the top)
  • ?crop=width,height,offset-x(percentage of unwanted area to be cropped from the left),y(y-axis value)
  • ?crop=width,height,x(percentage of unwanted area on the x axis),offset-y(percentage of unwanted area to be cropped from the top)

The tool will crop an image as described above.

Was this article helpful?
Recently viewed articles