Dynamic Media: Override Smart Crop on specific Image Crop

[mansan04]

Is it possible to override the Smart Crop positioning on an image, for a specific Image Crop?

I've created an Imaging Processing Profile and added some breakpoints. At smaller screen sizes / breakpoints, I'd like to override the Smart Crop and set a custom focal point. Ideally, this would mean that when I upload an image, the Smart Crop is applied only to larger screen sizes and smaller sizes will use the custom focal point / position.

Is there a way to implement this or is it a bit too counter-intuitive to the purpose of Smart Cropping?  

[Shashi_Mulugu]

Hi @mansan04 , smartness of the Dynamic media smart crop comes with Adobe Sensei AI which detects/decides what's the focal point of the image and crops around it based on the resolution provided in the image profile smartcrops.

If you want a different smartcrops for mobile you can always goto smartcrops and readjust the map, save and publish.

[SantoshSai]

Hi @mansan04,

Smart Crop automatically detects the area of interest in an image and crops it dynamically based on image profiles and breakpoints. It’s designed to be automatic — that's the point.

How can you achieve this

Option 1: Multiple Image Profiles + Fallback Logic

AEM doesn’t allow multiple image profiles on a single asset directly, but you can simulate different behavior with custom frontend logic:

1. Set Smart Crop in the Image Profile for larger sizes.

2. Create static renditions (manual crops or focal points) for smaller breakpoints.

3. In your frontend, detect screen size and:

   • Load Smart Crop URLs for large screens.

   • Load custom cropped renditions or focal-point-based images for small screens.

This requires using Dynamic Media URL APIs or mediaargs to manually control cropping per breakpoint.

Option 2: Custom Renditions (Manual Crops)

1. Use manual cropping in AEM Assets to create smaller-breakpoint-friendly renditions.

2. Serve these renditions via custom logic in the frontend (like using <picture> tag with source and media attributes).

Option 3: Custom Smart Crop Rules via Image Profile API

Advanced: You can write custom JavaScript-based rules using Adobe’s Scene7 APIs (only available in hybrid or on-prem setups), where you define different cropping rules or focal points per breakpoint, but this is not simple and often not worth the complexity unless you're doing high-volume image personalization.

Why It’s Not Natively Supported

Smart Crop assumes a single, intelligent crop strategy per image. Adobe’s current implementation doesn’t provide per-breakpoint override support within a single image profile.

Recommendation

Use manual renditions or focal points for smaller sizes, and Smart Crop for larger ones, and handle the switching via responsive image markup like this:

<picture>
  <source media="(max-width: 480px)" srcset="/path/to/manual-crop.jpg">
  <img src="/path/to/smart-crop.jpg" alt="Optimized image">
</picture>

[AmitVishwakarma]

Hi @mansan04 ,

Try below steps:

Step 1: Setup Smart Crop Profile in AEM

  - Go to Tools > Assets > Image Profiles

  - Select or create your Image Profile.

  - Under Smart Crop, define breakpoints: 

      - Mobile (e.g. 480x320)

      - Tablet (e.g. 768x512)

      - Desktop (e.g. 1280x720)

  - Apply the image profile to your folder (with your assets).

  - Go to AEM Assets > Your Image > View Smart Crops.

Step 2: Override the Smart Crop for Mobile

  - In Smart Crop viewer:

      - Locate the Mobile crop (480x320).

      - Manually adjust the crop rectangle to set a custom focal point.

      - Click Save and Publish the asset.

Result: Desktop will use Adobe Sensei AI crop.
Mobile will use your custom crop.

Step 3: Get Dynamic Media Image URLs

Use Scene7 Dynamic Media URLs. Format:

https://<your-company>.scene7.com/is/image/<asset-name>?scl=1&fmt=jpeg

You can customize URLs with the crop preset:

Example:

Mobile crop:

https://yourbrand.scene7.com/is/image/yourAssetName?wid=480&hei=320&fit=crop

Desktop Smart Crop (auto from profile):

https://yourbrand.scene7.com/is/image/yourAssetName?wid=1280&hei=720&fit=crop

Step 4: Implement in Frontend

<picture>
  <!-- Mobile: Custom crop -->
  <source
    media="(max-width: 767px)"
    srcset="https://yourbrand.scene7.com/is/image/yourAssetName?wid=480&hei=320&fit=crop" />

  <!-- Desktop: Smart crop (auto) -->
  <source
    media="(min-width: 768px)"
    srcset="https://yourbrand.scene7.com/is/image/yourAssetName?wid=1280&hei=720&fit=crop" />

  <!-- Fallback -->
  <img
    src="https://yourbrand.scene7.com/is/image/yourAssetName?wid=800&hei=450&fit=crop"
    alt="Smart Cropped Image" />
</picture>

Note:

Use fit=crop and scl=1 carefully

fit=crop = respect the crop area

scl=1 = maintains scale

You can also use focal point crop using:

https://yourbrand.scene7.com/is/image/yourAssetName?fit=crop&crop=fp&fp-x=0.5&fp-y=0.3

Regards,
Amit