Web Optimized Image Delivery for AEM Custom Components

Published
Web Optimized Image Delivery feature of AEM as a Cloud Service delivers image assets from the DAM in WebP format. WebP can reduce the download size of an image by about 25% on average, which results in faster page loading.

Using Core Components

The AEM Core Image and Teaser components offer the functionality for delivering web optimized images. To activate this feature, you only need to enable the "Enable Web Optimized Images" option within the component's design dialog.
Enable Web Optimized Images for AEM Core Components
To confirm the changes, you can navigate to "View as Published" by checking the content-type of loaded images in the browser's developer tools network tab.

WebP Image for Custom Components

For Custom Components, AEM provides the AssetDelivery Java API, which acts as an OSGi service that generates web optimized delivery URLs for image assets. The AssetDelivery OSGi Service functions in AEM as a Cloud Service but returns null in the AEM SDK. It is best to conditionally use web optimized URLs selectively for Cloud Service and fallback URLs for the SDK.
WebOptimizedImageServiceImpl.java
@Component public class WebOptimizedImageServiceImpl implements WebOptimizedImageService { private static final String DEFAULT_FORMAT = "webp"; @Reference(cardinality = ReferenceCardinality.OPTIONAL) private volatile AssetDelivery assetDelivery; @Override public String getDeliveryURL(ResourceResolver resourceResolver, String path) { Resource resource = resourceResolver.getResource(path); Asset asset = DamUtil.resolveToAsset(resource); if (assetDelivery != null) { return getWebOptimizedUrl(resource, asset); } else { return getFallbackUrl(asset); } } private String getWebOptimizedUrl(Resource resource, Asset asset) { Map<String, Object> options = new HashMap<>(); options.put("preferwebp", "true"); // These 3 options are required for the AssetDelivery API to work options.put("path", asset.getPath()); options.put("format", DEFAULT_FORMAT); options.put("seoname", asset.getName()); return assetDelivery.getDeliveryURL(resource, options); } private String getFallbackUrl(Asset asset) { return asset.getPath(); } }
The Sling Model uses the custom WebOptimizedImageService OSGi service to obtain the web optimized image URL.
ArticleImpl.java
@Model( adaptables = { SlingHttpServletRequest.class }, adapters = { Article.class }, resourceType = { ArticleImpl.RESOURCE_TYPE }, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL ) public class ArticleImpl implements Article { protected static final String RESOURCE_TYPE = "aem-demo/components/article"; @SlingObject protected ResourceResolver resourceResolver; @OSGiService private WebOptimizedImageService webOptimizedImageService; @ValueMapValue String fileReference; public String getImageUrl() { return webOptimizedImageService.getDeliveryURL(resourceResolver, fileReference); } }
You can now use the imageUrl in your component HTML and inspect the image's content-type through the network tab of the browser's developer tools.

Frequently Asked Questions (FAQ)

No option to Enable Web Optimized Images in my environment

Running AEM locally or on-premise, the image service isn’t available. To leverage the web optimized image delivery service, need to deploy the project to an AEM as a Cloud Service (AEMaaCS) development environment.

Web Optimized Image Delivery works correctly in one custom component but not in others

Consider creating an OSGi service that acts as a proxy for the AssetDelivery OSGi Service, then utilize this proxy OSGi service for all Sling Models instead of directly accessing the AssetDelivery API from each Sling Model.