Media optimization & cloudimage

March 3, 2025

Introduction

Jahia provides a complete solution for media optimization: dynamic image resizing, CDN, and optimization using webp format. Our solution is based on Cloudimage,  a product created by Scaleflex. You do not need to create an account or buy Scaleflex Cloudimage directly, it is all managed by Jahia. 

Jahia's capabilities in image optimization

  • Images are automatically converted to webp format; using an advanced conversion algorithm to take the most out of this format. By default, you’ll see that if you were using non-optimized JPEG files, images weight can be reduced by up to 75%. 
  • Images are also automatically added to a CDN to ensure fast load time from anywhere worldwide.
  • Developers can easily ensure that the images are resized to the right size
  • Developers can also leverage transformations by adding URL parameters to the image, including filters, rotate, blur, watermark, etc... 

How to get started? 

This feature is optional. To activate it, contact your CSM and share the domain of the website where you want it deployed. The Jahia Support and Cloud team will then set up the module in a non-production environment so you can see the results for yourself and go live when you’re ready.

Scope - Which media are optimized

Which type of files?

Many image formats are optimized: avif, bmp, gif, ico, jp2, jpeg, jpg, jpx, png, svg, tiff, webp 
Out of scope / known limitation: Video and PDF files are unaffected. 

In which mode? 

The images are only optimized in live mode. In Jahia UI (Page Composer / Page Builder), or preview mode, image rendering doesn’t change. 

Which images?

All images added in the HTML of your pages, including: 

  • Images added from weakreferences (standard Jahia image field) 
  • Images added from rich text fields
  • Images added from the Jahia Studio, in your template 

Out of scope / known limitation: 

  • Images that are directly protected by live roles (protected by login to provide authenticated experiences), or referenced inside pages that are protected by live roles won’t be optimized. 
  • Images referenced from your CSS files won’t be optimized. This limitation may be overcome in the next releases. 

Important to know 

This feature can be deployed for organizations running Jahia on Jahia Cloud, using Jahia 8.1.6+ and 8.2.x. Cloudimage integration is currently in version 0.1, meaning that you should first request the deployment to the Jahia Support team in a non-production environment and verify that your images are not broken. In the long run, we may provide a solution for organizations hosting Jahia in-house (on premise).

How are URLs rewritten?

In live mode, the URLs of the images are rewritten. The URL is based on the server name of your website. If no server name is set, it will use the base URL of the page being rendered. 

For instance, the URL of the following image: /files/live/sites/luxe/files/site/destinations/destination-Geneva.jpeg

will be rewritten to:

https://someToken.cloudimg.io/https://example.com/files/live/sites/luxe/files/site/destinations/destination-Geneva.jpeg 

The Cloudimage module is installed and managed by the Jahia Cloud team. It is not available through the Jahia store. If you download the module, please note that it won’t work in your local environment.

Does it impact http headers? 

Even though most images will be transformed from many formats to webp, the http content-type won't be impact. Webp images are served using image/jpeg content types, or others. 

 

Optimizing your images 

Step 1 - Ensure the module is running and active on your website

Once the Jahia Cloud team deploys the Cloudimage module on your environment, here are the steps you need to follow: 

  • Activate the Cloudimage module on the website on which you want to use it
  • Flush the site cache (from administration panel)
  • Wait 10-15mns

When running, the URLs of all the live (published) images will be rewritten to be served from the Cloudimage CDN. That’s it.

Step 2 - Resizing

A good practice when rendering images is ensuring they’re rendered at the right size. You don’t want an image of 2000px * 3000px, even if it is optimized, inside an HTML div of 20px * 30px. Also, the size of this div will likely change depending on the visitor's device. 

To change the size of the image, you’ll need to add two URL parameters to your JSP or JSX view. For instance: photo.jpeg?h=200&w=350. More details are available in Cloudimage documentation. 

Step 3 - If needed, Available transformations 

Scaleflex Cloudimage also provides a lot of other transformations to fit, crop fit, add a background, prevent enlargement, keep proportion, flip, rotate, trim, round corners, or remove a background. Every detail can be found in the Cloudimage documentation on image operations.

Other advanced features are also available: filters and watermarking.
 

How to use this feature as a developer?

While the Cloudimage integration works right out of the box, you can build on top of CloudImage’s features to offer an even more performant experience to your users. For instance, here’s how to display a responsive image in your Jahia views, so that no bandwidth goes to waste.

In JSX:

<picture>
  <source media="(min-width: 960px)" srcSet={`${image.getUrl()}?w=1920`} />
  <source media="(min-width: 480px)" srcSet={`${image.getUrl()}?w=960`} />
  <img src={`${image.getUrl()}?w=480`} alt={alt} style={{ width: '100%' }} />
</picture>

In JSP:

<picture>
  <source media="(min-width: 960px)" srcset="${image.getUrl()}?w=1920" />
  <source media="(min-width: 480px)" srcset="${image.getUrl()}?w=960" />
  <img src="${image.getUrl()}?w=480" alt="${alt}" style="width: 100%" />
</picture>

These two samples work the same for the end user: it will ask Cloudimage to produce 3 different variants of the same image (480px, 960px and 1920px) and only display the most adequate one.