This tutorial takes you through the necessary steps to start using Image and Video Manager to manage and optimize your images.

You'll learn how to:

• Add the Image and Video Manager (Images) rule and behavior to a property
• Create an image policy to automate image optimizations and transformations

Prerequisites

Before you begin, make sure you meet the following prerequisites.

You will need:

• A login to ​Akamai Control Center​
• Access to Property Manager
• A contract that includes Image and Video Manager
• An active web performance configuration
• A property corresponding to the website with the images you wish to optimize

If you do not have a web performance configuration, you will need to create one.

• For non-secure delivery, see Serve content over HTTP
• For secure delivery, see Serve content over HTTPs

For more information about creating a property, see the Property Manager documentation.

Tutorial outline

This table provides a high-level overview of the tutorial.

Connect your Images

To connect your images to Image and Video Manager, you must create an Image and Video Manager rule for the appropriate property. Rules include match criteria and behaviors. If a request fulfills the conditions in the match criteria, the behavior in the rule is applied.

Create the rule

1. Log in to ​Akamai Control Center​.

2. Go to ☰ > CDN > Properties.

3. Click the property to which you want to add the Image and Video Manager rule.

4. On the property details page, click the version of the property configuration you want to edit.

5. Click Add Rule in the Property Configuration Settings section.

6. Search for and select Image and Video Manager (Images) in the list of available rules.

7. Click Insert Rule.

Specify the match criteria

In the Criteria section, create an If statement by:

• Selecting File Extension from the first list
• Selecting is one of from the second list
• Selecting all of the required file extensions for your images

Add the behavior

1. Click Add Behavior.

2. Search for and select Image and Video Manager (Images) in the list of available behaviors.

3. Click Insert Behavior.

4. Configure the behavior settings as indicated in the following table.

5. Click Save.

Configure your image policy

An image policy contains configurable settings to automate:

• Image optimizations such as derivative image quality, derivative image widths (breakpoints), and the quality value override for slow connections

• Image transformations such as Rotate, Resize, Crop, Watermark, and so on

• Image conditions such as If Dimension and If Orientation that allow you to conditionalize which transformation is applied based on the source image's dimensions and orientation

There are two ways to create a new image policy:

• By toggling Apply Existing Policy Set to No in the Image and Video Manager (Images) behavior in the Image and Video Manager (Images) rule. This results in the automatic creation of a new policy set with a default policy.

• By logging in to ​Akamai Control Center​, navigating to ☰ > CDN > Image and Video Manager, and using the Policy Manager tools.

In this tutorial, you will edit the default policy that was already created when you created your rule. You will configure optimization settings and two transformations: Crop and Contrast.

Open your policy in Image Policy Editor

👍

New Policy Manager UI

These instructions reflect the new beta version of Policy Manager. If you are using the original version, some things may have changed. To try the new beta, click Switch to BETA.

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

   Image and Video Manager opens to the Policy Manager page.

2. Select the correct Contract from the list.

3. Expand the policy set that was created when you created your rule.

4. Open the Actions menu for the default policy and select View/Edit policy on staging.

   The Image Policy Editor appears.

Configure your optimization settings

Configure Image and Video Manager to optimize your images based on your image quality and breakpoint tolerances. Set the perceptual quality level to specify the most common breakpoint widths for your user's devices. For more information about image optimization settings, see Optimize your images.

1. Expand Image and Quality Settings.

2. Select Derivative Quality and configure your settings as follows:

   • Quality Type: Perceptual
   • Quality Value: Medium High

3. Select Derivative Widths.

4. In the text box, type the value and press enter for each of the following image breakpoints: 320, 640, 720, 1024, and 1080.

Add artistic transformations

Configure Image and Video Manager to automatically crop and change the contrast of images. You will apply the Crop transformation first, then the Contrast transformation. For more information about image optimizations see Add image transformations and conditions.

1. Click Transformations and read the description.

2. Click + to open the list of available transformations.

3. Select Crop.

4. Adjust the crop size:

   • Make sure the field is set to accept Fixed Values (in pixels)
   • Enter 600 for the Width and 300 for the Height

5. To select the crop area:

   • Set the Gravity to Center
   • Set the Horizontal Offset to 20
   • Set the Vertical Offset to 10
   • Set Allow Expansion to Yes

   This results in the center of the crop box being 20 pixels to the right of the left edge and 10 pixels up from the bottom edge. If the crop box falls partially outside of the borders of the original image, you set the borders of the source image to expand so that the original image underlays the entire crop box.

   👍

   Preview transformations

   Preview your transformations by clicking on the refresh arrow above the Preview image.

6. Click + again to see the list of transformations.

7. Select Contrast and enter a Fixed Value of 0.5.

   You can select a value between -1 and 1 with 0 being the contrast of the original image. A negative value reduces the contrast, while a positive value like 0.5 increases the contrast.

8. Refresh the preview again to see the impact of this second transformation.

Save and test your policy

1. Click Save and Test on Staging.

You are now ready to test your policy's impact on your actual images in the staging environment.