WebP Delivery

Last updated 5 minutes 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 PNP images.

The CoreMedia Image Transformation Service allows to deliver images from the CoreMedia repository in different formats. However, WebP delivery 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 programming and configuration is required.

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>
```
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?

studio fundamentals

quick start

managing content

studio development

backend development

frontend development

monitoring and logging

security