In addition to resizing images using hard coded dimensions, you can use Image and Video Manager to dynamically resize images based on published dimensions.

This is particularly useful if you want to allow a creative team to resize images without giving them access to Image and Video Manager.

A specific example is published image dimensions in the URL path. Using both Image and Video Manager and Property Manager it's possible to extract those dimensions and use them to dynamically resize images without having to change any existing URLs.

The URL for the image must be on your domain and contain image dimensions in the path, for example:

https://www.friendlyfireworks.com/assets/900/600/sparkler.jpg

It's worth noting that the desired width (900px) and height (600px) of the resized image exist as virtual directories in the URL. Those directories don't actually exist at your origin. The URL of the original image that Image and Video Manager requests actually looks something like this:

https://origin.friendlyfireworks.com/assets/sparkler.jpg 

Example of the impact on images

Here's an example of an image before and after dynamic resizing:

Original image:

After dynamic resizing:

How to

Create the policy

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

   The Image Policy Editor opens.

4. Click + to open the list of Transformations.

5. Click Resize.

6. Set Width and Height to use variables:

   • Change Fixed Value to Variable for both parameters.
   • Click Variable in the Width field and select Add Variable.
   • in the Policy Variables editor, create two new variables: one called width, and one called height.

   The values for these variables will be populated by Property Manager in a later step. Set default values for both variables to account for cases where dimensions may not be present in the image URL.

7. Set Aspect Behavior to Fill. This resizes the image to completely fill the given dimensions. The resulting image is the smallest possible that meets the height and width specified.

8. Set Constraint Type to Downsize to make sure that resized images are limited to the same size or smaller than the original image. This prevents accidental enlargement of the original image if incorrect dimensions are published in the URL.

Complete the setup in Property Manager

1. Create two Property Manager variables: one called PMUSER_WIDTH and another called PMUSER_HEIGHT. You will use these to populate the Image and Video Manager variables you created in Image Policy Editor.

2. Create a new child rule under your default rule and call it IM Variables.

   🚧

   This rule must come before the rule containing your primary Image and Video Manager rule in the rule tree.

3. Extract the image dimensions from your URL and assign them to the PMUSER_WIDTH and PMUSER_HEIGHT variables you just created using the Set Variable behavior.

4. Use the Path Component Offset feature to extract the dimensions. Use an offset of 2 for the PMUSER_WIDTH variable, and an offset of 3 for the PMUSER_HEIGHT variable.

📘

This assumes that you use a consistent URL structure like the following URL:

https://www.friendlyfireworks.com/assets/900/600/sparkler.jpg

5. Link the Image and Video Manager variables you created earlier to the Property Manager variables you just populated using the Set Parameter behavior.

   • Create an instance of this behavior for each variable.
   • Set Parameter to Link IM Variable to Property Variable for both.
   • For the first behavior, enter "width" in the Image Manager Variable field (this is the name of the variable you created in Image Policy Editor), then select PMUSER_WIDTH from the Property Variable list.
   • Repeat the previous step for the second behavior, entering "height" and selecting PMUSER_HEIGHT.

6. Modify the path going back to the origin. This is required because the dimensions in the URL are virtual directories. Attempting to fetch the path /assets/900/600/sparkler.jpg from origin will result in a 404 error, so you will create a new rule called" Modify Path".

   🚧

   It is very important to restrict this rule to only images with dimensions in the URL. Attempting to modify other URLs may result in 404 errors from your origin. In this example it is assumed that all images under the assets directory have dimensions in the path, so you can use a path match criteria on the /assets/* directory. This match may need to be modified to suit your needs.

7. To remove the dimensions from the origin path use the Modify Outgoing Request Path behavior.

   In our example, you can replace the entire path with /assets/{{builtin.AK_FILENAME}}, with /assets/ being our image directory and {{builtin.AK_FILENAME}} being a default variable representing the filename from the incoming request. It is likely that this behavior will need to be modified to adhere to your own unique file structure.

Create additional sizes

You can create additional sizes by adjusting the dimensions in the URL without requiring changes to your Image and Video Manager policy or delivery configuration. If you wanted to resize the same image to 400x267 pixels you could do so by publishing the URL with /400/267 in the path, for example:

https://www.friendlyfireworks.com/assets/400/267/sparkler.jpg`, would result in the image.

The resulting image is 400 x 267 px.