Web Optimized Image Delivery for Custom Components

PublishedApril 09, 2024

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.

Web Optimized Image Delivery for Custom Components

Using Core Components

WebP Image for Custom Components

Frequently Asked Questions (FAQ)

No option to Enable Web Optimized Images in my environment

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