Create a Mobile Friendly Hero Image From a Desktop Image

Before you begin

To create a mobile hero image, locate the URL of the image you want to crop. For example, if you want to create a mobile version of the following hero image:
Find that the URL for this image is:

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

Now create a policy in Image Manager called mobile_hero.

How to

  1. Open the application.
    • In the new Akamai Control Center UI, go to > CDN > Image Manager.
    • In the classic Luna UI, on the Configure menu, go to Image Manager and click Policy 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 a name for the policy in the Policy Name field and click OK (in this case we’ve used mobile_hero as our policy name, but you can use any naming convention you like).
    The Image Policy Editor appears:
  5. Add the Feature Crop transformation to your Workflow section. 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 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 dropdown to ensure that our region of interest occupies as much of our final mobile hero image as possible.
  8. You may want to add an additional area of the source 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, as follows:
  9. To keep our region of interest centered in the final image select Center from the Gravity dropdown. You can optionally use the Crop Gravity When No Features setting to define an alternate crop gravity for Image Manager to apply if there are no features found in the source image.
  10. Save the mobile_hero policy and go to the URL for the image on your staging web site.
  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
    The following image now appears:

Next steps

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