WebP Delivery - CMCC 11

Last updated 7 months ago

Learn how to deliver your images as WebP

What you'll learn

Enable CAE and Headless Server to deliver WebP images

Prerequisites

A CoreMedia self-managed development system

Time matters

Reading time: 3 to 5 minutes

Should I read this?

This guide is for Developers, Administrators.

Table of Contents

Enabling WebP Delivery for the CAE
Enabling WebP Delivery for the Headless Server

WebP is an image format developed by Google. WebP provides lossless and lossy compression where lossless compressed images are around 26% smaller than PNG images.

The built-in image transformation allows you to deliver images from the CoreMedia repository in different formats. However, delivering your images transformed to WebP requires a third-party library which is, due to licensing issues, not bundled with CoreMedia Content Cloud. In the following examples, the webp-imageio library is used, but there are other libraries out there, which you can also integrate. In addition, a small amount of configuration is required.

The webp-imageio library is only mentioned as an example. It is not tested by CoreMedia. You have to carefully select a library that fits your needs and fulfills your security and compliance requirements.

Enabling WebP Delivery for the CAE

In your workspace, add the following dependency to the POM files of your Preview CAE and Live CAE in apps/cae/spring-boot/cae-preview-app and apps/cae/spring-boot/cae-live-app respectively.
```
<dependency>
  <groupId>org.sejda.imageio</groupId>
  <artifactId>webp-imageio</artifactId>
  <version>0.1.6</version>
  <scope>runtime</scope>
</dependency>
```
CoreMedia CMCC 2307.2 or newer

In Studio use the struct linkMimeTypeMapping to map your source image format to the WebP format. See the paragraph MIME Type Mapping in the Blueprint Developer Manual for details.

CoreMedia CMCC 2104 - CMCC 2307.1

Adapt the TransformedBlobHandler to deliver WebP images. The recommended method is to adapt the TransformedBlobHandler#buildLink method. In this way, the CAE will create links to images with the webp extension. A simple solution would be to override the getExtension method which is used in the buildLink method. Here, all links to JPEG images stored in the CoreMedia repository would be delivered with the webp extension.

Keep in mind, that this is only example code which must be adapted for your specific use case.
```
protected String getExtension(MimeType contentType, String fallback) {
  String extension = getExtension(contentType.toString(), fallback);
  if (extension.equals("jpg") || extension.equals("jpeg")) {
    return "webp";
  } else {
    return super.getExtension(contentType, fallback);
  }
}
```

Enabling WebP Delivery for the Headless Server

In your workspace, add the following dependency to the POM files of your Headless Server app in apps/headless-server/modules/headless-server/headless-server-base.
```
<dependency>
  <groupId>org.sejda.imageio</groupId>
  <artifactId>webp-imageio</artifactId>
  <version>0.1.6</version>
  <scope>runtime</scope>
</dependency>
```
Add the WEBP file format extension to the file content-schema.graphql in apps/headless-server/modules/headless-server/headless-server-base/src/main/resources.
```
enum ImageFormat {
JPG
JPEG
PNG
GIF
WEBP
}
```

Is this page useful?