Investigating the use of HEIC assets in AEM

[SekharBu1]

I want to investigate the use of HEIC assets in AEM. We would need the capability to upload/create renditions and render them on the page. I have uploaded the HEIC format images(eg: sample.heic) in AEM dam. But, I am unable to see the image. could you please help me to upload/create renditions and render them on the page in aem.

[sarav_prakash]

Please refer to this cheat sheet - https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/assets/file-form...

heic format is NOT supported by AEM and Dynamic media. And it is no surprise. HEIC is NOT a web-supported format. Even if AEM accepted and allowed to upload, browser donot support to render - https://stackoverflow.com/questions/51135568/image-heic-not-loaded-properly-on-browsers

Only option you have is to leave raw images in Creative Cloud, and only upload supported rastors by AEM. 

[SekharBu1]

are there any other ways by making changes in html or javascript or any AEM template changes to render the HEIC image on aem page?. Because they are asking to render HEIC image on the page without converting it to supporting formates like jpg, jpeg, png ... etc. Even I am using safari browser I can able to upload the HEIC image in AEM DAM but I am unable to preview or view or render the image. Please suggest any solution or at least provide explanation if not possible to render.

[sarav_prakash]

Got it. This is no-browser-support evidence. But if still required, will be slow experience, since you have to transform to compatible formats.

Found this js library that ll create a canvas and render.

https://github.com/catdad-experiments/libheif-js?tab=readme-ov-file

and example of how to run this library https://github.com/strukturag/libheif/blob/gh-pages/index.html

And another js library https://alexcorvi.github.io/heic2any/

Alternate, for java, refer here using ImageMagick. Examples are provided. So you ll write a transformer servlet similar to NamedImageTransformer.

Create servlet, that ll process image urls having specific extension like <image>.heictransform; the servlet will load the raw image into ImageMagick, transform and return jpg binary that can render on browser. 

I didn't find any direct adobe solution. But looks straight to use ImageMagick, transform and render. 

[kautuk_sahni]

@SekharBu1 Did you find the suggestion helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!