Images compression in DAM | AEM as Cloud

[ShikhaSh1]

We have a requirement where we need to compress images for a custom component. How can we use webp for custom component or any other option to compress.

Thanks !

[narendragandhi · Accepted solution]

Hello @ShikhaSh1 

If you have Dynamic Media enabled in your environment, you can use that for delivering assets in WebP format - https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/assets/dynamicme...

If you do not have Dynamic Media, you can still do this by using the Core component for images, refer this link for details - https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/developing/web-o...

Hope this helps!

Thanks

Narendra

[Ritesh_Mittal]

Hi @ShikhaSh1 ,

To enable Web-Optimized Image Delivery in AEM as a Cloud Service:

1. Activate WebP: Edit the page template, and enable "Enable Web Optimized Images" in the Image Component design dialog (available in v1, v2, v3).
2. Images are delivered in WebP format, reducing size by ~25% for faster load times.
3. Custom Components: You can use the com.adobe.cq.wcm.spi.AssetDelivery.getDeliveryURL() API for your custom components.
4. If WebP is unavailable, images fall back to the Adaptive Image Servlet.

Ensure your dispatcher doesn’t block URLs starting with /adobe to avoid delivery issues.

For more details, refer to the official documentation: Web-Optimized Image Delivery.

Thanks

Ritesh Mittal

[Pallavi_Shukla_]

Hi @ShikhaSh1 

The AEM Image Transformation API enables dynamic image transformations, including compression, format conversion, and resizing. It is especially useful for converting images to formats like WebP and adjusting quality without manual processing. In AEM as a Cloud Service, this functionality is integrated into the Asset Management pipeline, allowing direct management of image formats and compressions within components and templates.

You can apply transformations to an image by adding specific query parameters to the URL:

- Format: Convert the image to formats like WebP, PNG, or JPEG.

- Quality: Adjust compression with values between 0 (lowest quality) and 100 (highest quality).

- Resize: Specify dimensions to resize the image.

- Aspect Ratio: Resize while maintaining the aspect ratio.

- Crop: Crop the image to a defined rectangle starting at a point with a specified width and height.