Skip to main content
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
narendragandhi
narendragandhiAccepted solution
Community Advisor
November 23, 2024

Hello @shikhash3 

 

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/dynamicmedia/best-practices-for-optimizing-the-quality-of-your-images

 

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-optimized-image-delivery

 

Hope this helps!

 

Thanks

Narendra

View in thread

4 replies

narendragandhi
Community Advisor
narendragandhiCommunity AdvisorAccepted solution
Community Advisor
November 23, 2024

Hello @shikhash3 

 

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/dynamicmedia/best-practices-for-optimizing-the-quality-of-your-images

 

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-optimized-image-delivery

 

Hope this helps!

 

Thanks

Narendra

Translate
    Ritesh_Mittal
    Adobe Champion and Community Advisor
    Ritesh_MittalAdobe Champion and Community Advisor
    Adobe Champion and Community Advisor
    November 23, 2024

    Hi @shikhash3 ,

     

    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

    Translate
      Pallavi_Shukla_
      Community Advisor
      Pallavi_Shukla_Community Advisor
      Community Advisor
      November 25, 2024

      Hi @shikhash3 

       

      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.

      Translate
        joerghoh
        Adobe Employee
        joerghohAdobe Employee
        Adobe Employee
        December 1, 2024

        What do you mean with "compress"? Does it relate to image (file) size or are you rather referring to dimensions (width/height)?

        Translate
        Terms & ConditionsAccessibility statement

        Loading footer...