How to extend the core component teaser to accept webp format images?

[Aaron_Dempwolff]

Hello, what happens is that I want to allow the core teaser component to allow the user to upload images in webp format.

The core component is as default, the only thing I modified was the _cq_dialog and the .content.xml file.

<column
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/container">
    <items jcr:primaryType="nt:unstructured">
      <file
         jcr:primaryType="nt:unstructured"
         sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
         class="cq-droptarget"
         fileNameParameter="./fileName"
         fileReferenceParameter="./fileReference"
         mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml,image/webp]" <------ Just add image/webp
         name="./file"/>
    </items>
</column>

This already allows me to upload the image in webp format, the problem is that the image isn't rendered, that is, it's not displayed, although the file is uploaded correctly and the webp file is in the html code.

If I open the url of the webp file with the browser's console I get the following error:

Is it necessary to modify another file to allow viewing of the webp file or what could be the error?

[99spanchal]

Looks like AEM does not support webp images. Following are the supported formats in AEM: https://experienceleague.adobe.com/docs/experience-manager-65/assets/administer/assets-formats.html?...

You can consider following this thread for more information:

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

[Aaron_Dempwolff]

In fact, it supports it, it's from the latest updates added:

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/assets/file-format-...

But for some reason when I want to edit it in a core component it doesn't let me, since I've done it in various customs components and it lets it upload and view.

That's why I don't know if in the core components you have to move more things besides the .content.xml

[VeenaVikraman]

Yeah @Aaron_Dempwolff  that makes sense. May be you can raise a question in https://github.com/adobe/aem-core-wcm-components/issues . I think they are the right group who can answer your question. 

Thanks

Veena ✌

[Mahedi_Sabuj · Accepted solution]

Hi @Aaron_Dempwolff, You need to enable "Enable Web Optimized Images" from Image (v3) Component Policy Configuration Properties.

Enable Web Optimized Images - When checked, the web-optimized image delivery service will deliver images in the WebP format, reducing image sizes on average by 25%.

• This option is only available in AEMaaCS.
• When unchecked or the web-optimized image delivery service is unavailable the Adaptive Image Servlet is used.

Reference 

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/imag...

[Aaron_Dempwolff]

Yes, I understand that and I know that this option exists, but my users WANT to upload webp images, not to have them converted to webp resolution.

[Aaron_Dempwolff]

Yes, I understand that and I know that this option exists, but my users WANT to upload webp images, not to have them converted to webp resolution

[VeenaVikraman]

@Aaron_Dempwolff For Core Components , you do not need to upload the webP images. Core Componetns already support the Web Optimized Image Delivery. The adobe documentation is very clear regarding the same. Please refer https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/web-opti...

In case of custom components you can try https://experienceleague.adobe.com/docs/experience-manager-learn/cloud-service/developing/advanced/w... .