Friday, March 29, 2019
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.
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:
The net impact is up to 80% image payload reduction and improved web performance by several seconds.
When signing up for ImageEngine free 30 day trial or account, 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
example.com, then Hybris stores images in
images.example.com. When setting up your ImageEngine Account, you would configure the
images.example.com to the ImageEngine hostname.
To override Hybris’ out-of-the-box media URL strategy and replace with one configured for ImageEngine, copy this ImageEngineUrlStrategy.java 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:
Folder path will be like
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="com.imageengine.media.url.impl.ImageEngineUrlStrategy" parent="localMediaWebURLStrategy"/>
Make sure above in the class attribute you have given a correct class package path.
Find your local.properties in
Add the below properties to
local.properties. They will point your image media URL to ImageEngine CDN for image media. Use the
images.example.com 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 = https://images.example.com
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 local.properties
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.