Hello World tutorial (images)
This tutorial takes you through the necessary steps to start using Image & Video Manager to manage and optimize your images.
You'll learn how to:
- Add the Image & Video Manager (Images) rule and behavior to a property
- Create an image policy to automate image optimizations and transformations
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 & 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.
This table provides a high-level overview of the tutorial.
|Connect your images||Add an Image & Video Manager (Images) rule with an Image & Video Manager (Images) behavior to a property to connect your images to Image & 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 & 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 & Video Manager, you must create an Image & 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 & 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 & 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 & Video Manager (Images) in the list of available behaviors.
Click Insert Behavior.
Configure the behavior settings as indicated in the following table.
|Enable||Toggle On to allow Image & Video Manager to apply optimization settings to your images and to generate the API keys.|
|Automatic breakpoint selection||Toggle On to let the Image & 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 & Video Manager policies with this instance of the Image & 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 & Video Manager (Images) behavior in the Image & 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 & 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 & Video Manager.
Image & 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 & 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 & 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.
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 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.
Updated 3 months ago