Enabling preview for web-optimized image

[s1101v]

Hi,

I have a requirement to enable previewing of WebP images (*.webp) in AEM On-Premise, specifically in the author instance. Essentially, when an image is uploaded, you should be able to see its preview. Currently, we’re unable to preview WebP images even though the WebP MIME type has been added to the OSGi configuration.

I understand that AEM On-Prem does not natively support WebP images, but my requirement is specifically to preview the image in the author instance.

Please note that my use case applies only to AEM On-Premise and does not involve AEM as a Cloud Service or acquiring a Dynamic Media/Scene7 license for smart imaging capabilities.

The use case is strictly to preview the image once uploaded to the DAM. If this works, we can configure ImageMagick to generate the necessary renditions in WebP format. I have already reviewed the following suggestions.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-assets/aem-6-5-assets-supp...

@lukasz-m @VeenaVikraman @vanegi @Mahedi_Sabuj @aanchal-sikka @EstebanBustamante @h_kataria @sherinregi @Kiran_Vedantam  @Abhishek_Dweved 

[AbhishekCa]

@s1101v ,

i am able to see a preview of webp image when i upload it to my local dam.

which version of aem are you using?

[s1101v]

I'm using AEM 6.5.22.0

[s1101v]

Please confirm if you're using AEM Cloud or AEM On-Prem version.

[GabrielMircea]

Ensure that the MIME type is registered in:

• Apache Sling Mime Type Service
• Apache Jackrabbit Oak Blob Data Store

And create a custom handler or override the existing preview handler for WebP images by extending the DAM AssetProcessor service.

[s1101v]

Thanks for your reply. I have made changes only to the Mime Type configuration so far. Let me check the Oak Blob Data Store, as you suggested.

Could you please explain more about the need to introduce a custom handler or override the existing DAM AssetProcessor service?

[s1101v]

I'm not able to locate this config "Apache Jackrabbit Oak Blob Data Store". Can you share the screenshot?

[GabrielMircea]

The AssetProcessor service in AEM processes uploaded assets and generates previews or renditions. By default, AEM processes common formats like PNG, JPEG, and PDF, but WebP is not natively supported. Extending the AssetProcessor service allows you to handle WebP files and create previews for them.

You can develop a custom OSGi component to process WebP assets. This involves implementing the AssetProcessor interface and registering the component in AEM.

In the process method, you:

• Read the WebP file from the uploaded asset's rendition.
• Convert the WebP file to a supported format (like JPEG or PNG) using a tool like:
  • ImageMagick: Popular tool for image conversion.
  • Java WebP Library: Libraries like webp-imageio for Java.
• Create and add a rendition for the converted preview image.

This implies that you want to convert the webP images to another format, such as .png for example.

But there are other options, as you can read here: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-assets/aem-6-5-assets-supp...

[s1101v]

Thank you for the details. I have a few more questions. Could you please share your inputs on the following:

1. I am unable to locate this configuration to register the MIME type for:
   Apache Jackrabbit Oak Blob Data Store

2. Regarding the generation of thumbnail images, I want to retain the original WebP format for the thumbnails. That is, I do not want to create JPEG or PNG files for the thumbnails; the generated thumbnails should have a .webp extension.

[GabrielMircea]

Go to: /system/console/configMgr

Search for "Apache Sling MIME Type Service" or something like that.

Add image/webp to the list of MIME types if it’s not already present.

Save the configuration.

When you upload a WebP image to the DAM, ensure its jcr:mimeType is set to image/webp

[s1101v]

I have already updated Apache Sling MIME Type Service” before I raise this ticket.

The issue is with adding the MIME type in Apache Jackrabbit Oak Blob Data Store. 
Do we update anything service. You have listed this one in your initial response.

[GabrielMircea]

Ah, my bad. So, in regards to the Apache Jackrabbit Oak Blob Data Store. Do you use FileDataStore configuration? If the jcr:mimeType is not correctly set, the issue may be from Oak not recognizing WebP as a valid type.

Navigate to MIME Types:

Path: /jcr:system/jcr:mimeTypes.

Add the WebP MIME Type:

Create a new node under /jcr:system/jcr:mimeTypes:

Name: image/webp

Properties:

jcr:mimeType: image/webp

jcr:primaryType: nt:unstructured

[test1234567]

Thanks for providing the details. We do not use any FileDataStore configuration in our instance. Regarding the jcr:mimeType, I do not see any existing node under the path /jcr:system/. If I need to create a new node named "jcr:mimeTypes" under "/jcr:system", should I use "nt:unstructured" as the jcr:primaryType or different one?

Additionally, when creating a new node under /jcr:system/jcr:mimeTypes, the slashes are not supported in the node name "image/webp". Should I follow any specific naming convention?

Lastly, please let me know if making the above changes and updating the Apache Sling MIME Type Service to add the webp mimeType, as well as extending the DAM AssetProcessor service, will allow the preview to start working.

[GabrielMircea]

When creating the node /jcr:system/jcr:mimeTypes, you should use the nt:unstructured node type as the jcr:primaryType.

The slashes in MIME type names (e.g., image/webp) are not supported in node names. Instead, you should create the node name as image_webp or a similar valid JCR name that replaces the slash.

The steps you described, combined, should enable WebP previews if configured properly.

[test1234567]

I have created the required nodes and also added the support for webp in Apache Sling MIME Type Service but still I don't see the preview of the webp images,

[test1234567]

Can you tell me what the issue could be, even though I have made the changes to the required steps.

[BrianKasingli]

A scenario for this could be that a dispatcher filtering out and limiting rendering of that specific file.

Check your dispatcher, does it allow webp files?

/filters
{
  /0001 { /type "allow" /url ".*\\.webp" }
  /0002 { /type "deny" /url "/etc/.*" }
  ...
}

[s1101v]

Thank you for your response. The issue is specific to the author instance, not the publish instance. I want to enable the preview of WebP images on an AEM 6.5 on-premise instance.