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.

Action	Description
Connect your images	Add an Image and Video Manager (Images) rule with an Image and Video Manager (Images) behavior to a property to connect your images to Image and Video Manager.
Create your policy	Create an image policy.
Configure your optimization settings	Specify your tolerances for the quality and width of the derivative images created by Image and Video Manager.
Add image transformations and conditions	Add 2 of the 30+ transformations and conditions to your policy. Try cropping an image and adjusting the contrast.
Activate your policy	Save and activate your policy in the staging environment.

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

Log in to Akamai Control Center.
Go to ☰ > CDN > Properties.
Click the property to which you want to add the Image and Video Manager rule.
On the property details page, click the version of the property configuration you want to edit.
Click Add Rule in the Property Configuration Settings section.
Search for and select Image and Video Manager (Images) in the list of available rules.
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

Click Add Behavior.
Search for and select Image and Video Manager (Images) in the list of available behaviors.
Click Insert Behavior.
Configure the behavior settings as indicated in the following table.

Setting	Action
Enable	Toggle On to allow Image and Video Manager to apply optimization settings to your images and to generate the API keys.
Automatic breakpoint selection	Toggle On to let the Image and Video Manager algorithms pick the best derivative image width for the requesting device's screen size and resolution.
Use Best File Type	Toggle On to automatically convert images to the best file type for the requesting device. This results in the smallest file size that retains image quality, based on the user agent and the original pristine image.
Region	Choose the location closest to your website's heaviest traffic. If this varies, choose United States.
Pristine Images CP Code	Select the CP code to track image traffic between IM and your origin.
Derivative Images CP Code	Select the CP code to track traffic serving derivative images to end users.
Apply Existing Policy Set	Toggle to No to automatically create a new policy set to associate with this property.
Policy Set Type	Toggle to Standard to use the standard policy set name, which is based on your property name.
Policy Set Name (API Key)	Note this name and record it somewhere you can find it later. This name associates a set of Image and Video Manager policies with this instance of the Image and Video Manager (Images) behavior.

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.

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

Image and Video Manager opens to the Policy Manager page.
Select the correct Contract from the list.
Expand the policy set that was created when you created your rule.
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.

Expand Image and Quality Settings.
Select Derivative Quality and configure your settings as follows:
- Quality Type: Perceptual
- Quality Value: Medium High
Select Derivative Widths.
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.

Click Transformations and read the description.
Click + to open the list of available transformations.
Select Crop.
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
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.
Click + again to see the list of transformations.
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.
Refresh the preview again to see the impact of this second transformation.

Save and test your policy

Click Save and Test on Staging.

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