Product category pages on a websites are a great example of uniformly sized images appearing in rows and columns—an image grid. You can use a combination of the Image and Video Manager Resize, Crop, and Background transformations to fit your images into an existing image grid on your website. This reduces the number of images you need to store and maintain.

To do this, Image and Video Manager needs to:

• resize your images to fit the image grid
• crop the images to focus on the area you specify
• apply a background color to fill any space not occupied by images

Example of the impact on images

Here's an example of an image before and after a red background color was applied to fill the top and bottom areas of a resized image:

Original image:

With background color applied:

📘

Before you begin, you should know the URL of the image you are adding the background to, for example:

https://www.travelanywhere.com/Place_Archive/0503/palmbeach.jpg.

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, "resize_image_for_grid".
   • Click Create.

   The Image Policy Editor opens.

4. Click + to open the list of Transformations.

5. Click Resize.

6. Configure your settings:

   • Set Width and Height. For example, set both to 150 px to create a square image.
   • Set Aspect Behavior to Fit. This preserves the aspect ratio of the image while creating the largest size image that still fits entirely within those dimensions.
   • Set Constraint Type to Downsize. This means the image will be resized only if the resulting image is smaller than the original.

7. Click + to open the list of Transformations.

8. Click Crop.

9. Set the following parameters:

   • Set Width and Height. These should match the resize dimensions you just entered.
   • Set Aspect Behavior to Fit. This preserves the aspect ratio of the image while creating the largest size image that still fits entirely within these dimensions.
   • Set Constraint Type to Downsize. This means the image will be resized only if the resulting image is smaller than the original.
     -Set Gravity to reflect the area of the image your want to use for your crop, for example, "Center".
   • Set Allow Expansion to Yes. This will extend the borders of the original image to match up with the edges of the crop box.

10. Click + to open the list of Transformations.

11. Click Background Color.

12. Enter the hex color value that matches the look and feel of your website, for example, #f00 (red).

13. Refresh the preview pane to preview your changes.

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

15. Apply the impolicy query string parameter to the end of an image URL as follows:

https://www.travelanywhere.com/Place_Archive/0503/palmbeach.jpg?impolicy=resize_image_for_grid