How to Improve SAP Hybris Page Load Time With Image Optimization

Abraham George
September 24th, 2019


Hybris and Page Load Time

SAP’s Hybris (AKA SAP Commerce Cloud) is an eCommerce platform used by companies around the world. A major part of any eCommerce platform involves serving images of products on the website. Most potential B2B and B2C customers have expectations for fast loading web pages. Studies show that 74% of potential buyers will consider abandoning websites if they don’t load in less than 5 seconds. Images are the largest driver of web payload that slows page load time. So optimizing images for specific devices has a big impact on page load time and online sales.

Integrating ImageEngine image CDN with Hybris

ImageEngine is an image Content Delivery Network (CDN) that will automatically optimize the master images stored on the Hybris platform and accelerate delivery to the end user. ImageEngine does this by:

  • Leveraging the [device-aware edge servers](/features/mobile-device-detection) on its CDN,
  • Compressing, resizing, and using more efficient next-gen image formats like [WEBP and JPEG 2000](
  • Delivering the images quickly from its many CDN edge servers around the world.

The net impact is up to 80% image payload reduction and improved web performance by several seconds.

Setting Up An ImageEngine Account

When signing up for ImageEngine free 30 day trial, you will add the origin URL where your images are currently being stored. Once you have configured your trial you will receive an ImageEngine URL that you can CNAME to match your domain.

In the following example, if your current domain is, then Hybris stores images in When setting up your ImageEngine Account, you would configure the to the ImageEngine delivery address.

Step 1: Override Hybris’ Basic Media URL strategy

To override Hybris’ out-of-the-box media URL strategy and replace with one configured for ImageEngine, copy this class from Github to your project’s core extension. If you already have a custom URL strategy, then please contact our support team for guidance on how to proceed.

Make sure its package and folder path look like the following examples: Class package

Folder path will be like

/trainingcore/src/com/imageengine/media/url /impl/
Step 2: Define Bean For The Override Strategy

Go to your core extension’s resource folder. Find and edit *core-spring.xml to add the below bean definition that references the new imageEngineURL strategy.

<bean id="imageEngineUrlStrategy" class="" parent="localMediaWebURLStrategy">

Make sure above in the class attribute you have given a correct class package path.

Step 3 Configure Your File

Find your in ${HYBRIS_HOME}/hybris/config/

Add the below properties to They will point your image media URL to ImageEngine CDN for image media. Use the hostname that your configures during your ImageEngine account or trial setup on the second line.

 media.folder.images.url.strategy = imageEngineUrlStrategy
 media.folder.images.hostname =
Step 4: Build and Test the Changes
  • Open Terminal
  • Go to ${HYBRIS_HOME}/hybris/bin/platform
  • Run setantenv.bat
  • ant clean all
  • Start the hybris server hybrisserver.bat

Open the home page in your browser and see the rendered image URL. When you inspect the image, It should point to the hostname URL which you have configured in

For example, a home page image tree.jpg would have an image URL of

Please visit our ImageEngine documentation for a full explanation of our setup and features. And contact us for a trial or support.

Start a free 30 day ImageEngine trial

Use our demo tool to see how ImageEngine will improve your own website’s image web performance.