Image and Video Manager allows you to use the desktop version of a hero image to automatically create a mobile-friendly version. A hero image is a large banner image that is typically prominently placed on a website. Creating a mobile-friendly hero image helps to ensure a consistent experience, regardless of the device being used to access your website.

To create the mobile-friendly hero image, you can use the Feature Crop transformation to crop around the most interesting features of the source image.

Example of the impact on images

Here's an image before and after the feature crop transformation was applied. This original image is not typical of a hero image, but it's adequate to illustrate what can be accomplished using the Feature Crop transformation.

Original image:

With feature crop applied:

The feature crop was used to crop around the main subject of the image.

📘

Before you begin, you should know the URL of the image you want to crop—for example:

https://www.radleatherjackets.com/fallcollection/007/hero.jpg

How to

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

   The Image Policy Editor opens.

4. Expand the list of Transformations by clicking +.

5. Click Feature Crop.

   This transformation creates what's known as a region of interest by automatically identifying the most interesting features of your source image.

6. Specify the dimensions of your mobile-friendly hero image in the Width and Height fields. Here we've used 800x1200, but you can change this based on the mobile devices you're targeting.

7. Select Zoom from the Crop menu so that our region of interest occupies as much of our final mobile-friendly hero image as possible.

8. Add an additional area of the original image around the region of interest. Do this by setting the Padding value to .3. This value is a multiplier of the largest dimension of the region of interest.

   

9. To keep the region of interest centered in the final image, select Center from the Gravity menu.

10. Click Save and Test on Staging.

11. Apply the impolicy query string parameter to the end of the URL as follows:

https://www.radleatherjackets.com/fallcollection/007/hero.jpg?impolicy=mobile_hero