Create a mobile friendly hero-image

Re-use the desktop version of an image to automatically create a mobile friendly version.

You can create a mobile friendly hero image using the same hero image you used on the desktop version of your site. This allows you to utilize the same source image, but modify it for the best viewing experience on mobile. This simplifies the number of assets to maintain while making your site more visually appealing. A large image may be perfect on your desktop site but on a mobile device the full screen image might not work. Often times images become too small to appreciate and you lose the visual punch you want.

The Feature Crop transformation lets you crop around the most interesting features of the source image.

In this recipe we cropped the source image to emphasize the main subject:

To create a mobile friendly hero image, locate the URL of the image you want to crop. For example, the URL for this example is:

How to

  1. Go to > CDN > Image and Video 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 by expanding the Transformations section and select Feature Crop.
  6. This transformation creates what’s known as a ‘region of interest’ by automatically identifying the most interesting features of your source image:
  7. 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.
  8. Select Zoom from the Crop dropdown to ensure that our region of interest occupies as much of our final mobile hero image as possible.
  9. 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:
  10. 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 and Video Manager to apply if there are no features found in the source image.
  11. Save the mobile_hero policy and go to the URL for the image on your staging web site.
  12. Apply the impolicy query string parameter to the end of the URL as follows:
    The following image now appears:

Next steps

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