When you drag and drop a WebP image into the OOTB Image component in AEM, the behavior differs because AEM 6.5 (and earlier) does not support WebP out of the box.<\/p>\n
- \n
- No renditions are generated automatically for Webp.<\/li>\n
- Thumbnail \/review in DAM UI is not shown.<\/li>\n<\/ul>\n
However ,To bridge this gap, I developed a custom utility that enables WebP image handling within AEM 6.5, making it seamless for content authors to work with this format.To refer the list of supported images format , please refer the link below<\/p>\n
https:\/\/experienceleague.adobe.com\/en\/docs\/experience-manager-65\/content\/assets\/administer\/assets-formats.<\/p>\n
Lets dive into the steps involved to write this custom utility .<\/p>\n
Steps –<\/p>\n
- \n
- Adding 3rd Party Plugins<\/strong>
\nThere are many third party plugins available which can be added to support webp images , we will be using Twelve Monkeys ImageIO plugin in the implementation , which provides extended support for image file formats in Java Platform.<\/li>\n<\/ol>\n\u00a0 \u00a0 \u00a0 \u00a0..\/pom.xml<\/p>\n
<dependency>\r\n<groupId>com.twelvemonkeys.imageio<\/groupId>\r\n \u00a0\u00a0<artifactId>imageio-core<\/artifactId>\r\n \u00a0\u00a0<version>3.10.0<\/version>\r\n \u00a0\u00a0<scope>provided<\/scope>\r\n<\/dependency>\r\n<dependency>\r\n \u00a0\u00a0<groupId>com.twelvemonkeys.imageio<\/groupId>\r\n \u00a0\u00a0<artifactId>imageio-webp<\/artifactId>\r\n \u00a0\u00a0<version>3.10.0<\/version>\r\n \u00a0\u00a0<scope>provided<\/scope>\r\n<\/dependency>\r\n<dependency>\r\n \u00a0\u00a0<groupId>com.twelvemonkeys.imageio<\/groupId>\r\n \u00a0\u00a0<artifactId>imageio-psd<\/artifactId>\r\n \u00a0\u00a0<version>3.10.0<\/version>\r\n \u00a0\u00a0<scope>provided<\/scope>\r\n<\/dependency>\r\n<dependency>\r\n \u00a0\u00a0<groupId>jmagick<\/groupId>\r\n \u00a0\u00a0<artifactId>jmagick<\/artifactId>\r\n \u00a0\u00a0<version>6.6.9<\/version>\r\n \u00a0\u00a0<scope>provided<\/scope>\r\n<\/dependency><\/pre>\n
![\"bundle\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/08\/bundle-ss-1-1-1024x631.png\")
bundle with listed dependencies<\/p><\/div>\n
2.\u00a0 Adding the logic to read webp images and generate renditions of different sizes.<\/strong>
\nThe program can be created in form of :<\/p>\n1. Custom Process Step – Workflow
\n2. OSGI Service\/Servlet
\n3. or, incorporated with Event Listener<\/p>\nIn this blog ,AEM listeners listens\/works for any dam asset upload of webp format image and generates the renditions of sizes as per requirement. Content Fragment is used to take inputs for rendition sizes.<\/p>\n
Created below is the Event Listener to listen to the event of assets uploaded in the dam.<\/p>\n
@Activate\r\n @Override\r\n \u00a0\u00a0public void onEvent(EventIterator events) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0try {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Map<String, Object> authInfo = Collections.singletonMap(ResourceResolverFactory.SUBSERVICE, \"getResourceResolver\");<\/pre>\ntry (ResourceResolver resourceResolver = resolverFactory.getServiceResourceResolver(authInfo)) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!isListenerEnabled(resourceResolver)) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0log.info(\"WebPAssetListener is disabled via configuration.\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0List<String> renditionSizes = getRenditionSizes(resourceResolver);\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0while (events.hasNext()) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Event event = events.nextEvent();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0String path = event.getPath();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0try {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0webPAssetsRenditionService.generateRenditions(asset, renditionSizes,resourceResolver);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0log.info(\"Successfully generated renditions for WebP asset: {}\", path);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} catch (Exception e) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0log.error(\"Error generating renditions for WebP asset: {}\", path, e);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} catch (Exception e) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0log.error(\"Error in WebPAssetListener\", e);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0}\r\n\r\n\r\n<\/pre>\nYou can generate assets with WebP Image format of different sizes which can be added from any configurable space like a content fragment .<\/p>\n
private List<String> getRenditionSizes(ResourceResolver resourceResolver) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Resource configResource = resourceResolver.getResource(ASSET_LISTENER_CONFIGURATION);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (configResource != null) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0String[] sizes = configResource.getValueMap().get(RENDITION_SIZES, String[].class);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return sizes != null ? Arrays.asList(sizes) : Collections.emptyList();\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\nreturn Collections.emptyList();\r\n }\r\n}\r\n\r\n\r\n\r\n<\/pre>\n![\"content](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/08\/cf-rend-2-1.png\")
content fragment to input rendition values<\/p><\/div>\n
Below is the WebPAssetsRenditionService Implementation where you can add below functionality to generate WebP format Images of the asset uploaded in DAM.<\/p>\n
@Activate\r\n \u00a0\u00a0protected void activate() {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0IIORegistry registry = IIORegistry.getDefaultInstance();\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0registry.registerServiceProvider(new WebPImageReaderSpi());\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0LOGGER.info(\"WebP Image Reader registered successfully\");\r\n \u00a0\u00a0}\r\n\r\n<\/pre>\n- \n
- IIORegistry registry = IIORegistry.getDefaultInstance();<\/strong>
\nThis gets the default instance of the IIORegistry, which is essentially a registry\/database of available image readers, writers, and other services in Java’s Image I\/O system.<\/li>\n- registry.registerServiceProvider(new WebPImageReaderSpi());<\/strong>
\nThis gets the default instance of the IIORegistry, which is essentially a registry\/database of available image readers, writers, and other services in Java’s Image I\/O system.<\/li>\n<\/ol>\n@Override\r\n \u00a0\u00a0public void generateRenditions(Asset asset, List<String> renditionSizes, ResourceResolver resourceResolver) throws Exception {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0BufferedImage originalImage;\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0try (InputStream is = asset.getOriginal().getStream()) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0originalImage = ImageIO.read(is);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (originalImage == null) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0throw new IOException(\"Failed to read WebP image\");\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (String size : renditionSizes) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0String[] dimensions = size.split(\":\");\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (dimensions.length != 2) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0LOGGER.warn(\"Invalid size format: {}. Skipping this rendition.\", size);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0continue;\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0int width = Integer.parseInt(dimensions[0]);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0int height = Integer.parseInt(dimensions[1]);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0generateRendition(asset, originalImage, width, height);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0resourceResolver.commit();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/pre>\nAdd rendition to the asset by following Logic-<\/p>\n
private void generateRendition(Asset asset, BufferedImage originalImage, int width, int height) throws Exception {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0String renditionName = String.format(\"cq5dam.thumbnail.%d.%d.png\", width, height);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0BufferedImage resizedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0resizedImage.createGraphics().drawImage(originalImage.getScaledInstance(width, height, java.awt.Image.SCALE_SMOOTH), 0, 0, null);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ByteArrayOutputStream baos = new ByteArrayOutputStream();\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImageIO.write(resizedImage, \"PNG\", baos);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0try (InputStream pngInputStream = new ByteArrayInputStream(baos.toByteArray())) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0asset.addRendition(renditionName, pngInputStream, PNG_MIME_TYPE);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0LOGGER.info(\"Generated rendition: {} for asset: {}\", renditionName, asset.getPath());\r\n \u00a0\u00a0}\r\n}\r\n\r\n\r\n<\/pre>\nConclusion-<\/p>\n
Basis the above implementation, the renditions are available for webp images,\u00a0 Please find below the screenshots –<\/p>\n
![\"image](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/08\/3-1.png\")
result<\/p><\/div>\n
![\"ss\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/08\/4-1-1024x715.png\")
result<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
Working with enterprise CMS like AEM often means balancing between business requirements and platform limitations. Recently , I encountered a scenario where the client needed support for WebP images in the authoring interface. WebP is a modern image format developed by Google that provides superior lossy and lossless compression for images on the web. The […]<\/p>\n","protected":false},"author":2122,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":223},"categories":[5868],"tags":[4847,7748,7749,7747],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/73909"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/2122"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=73909"}],"version-history":[{"count":11,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/73909\/revisions"}],"predecessor-version":[{"id":74325,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/73909\/revisions\/74325"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=73909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=73909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=73909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- registry.registerServiceProvider(new WebPImageReaderSpi());<\/strong>
- IIORegistry registry = IIORegistry.getDefaultInstance();<\/strong>
- Adding 3rd Party Plugins<\/strong>