There are certain situations where you may wish to crop around a focal point. For example, if you have a large image with a picture of a beach and palm trees, you might want to display the entire photo for desktop users, but display a smaller image of just the focal point for mobile users.

In a typical workflow, you would crop your original image twice to make different versions for desktop and mobile. With Image and Video Manager you can eliminate the need to create and maintain two versions. Image and Video Manager makes it possible to programmatically display the image you want for each type of user using the Region of Interest Crop transformation. The resulting image preserves as much of the region of interest as possible given the requested width and height.

Example of the impact on images

Here's the before and the after of an image that has been cropped around a region of interest that encompasses both palm trees.

Original image:

With the Region of Interest Crop applied:

How to

1. Log in to ​Akamai Control Center​, then go to ☰ > CDN > Image and Video Manager.

2. Select the correct Contract from the list.

3. Create a new policy:

   • Click +Create, then click Policy on the menu that appears.
   • Select the policy set to which you wish to add the new policy.
   • Give your new policy a name, for example, "region_of_interest_crop".
   • Click Create.

   The Image Policy Editor opens.

4. Click + to open the list of Transformations.

5. Click Region of Interest Crop.

6. Set the Width and Height.

   For this example, set both to 200 px.

   👍

   As you make your changes, you can preview them by by clicking on the refresh arrow above the preview pane.

7. Set the Crop Style to "Crop", "Zoom", or "Fill".

   For this example, select "Fill", which fills the area to crop with as much of the source image as possible while also including as much of the region of interest as possible. The output image resizes to exactly the specified width and height.

8. Select the Gravity, which is the anchor point for the crop (North, South, East, West, and so on).

   For this example, select "Center".

9. Under Transformations > Region of Interest Crop, click Point, Rectangle, or Circle (whichever is visible).

10. Set the shape of the crop and its properties:

    • Select the Shape Type. For this example, select Rectangle.

    • Set the Anchor X and Anchor Y Coordinates. These are the X and Y coordinates for the Northwest corner of the rectangle. These can be fixed values or variables. For this example, set the X coordinate to 900 px and the Y coordinate to 150 px.

    • Set any additional parameters for the shape you have selected. For this example, set both the width and height to 50 px.

11. When you are satisfied with your policy, click Save and Test on Staging.