Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

AEM as cloud for headless CEM with webp image format

Avatar

Level 2

Hi,

 

Have anyone worked with webp format image for headless AEM cloud? We have trouble with retrieving the image from our solution via GraphQL. We do not have Dynamic Media with AEM. Do we have to get Dynamic Media so that we can use webp images in our solution.

1 Accepted Solution

Avatar

Correct answer by
Level 2

Hi @pdong,

Have you tried the Asset Delivery Java API?
The AssetDelivery API is an OSGi service that generates web-optimized delivery URLs for image assets.

com.adobe.cq.wcm.spi.AssetDelivery.getDeliveryURL(Resource resource, Map<String, Object> parameterMap)
This service takes an asset resource as mandatory first parameter and can take an optional map of desired image transformations that are to be applied which can contain the following parameters.
  • path – Asset ID that is to be delivered, must be of pattern ([^:\[\]\|\*\/]+) (e.g.: unicorn–1234)
  • seoname – User-defined, SEO-centric name to be appended to the image URL, may contain hyphens, must be of pattern ([\w-]+) (e.g.: my-friend-the-unicorn)
  • format – The desired image format, can be gif, png, png8, jpg, pjpg, bjpg, webp, webpll, webply (e.g.: webp)
  • preferwebp – If possible, deliver WebP output, ignoring the format parameter (see FAQ about content negotiation), boolean (e.g.: true)
  • width – The desired image resolution in pixels, must be greater than 1 (e.g.: 400)
  • quality – The desired compression, between 1 and 100 (e.g.: 75)
  • c – The desired image cropping coordinates, comma-separated pixel values (e.g.: 100,100,400,200)
  • r – The desired image rotation, can be 90, 180, 270 (e.g.: 90)
  • flip – The desired image flipping, can be h, v, hv (e.g.: h)

Please let us know if this works!

 

View solution in original post

3 Replies

Avatar

Community Advisor

@pdong yes that's correct you need Some Image Intelligence services to convert any image to next generation formats and that's with Dynamic media license. Alternatively you can use Akamai Image manager as well if your CDN is akamai.

Avatar

Level 7

AEM 6.5 Assets does not support the WEBP format. List of all the supported formats

However, there are some options available to work with WEBP images. Here are a few suggestions:

1. To convert WEBP images to other supported formats like JPG or PNG and generate renditions in AEM, you have the option to utilize an external tool like ImageMagick. This can be accomplished through a Command Line workflow step, allowing you to execute the external tool directly from AEM's command line. Examples - https://experienceleague.adobe.com/docs/experience-manager-65/assets/extending/media-handlers.html?l... 

https://www.imagemagick.org/script/index.php 

2. As suggested in another post, use Dynamic Media. https://experienceleague.adobe.com/docs/experience-manager-65/assets/dynamic/imaging-faq.html?lang=e... 

3. For more advanced control and customization, you can consider creating a custom workflow step or media handler. This approach would require the use of external libraries to achieve the desired functionality. While the provided example of the webp servlet may not directly match your specific case, it can offer insights into potential external libraries that could be leveraged for your requirements. This allows you to tailor the solution according to your needs and integrate external capabilities seamlessly.

Avatar

Correct answer by
Level 2

Hi @pdong,

Have you tried the Asset Delivery Java API?
The AssetDelivery API is an OSGi service that generates web-optimized delivery URLs for image assets.

com.adobe.cq.wcm.spi.AssetDelivery.getDeliveryURL(Resource resource, Map<String, Object> parameterMap)
This service takes an asset resource as mandatory first parameter and can take an optional map of desired image transformations that are to be applied which can contain the following parameters.
  • path – Asset ID that is to be delivered, must be of pattern ([^:\[\]\|\*\/]+) (e.g.: unicorn–1234)
  • seoname – User-defined, SEO-centric name to be appended to the image URL, may contain hyphens, must be of pattern ([\w-]+) (e.g.: my-friend-the-unicorn)
  • format – The desired image format, can be gif, png, png8, jpg, pjpg, bjpg, webp, webpll, webply (e.g.: webp)
  • preferwebp – If possible, deliver WebP output, ignoring the format parameter (see FAQ about content negotiation), boolean (e.g.: true)
  • width – The desired image resolution in pixels, must be greater than 1 (e.g.: 400)
  • quality – The desired compression, between 1 and 100 (e.g.: 75)
  • c – The desired image cropping coordinates, comma-separated pixel values (e.g.: 100,100,400,200)
  • r – The desired image rotation, can be 90, 180, 270 (e.g.: 90)
  • flip – The desired image flipping, can be h, v, hv (e.g.: h)

Please let us know if this works!