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:
Now create a policy in Image Manager called mobile_hero.
- Go to .
- Select a contract and a policy set name, then click Manage Policies.
Click Add New Policy.
The Name Your Policy window appears:
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
The Image Policy Editor appears:
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
- 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.
- Select Zoom from the Crop dropdown to ensure that our region of interest occupies as much of our final mobile hero image as possible.
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:
- 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.
- Save the mobile_hero policy and go to the URL for the image on your staging web site.
Apply the impolicy query string parameter to the end of the URL as follows:
The following image now appears:
For more information about adding artistic transformations to images, see the Image Manager Help.