Dynamically resize images

Use published dimensions to dynamically resize your images.

While Image and Video Manager makes it simple to resize images by hard coding dimensions or using predefined breakpoints, it can also 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 configurations. A specific example of this is publishing 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, all without having to change any existing URLs.

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

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

It’s worth noting that in the example above, the desired width (900px) and height (600px) of the resized image exist as virtual directories in the URL. This means that those directories don’t actually exist at your origin. The URL of the source image that Image and Video Manager requests looks something like this:

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

Here's the image before and after dynamic resizing:

How to

  1. Go to > CDN > Image and Video Manager.
  2. Select a contract and a policy set name, then click Manage Policies.
  3. Click Add New Policy.
    The Name Your Policy window appears:
  4. Enter Resize in the Policy Name field and click OK.
    The Image Policy Editor appears:
  5. Add the Resize transformation by expanding the Transformations section and select Resize.
  6. Change the Fixed Value setting to Variable for both the Width and Height fields using the left/right arrows.
  7. Select the Add Variable option from the dropdown. The Policy Variables editor appears:
  8. Create two new variables, one called width, and one called height (the value of these variables will be populated by Property Manager in a later step). Also be sure to set default values for both variables to account for cases where dimensions may not be present in the image URL.
  9. Under the Aspect Behavior setting select Fill to size the image so it completely fills the given dimensions. The resulting image is the smallest possible that is at least as large as both the height and width specified.
  10. Under the Constraint Type setting select Downsize to ensure that resized images may only be the same size or smaller than the source image (this prevents accidental enlargement of the source image if incorrect dimensions are published in the URL).
    At this point our Image and Video Manager policy is complete. There is still some work that needs to be done in Property Manager to complete the setup though. Locate the delivery configuration used to serve your images through Akamai and continue with the steps below.
  11. First create two Property Manager variables, one called PMUSER_WIDTH and another called PMUSER_HEIGHT. We’ll be using these to populate the Image and Video Manager variables for width and height that we created in an earlier step.
  12. Create a new child rule under your default rule and call it IM Variables. It’s important to note that this rule must come before the rule containing your primary Image and Video Manager behavior in the rule tree, like so:
  13. Extract the image dimensions from your URL and assign them to the PMUSER_WIDTH and PMUSER_HEIGHT variables we just created using the Set Variable behavior.
  14. Assuming you use a consistent URL structure, based on our example URL (https://www.friendlyfireworks.com/assets/900/600/sparkler.jpg) we can use the Path Component Offset feature to extract our dimensions. Use an offset of 2 for the PMUSER_WIDTH variable, and an offset of 3 for the PMUSER_HEIGHT variable.
  15. Now link the Image and Video Manager variables we created earlier to the Property Manager variables we just populated using the Image Manager: Set Parameter behavior:
  16. We need an instance of this behavior for each variable. For each set the Parameter option to Link IM Variable to Property Variable. For the first behavior enter width (the name of our Image and Video Manager variable) in the Image Manager Variable field and select PMUSER_WIDTH from the Property Variable dropdown. Do the same for the second behavior using height and PMUSER_HEIGHT respectively.
  17. Finally, we need to modify the path going back to origin. Remember, the dimensions in the URL are virtual directories. Attempting to fetch the path /assets/900/600/sparkler.jpg from origin would result in a 404. Remedy this by creating a new rule called Modify Path:
    Note: It is very important to restrict this rule to only images with dimensions in the URL. Attempting to modify other URLs may result in 404s from your origin. In this example we assume that all images under the assets directory have dimensions in the path, so we can use a path match criteria on the /assets/* directory. This match may need to be modified to suit your needs.
  18. To remove the dimensions from the origin path use the Modify Outgoing Request Path behavior. Using the current example we can replace the entire path with /assets/{{builtin.AK_FILENAME}}, /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 may need to be modified to adhere to your own unique file structure.

Example

Our setup is now ready to use. Accessing the following URL will give us an image resized to exactly 900x600 pixels.

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

You can also 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

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

Next steps

For more information about adding artistic transformations to images, see the Image and Video Manager Help.