Dynamic Media: Override Smart Crop on specific Image Crop

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.

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>

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:

You can customize URLs with the crop preset:

Example:

Mobile crop:

Desktop Smart Crop (auto from profile):

Step 4: Implement in Frontend

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:

Regards,
Amit

@mansan04 Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you.