We support all the major image formats, and a large number of more confidential ones.

We are obviously expanding our support to include any new significant formats being created. As of today, we have full support for the following origin formats and the ability to apply transformations for them:

Leverage Cloudimage to automatically compress and accelerate images, videos, PDFs, CSS, and JS over CDN, ensuring faster websites, smoother apps, and better user experiences.

What you can do with Cloudimage

• Optimize and deliver any media: images, videos, PDFs, CSS, and JS with on-the-fly compression and CDN acceleration.

The Asset Variation Builder (AVB) lets you create and preview image transformations directly in the Cloudimage UI — no coding needed. Non-Developers using Cloudimage can easily gain control with instant previews of future image transformations before creating a .

While building your URL transformations, you can easily spot the active parameters in the different categories thanks to a blue dot: Format, Adjust

Once satisfied, save the transformation as a preset to apply consistent templates across all your images. Every adjustment is shown live in the Asset Library in "Asset Details" / "Variations", so you see the exact output before saving.

Preview image transformations Stop guessing URL parameters: visually build your transformation, preview results in real time, and save as reusable presets. These presets ensure consistency, speed up content workflows, and empower non-technical teams to manage image variants independently.

Supported features in the AVB:

Allows to crop an image by defining the coordinates of the crop focal point. It is useful when you want to crop images where the coordinates of the point of interest are already known.

To set the coordinates of the focal point, use the gravity=X,Y operation where X and Y are the coordinates of the focal point (in pixels). Alternatively, you can set the coordinates as a percentage of the original image - gravity=Xp,Yp or gravity=xc,yc, where X,Y=0..100 and x,y=0..1.

gravity=X,Y

gravity=Xp,Yp|xc,yc

Allows you to deliver the proper image dimensions according to a defined device pixel ratio. This operation can help with conversion between device-independent pixels and CSS (reference) pixels. Useful in responsive image solutions using the srcset HTML attribute. Allows positive values limited to 5.

dpr=X

Examples

By default, if the origin image has an embedded ICC profile, the image is converted to the sRGB color space, and the ICC profile is removed from the compressed image.

If you prefer to retain the original ICC profile instead of converting the image to sRGB, you can activate the Keep origin image ICC profile option in the admin panel (Image Settings -> Compression).

When using this option, to avoid embedding very large ICC profiles, you can set the maximum permitted ICC profile size (in kilobytes) along with setting the Convert ICC profile to sRGB if too large option.

process=minify-css process=minify-js

Cloudimage supports on-the-fly optimization of CSS and JS content to further facilitate faster loading of your website or web application.

Examples

/samples.scaleflex.com/bootstrap.css?func=proxy&process=minify-css (152 kB minified vs. 192 kB original)

/samples.scaleflex.com/jquery.js?func=proxy&process=minify-js (111 kB minified vs. 219 kB original)

Crops out the topmost part of an image if it contains a face.

To control the margin when cropping the face out, you can use the face_margin=Y operation where Y is a percentage of the face height. Its default value is 20. You can also use negative numbers if you would like to keep part of the face.

func=facehide

Examples

Rotates the image by a specified angle, counterclockwise. You can use bg_color=X to set the background fill color if the rotation angle is not divisible by 90.

r=X

Examples

Resizes an image while bounding the smaller dimension to the desired width or height while keeping proportions. Delivers the resulting image via CDN.

func=boundmin

Examples

Mirrors the image horizontally and/or vertically.

flip=h | flip=v | flip=hv

Examples

Detects all faces in the image and applies blur to conceal them. To activate the filter, set X to 1 (blur_faces=1). You can control the blur radius (default: R=30) and sigma (default: S=1000).

blur_faces=1[,R[,S]]

Examples

To apply a sepia effect to your images, you can use the sepia=1 parameter.

sepia=1

Create a duotone effect by using duotone=C1,C2[,Y], where C1 and C2 are the colors for the duotone (hex value or color name) and Y is the opacity (Y=0..1, default1).

duotone=C1,C2[,Y]

To invert the colors of an image, use the invert=1 parameter.

invert=1

Applies Gaussian blur to the image. The parameter value (X) is the kernel size of the filter in pixels.

blur=X

Examples

func=proxy

Cloudimage offers you the option to deliver any file, including non-processable files - static content like JS or CSS files, via our Content Delivery Network.

By default, all URLs are regarded as images. To deliver a non-image file, you have to use the func=proxy option:

/samples.scaleflex.com/bootstrap.css?func=proxy

Cloudimage can automatically use the proxy function for all files that don't have an image file extension. This however will require all your images to have proper file extensions. If you prefer this behavior, you can switch it on in your Admin Console (Image Settings / Compression / Enable static Content acceleration):

If your images are stored at URL https://mystorage.example.com and you can access image.jpg at the following URL:

//mystorage.example.com/image.jpg

You should enter the data as follows:

All aliases have to be prefixed and suffixed by underscores. Please note that all aliases have to be unique for your account - aliases set in the storage sections cannot be used in the alias section.

Your storage is now accessible by using the alias entered in the Cloudimage Alias field:

//your-token.cloudimg.io/__ownstorage__/image.jpg

If your storage requires authentication, you can enter your username and password:

bg_remove=1

Background removal automatically detects the foreground object and isolates it by removing the background of an image using advanced AI technology. It can help you create a solid or transparent background for your pictures. This can give your application or website an overall polished look. Moreover, product images with a clear-defined foreground can be indexed better in search engines which rely on AI classification.

Examples

Feel free to try the background removal algorithm with your own images on our .

To create a color overlay by using colorize=X[,Y], where X is the color of the overlay (hex value or color name) and Y is the opacity (Y=0..1, default 0.5).

colorize=X[,Y] | colourise=X[,Y]

Resizes an image to a specified width or height while preserving its original aspect ratio. You need to specify the width or height parameter in pixels. After transformation, the image will be compressed and delivered via CDN.

width | w

height | h

Resizes the image to a specified width and height without keeping the original proportions and delivers the resulting image via CDN.

func=cover

Resizes to a given width and height box and keeps proportions. Similar to but without adding padding. Delivers the resulting image via CDN.

func=bound

Examples

Rounds the corners of images with a radius of X pixels. If you wish to fill the cut corner(s) with a specific color, you can use the bg_color parameter.

radius=X (all corners are rounded with radius X pixels)

radius=R1,R2,R3,R4 (values for each corner, with max being the min px of the 2 sides around corner)

If four values are provided, these values correspond to the four corners: R1 = top-left corner, R2 = bottom-left corner, R3 = bottom-right corner, R4 =top-right corner. For example, to round only one of the corners with the maximum possible radius, you need to use radius=max,0,0,0.

To adjust the contrast, you can use the contrast filter and set the desired adjustment value.

contrast=X

Examples

To adjust the color saturation, you can use the saturate=X filter and set the desired adjustment value (X= -100..100). Negative values will decrease color saturation while positive ones will increase it.

saturate=X

Examples

Transforms the image into a black-and-white image.

gray=1 | grey=1

Examples

Sharpening is a powerful tool to emphasize texture and details, especially on smaller images, e.g. thumbnails. Cloudimage can apply an unsharp mask filter which will make your image look sharper. You can specify the filter radius (X) in pixels.

sharp=X

Examples

Applies a pixelation effect to an image. You can set the desired block size in pixels. If the image is resized the filter is applied after resizing.

pixelate=X | pixellate=X

Examples

You can change the compression (output format and quality) of your image by using compression filters. You can use the compression filters alongside and .

You can of course force a specific output format(s). More details can be found in the image formats section.

Most of the on-the-fly image transformations can be configured using the , an in-line URL builder to preview each image transformation instantly.

If your images are stored at a bucket named mysamplebucket at the eu-central-1 region and you can access image.jpg at the following URL:

//s3.eu-central-1.amazonaws.com/mysamplebucket/image.jpg

You should enter the data as follows:

All aliases have to be prefixed and suffixed by underscores. Please note that all aliases have to be unique for your account - aliases set in the storage sections cannot be used in the section.

Your storage container is now accessible by using the alias entered in the Cloudimage Alias field:

//your-token.cloudimg.io/

As a reminder, a Cloudimage URL looks like this:

//token.cloudimg.io/original_image_url?operations&filters

By default, images from any origin domains can be resized by Cloudimage. The storage and traffic used by these images will count toward your plan’s allowance. In the Cloudimage admin console, you can restrict the list of origin server URLs your token can transform images from.

If you are using and you have Domain whitelisting enabled, you have to include all aliases in the whitelisted domain list.

To make your Cloudimage URLs shorter and improve SEO, you can configure an origin prefix. For example, if your images are stored at the URL https://hello.s3.aws.com/, you can set up prefix URL:

When you use:

//token.cloudimg.io/photos/paris.jpg?width=800

Cloudimage will search the origin image at the URL:

//hello.s3.aws.com/photos/paris.jpg

By using the origin prefix, you can avoid exposing the URL of your media to users.

Cloudimage can be implemented to accelerate Magento shops in 2 modes:

Cloudimage offers automatic optimization of Scalable Vector Graphics (SVG) files which can reduce the file size by up to 80% without visual appearance deterioration. This is possible since most SVG editors include unnecessary information which can be omitted. Moreover, most shapes in SVG files can be simplified.

Identification headers

Cloudimage allows you to set up one or many global headers which are sent to the origin on every request.

You need to enter the name and value of the header(s) to send. All these headers will be automatically sent for each request made with your token which allows you to set up your origin to accept only requests containing these headers.

Cloudimage can download your origin images/files from any server or storage bucket over HTTP/HTTPS/FTP. Setting up an external storage is optional and you can use Cloudimage with your origin image URLs as shown in the introduction - .

If the images are not publicly available, you have to configure your storage containers and set authentication parameters. If you are filtering access to your image storage by IP addresses, to get help with configuring for Cloudimage to request origin images over the specified proxy and have all Cloudimage requests coming from the same IP address.

You can set up external storage in the Storage section in the admin panel by using the Connect External Storage button.

You can set up an , , or any generic HTTP-based storage (see .

To adjust the brightness, you can use the bright filter and set the desired adjustment value.

bright=X

Examples

If your images are stored at a blob with account my_blob in a container named my_container and you can access image.jpg at the following URL:

//my_blob.blob.core.windows.net/my_container/image.jpg

You should enter the data as follows:

All aliases have to be prefixed and suffixed by underscores. Please note that all aliases have to be unique for your account - aliases set in the storage sections cannot be used in the section.

Your storage container is now accessible by using the alias enter in the Cloudimage Alias field:

To prevent URL tampering and protect your token, every Cloudimage URL can be secured with an SHA-1 HMAC signature.

Please be aware that when the URL signature is activated for your token, all Cloudimage URLs which are not signed properly will cease to work.

The signature is calculated as follows:

The syntax to process an image is:

//token.cloudimg.io/original_image_url?operations&filters&ci_sign=Signature

Because the Salt is a shared secret between you and Cloudimage, only you will be able to calculate the signature of your images.

Removes any single-color padding around the image if present.

The parameter does not specify the amount of border or frame to trim but rather how aggressive the trim algorithm should be. A bigger value of the parameter (e.g. 25) might trim part of the image. Typical values are between 0 and 10.

This allows you to use the same parameter values for all your images.

trim=X

Trim gravity

When gravity=trim is set alongside trim=X (for the , or operations), the focal point is defined depending on the trim result:

• When the image is trimmed on all sides, gravity is set to center;

• When no trim has been performed, gravity is set to smart;

• If the image has been trimmed on some edges only, the gravity is set to:

  • fit operation - gravity is set to the edges opposite of the trimmed ones so that the canvas is extended only on the trimmed sides;

Examples

Finds the most prominent face in the image and crops it to the specified with the width and height parameters dimensions. If you however provide only one dimension, the other dimension will be chosen automatically to keep the aspect ratio of the face.

func=face

Examples

Face margin

Sets margins around the face. You can set equal margins with face_margin=X or separate horizontal and vertical margins (face_margin=W,H).

face_margin=X|W,H

Examples

Disallows image upscaling when resizing with the width or height operations. When resizing, the image can be either scaled down or up depending on the original and target dimensions. If you want to ensure that the image is never upscaled - so the output will not be larger than the original, you can use the org_if_sml parameter.

org_if_sml=1

Examples

Different images compressed with the same compression parameters may result in different perceptive quality. Moreover, the same image in different sizes may require different compression strategies to achieve maximum size gain without visible quality loss.

To overcome this, you can use our Optipress JPEG compression algorithm.

• Optipress finds out the best JPG compression approach by analyzing specific image features and current compression parameters.

• A Machine Learning model determines the best compression strategy for this image.

• Quality is then evaluated based on a simulation model of the Human Visual System to achieve optimum compression without perceptive quality deterioration.

By using Optipress, you can get the most out of the JPEG compression format.

Usage

Examples

Prerequisites

To use the plugin, you need to have a Cloudimage account. You can create one on the Cloudimage registration page.

Step 1. Install the Cloudimage module

To be able to install the module by Composer, you need to get a copy of the module on the Magento Marketplace, or directly from Github.

Enable and install module in Magento:

Step 2. Activate the Cloudimage module

Activate the module and enter your Cloudimage token in the module configuration in Magento admin interface: Stores / Configuration / Cloudimage by Scaleflex / Cloudimage Responsive:

Step 3. Configure the module

Advanced settings (optional)

This setting is for advanced users only and allows to inject a custom JS function into the Magento templates in order to support some specific Magento templates. Feel free to in order to get the custom JS function to address issues with your specific template.

Custom themes (optional)

Once activated, the Cloudimage Responsive module will replace your template's classic image tag elements on-the-fly. This functionality is 100% compatible with the Magento Luma theme.

In the case of a personalized template, please consult the section in the Cloudimage plugin Github page.

Single Sign-On

The access to the Cloudimage administration Console supports SSO over SAMLv2. Cloudimage officially supports several Identity Providers (IDPs) and can integrate with any IDP that speaks SAML 2.0. You can integrate Cloudimage as a Service Provider (SP) with your IDP to allow your Cloudimage administrators to log in to the Console with a federated account and enjoy SSO.

Configure

Step 1. Collect the Cloudimage Service Provider details

1. Copy the ACS URL / Consumer URL and Entity ID / Audience ID or download the Service Provider XML from the link provided. These values are needed for configuring Cloudimage as a Service Provider or Relying Party Trust (ADFS) in your IDP.

2. Within your Identity Provider, add a Service Provider (generic term, Ping Federate), Application (OKTA), or Relying Party Trust (ADFS) using the information gathered in the previous step.

3. Make sure the IDP is returning the user's email address as NameID in the SAML assertion with the format emailAddress (see note below for ADFS).

ADFS as IDP

If you are using ADFS as IDP, you will need to configure the following two Issuance Transform Rules for the Relying Party Trust:

Step 2. Configure the Identity Provider details in the Cloudimage Console

Fill in the Identity Provider section:

• Entity ID: the entity ID from your IDP as per the IDP's metadata.xml.

• SSO Target URL: IDP single sign-on URL.

• SAML Single Logout Service URL: IDP single sign-out URL (usually the same as SSO Target URL).

Step 3. Test Single Sign-On

Using your Cloudimage admin account's email from your company, try to .

Enjoy SSO and additional security!

If your images are stored in a bucket named mysamplebucket and you can access image.jpg at the following URL:

//www.googleapis.com/upload/storage/v1/b/mysamplebucket/o/image.jpg

You should enter the data as follows:

All aliases have to be prefixed and suffixed by underscores. Please note that all aliases have to be unique for your account - aliases set in the storage sections cannot be used in the alias section.

Your storage bucket is now accessible by using the alias entered in the Cloudimage Alias field:

//your-token.cloudimg.io/__googlecloud__/image.jpg

If your Google Cloud bucket requires authentication:

• You need to generate an Authentication JSON file using the guide in the Google Cloud documentation -

• You will be provided with a JSON file to be saved on your computer

• Copy the contents of this file and paste it into the field that appears after pressing "AUTH KEY" in the storage settings

Installation

Prerequisites

You need to have a Contentful account. Contentful is 100% Cloud Native, so you have to sign up for a hosted CMS at https://be.contentful.com

You’ll get :

Step 1. Install from Contentful Marketplace

Find it here and install it.

Or click "Install now" on

Step 2. Configure App

Then save and install.

Step 3. Create Content Type

Absolutely important: The Field ID must be "cloudimage".

By doing the above, you will associate the Cloudimage field (the field that you named Cloudimage) to the Cloudimage App. Recall the warning message you saw during the app configuration stage "There are no content types with ..."? By doing the above, that will no longer be an issue.

Usage

Now you can create a content item of Cloudimage type.

You can add and remove images.

Cloudimage will optimize those images in the background. (If you inspect in developer console, you will see the call to its infrastructure)

Can I disable Cloudimage with a single click?

Yes you can enable and disable Cloudimage on your Shopify store with a single click. Navigate to Online store > Themes > Customize theme. In the sidebar, under general settings open Cloudimage.io and enable/disable it.

Can Cloudimage automatically detect the right image dimension and load it?

No Cloudimage only changes the base URL of your images because there is no way the server would have knowledge of your website layout. However, just by loading images through Cloudimage URL-endpoint, your images are automatically optimised for format and quality.

How do I make sure my integration is working?

Once you are done editing these files, save these files. Now refresh the webpage for your Shopify store and check the image URLs. They should now load from URLs beginning with https://{token}.cloudimg.io/v7. You can use the Chrome Developer Tools to check that all the images are being loaded via Cloudimage.io and that all images are loading correctly. If you find that images on a particular page or section are still being served from Shopify, then find out the responsible theme file and edit it as well.

This simple and fast implementation in Magento 2 enables JPEG optimization, WebP compression and CDN delivery of your images.

Prerequisites

To use the plugin, you need to have a Cloudimage account. You can create one on the Cloudimage registration page.

Step 1. Login to Magento

First, you need to log in to your Magento 2 website admin

Step 2. Configure the plugin

On the Admin sidebar, go to Stores > Settings > Configuration.

Navigate to the settings page - from the left panel, in the General group, choose Web.

Then, you need to set up the Base URLs.

It is important to set this prefix in both - Base URL for User Media Files and Secure Base URL for User Media Files.

In Base URL for User Media Files in Base URLs and Base URLs (Secure) add the following value, replacing your token: https://<token>.cloudimg.io/{{secure_base_url}}pub/media/

For example, if your website is https://sfxmagento.site, and your token is demo, the final URL address should be: https://demo.cloudimg.io/https://sfxmagento.site/pub/media/

You can also use your own domain instead of {token}.cloudmg.io via CNAME records. Please and an engineer will help setting it up.

When complete, do not forget to click Save Config.

Step 3. Flush the cache of Magento

On the Admin sidebar, go to System > Tools > Cache Management and Flush the cache of Magento.

Magento’s cache management system is an easy way to improve the performance of your site. Whenever a cache needs to be refreshed, a notice appears at the top of the workspace to guide you through the process. Find additional information and tips in this .

Verify your HTML page source

Please ensure that you are properly delivering static content via the CDN.

You can now modify your template to resize your images with us.

Installation

Start up the Spryker shop and run:

composer require scaleflex/spryker-cloudimage

Configuration in the shop

To get the package running, register the "Scaleflex" namespace into the config_default.php in the KernelConstants::CORE_NAMESPACES

Set these constants in the config, where it is needed. the BaseUrl and the ignoredUrlPaths need to be set according to the use case.

Integration into the code

Register the Twig plugin in the Pyz\Yves\Twig\TwigDependencyProvider.php

Example

Use the TwigFilter for the images. Here is an example of how to extend the Pyz\Yves\ShopUi\Theme\default\components\molecules\lazy-image.twig. Everywhere this molecule will use Cloudimage and apply a grey filter.

How to use the plugin

Cloudimage documentation for the operations:

Cloudimage documentation for the filters:

Cloudimage helps you deliver videos faster and lighter by compressing high-resolution files and transcoding them for adaptive streaming. This feature is suited for short clips for websites and web applications such as hero videos or product videos.

Reduce the weight of your videos automatically upon upload. To set it up, go to Settings > Video Settings.

• Automatic compression: toggle on to enable. Once done, Cloudimage will generate lower-resolution versions (1080p, 720p, 360p) in MP4 format for all videos stored in the Cloudimage Asset Library.

• Target bitrate: default 400 Kbps

Cloudimage delivers compressed videos, ready to be played in any video player, including HTML5 native. This ensures faster load times, lower bandwidth usage, and smooth playback across devices.

Transcoding for adaptive streaming

For seamless viewing on any connection, Cloudimage can transcode your videos into HLS (HTTP Live Streaming) format. It automatically generates a manifest file compatible with players like .

• Automatic transcoding: toggle on to enable. Once done, Cloudimage will transcode all videos after upload in the Cloudimage Asset Library.

This allows your audience to stream videos at the best quality their network can support, without buffering or manual adjustments.

doc_page=X

When you provide a link to a PDF file, the first page is converted to an image and delivered via CDN. You can use all available resizing operations, image filters, watermarking capabilities, and image compression formats. To convert a specific page of the PDF document, use the doc_page=X option:

Allows to crop an image by providing the exact cropping area. It is useful when you want to crop a specific part of the image. To set the coordinates of the crop rectangle, use the tl_px and br_px operations or the X and Y Parameters are an alternative way to set the coordinates.

tl_px=X1,Y1

br_px=X2,Y2 X=X1 Y=Y1

Resizes and crops the image to specified dimensions (width and height) while keeping proportions. The resulting image is then compressed and delivered via CDN.

func=crop

Aliases are a very easy way to hide parts of your URLs: They can be useful if your images come from different image repositories (for example: https://static.mycompany.com/bucket/img) and you do not wish these repositories to be publicly shown in your code. If you use only one repository for all your images, you can alternatively use .

With aliases, you can easily "mount" src0 to static.mycompany.com/bucket/img.

The dynamic watermark function allows you to specify the watermark image in the Cloudimage URL. This way, different watermarks can be used with different images.

Available parameters

If your are transferring your image optimisation and CDN service from another provider, Cloudimage provides an easy way to migrate your images without code changes.

By migrating to Cloudimage, your images will need to be downloaded from their origin and cached by Cloudimage. Make sure your origin is able to process the initial load or to perform a warm-up.

Case 1: not using a custom CNAME

Filters allow you to modify images on the fly by applying different effects.

Most of the on-the-fly image transformations can be configured using the Asset Variation Builder, an in-line URL builder to preview each image transformation instantly.

Available filters

Combining filters

To use more than one filter, you can either use separate parameters or concatenate them with commas into the f parameter:

Chooses the most important image features and objects and sets the focal point on them when cropping.

gravity=smart

gravity=auto

gravity=face

Smart gravity

Sets the crop focal point on the people in the image or on the most prominent features if no faces are detected. Useful for creating thumbnails from images with different aspect ratios.

Examples

Automatic gravity

Setting the gravity parameter to auto finds the focal point of the image based on entropy.

Examples

Face gravity

When using gravity=face, all images with one dominant face are focused on this face upon cropping. If there are many or no faces in the image, gravity falls back to auto.

Examples

If you need to tag an image or add a reference number as an overlay, use the text watermark function.

Available parameters

Examples

Cloudimage offers on-the-fly video processing with delivery via CDN using the Cloudimage URL for seamless integration. This feature is suited for short clips for websites and web applications such as hero videos or product videos.

Available Parameters

//token.cloudimg.io/original_image_url.mp4?w=600&format=auto

Examples

If your Web application does not use a CMS (Wordpress, Drupal, ...), e-commerce platform (Prestashop, Magento, ...), or development framework (React, Angular, Django, ...), then you need to adapt your image URLs in your HTML <img> tags.

Basic usage

For example, if your origin image is available at the following URL::

https://samples.scaleflex.com/flat.jpg

Then you need to adapt it to be:

//token.cloudimg.io/https://samples.scaleflex.com/flat.jpg?operations&filters&watermarks

Where:

• token: your Cloudimage token you obtain after registering for a Cloudimage account;

• operations: the resizing operation(s) as listed under ;

• filters: the filter transformation(s) as listed under ;

In your code, this URL can be used as a normal image in your <img> elements:

If you have implemented responsive design with the HTML <picture> and <srcset> elements, then you need to change every <srcset>:

Becomes:

You need to define the image size with operations1 and operations2 to deliver the lightest possible image. If you want Cloudimage to do the job for you and define the optimal size based on your container width, then look at our , and plugins.

Url-encoding resource URL

ci_url_encoded=1

If a resource is versioned or dynamically generated using query strings, or the filename contains unsupported or reserved characters, you will need to url-encode the URL of the resource. In this case, you need to add the ci_url_encoded=1 parameter to the Cloudimage URL.

For example, in the origin below, the ?w=22 query string is part of the static resource (origin image):

To construct a Cloudimage URL from it, the resource is URL-encoded and the width operation can be now used correctly:

Spaces in the filename

When using ci_url_encoded=1 to encode URLs with space in the filename, please consider the example: Image: https://freeaccessdemo.blob.core.windows.net/myfiles/Image with space in the name.jpg

Need to be encoded according to RFC-3986 (percent-encoding):

And if for example, we have extra values added to the origin resource like v=13, the final Cloudimage URL will look like this:

The following approach can be used in this case:

Installation

You can install the Cloudimage module from Github or by using Packagist.

Download from Github

• Step 1: Download the latest version

• Step 2: Extract the zip file at location "/modules"

• Step 3: In Admin go to Extend -> find Cloudimage by Scaleflex -> Install

Installation with Packagist

• Step 1: Run "composer require 'drupal/cloudimage_by_scaleflex:^1.0'"

• Step 2: In Admin go to Extend -> find Cloudimage by Scaleflex -> Install

Configuration

• Activation: Enable/Disable the module

• Standard Mode: Replace image URLs not using any Javascript or Javascript library.

• Token or CNAME: Please enter your cloudimage token here (eg: abcdefgh), or your complete CNAME (eg. media.company.com) if the configuration is already validated in your Cloudimage Admin.

Advanced User's options

• Custom JS Function: The valid js function starting with { and finishing with }

• Custom Library Options: Modifies the library URL (to add transformations)

The Cloudimage Prestashop Module will automatically adapt the image URLs in your Prestashop Theme to deliver your images rocket fast over the Cloudimage multi-CDN infrastructure. You only need to register with Cloudimage and install the plugin in your Prestashop Admin.

Installation

Prerequisites

First, you need to have a Cloudimage account. You can create one on the .

Step 1. Install the module

Manual installation - download and unzip the module

• Download the latest version

• Unzip the file and change the folder name to "cloudimage"

• Zip the file with the name "cloudimage.zip"

• In Admin go to Modules/Module Manager -> Upload the Zipped file

Automated installation - find the module in the marketplace

• In Admin go to Modules/Module Catalog search for "Clouldimage by Scaleflex"

• Click "Install"

Step 2. Configure the module

• Go to Modules/Module Manager -> Other Section -> Click on Configure on "Cloudimage by Scaleflex"

• Update configuration and activate the Module, then your site is ready to go. (Please clear the Cache)

Configuration

• Activation: Enable/Disable the module

• Cloudimage API Key: Your Cloudimage Token

• Prerender: If enabled, the plugin will disable JS Responsive and Change URL to {token}.cloudimg.io/{origin_url}

• Auto Base URL Image: If enabled, Production with SSL only, The Plugin auto add base url to some missing Base URL Images

Advanced User

• Custom JS Function: The valid js function starting with { and finishing with }

• Custom Library Options: Modifies the library URL and must begin with the symbol &. Please read document before use.

Please note: if you are using an earlier version of Prestashop (v1.6.x or less) and / or this plugins is not compatible with some of your add-ons, it is always possible to make a manual integration of the Cloudimage acceleration, following the .

How does it work?

Once installed and connected, Cloudimage by Scaleflex seamlessly enhances your Akeneo product images through real-time image optimization and CDN delivery.

Here’s how it works:

1. Image Fetching: Cloudimage fetches your original product images directly from Akeneo via secure URLs. You can choose between public or authenticated (Basic Auth) endpoints for accessing media.

2. Image Optimization on the Fly: Each image is processed in real-time via the Cloudimage CDN. Optimization includes automatic WebP/AVIF conversion, resizing, cropping, quality tuning, and lazy loading – all based on your configuration or URL parameters.

3. Delivery through a Global CDN: Optimized images are delivered via Cloudimage’s ultra-fast global CDN. This ensures instant load times, performance gains, and bandwidth savings for your PIM users, storefronts, or connected systems.

4. Smart Caching & Transformation Control: All transformations are cached at edge locations, and you remain in full control of presets, filters, and security (token-based protection, signed URLs, etc.).

5. Compatible with Headless & Omnichannel Setups: Whether you are delivering images to a traditional storefront or a headless frontend (React, Vue, etc.), Cloudimage ensures every product image is delivered in the right format, size, and quality – instantly.

Limitation

Once the application is activated, the access token is displayed only once for security reasons. If you leave or refresh the page without copying the token, it will no longer be accessible.

In such a case, you will need to re-activate the app in order to generate a new access token.

We recommend copying and storing the token securely immediately after activation to avoid any disruption.

Introduction

Scaleflex DMO, integrated with Akeneo, enables seamless management, optimization, and distribution of images, videos, and digital assets across all channels. Assets are automatically standardized, compressed, enriched with metadata, and delivered via CDN — enhancing visual performance and accelerating time-to-market.

Installation & Activation

Prerequisites

• You need an active DMO account. if you don't already have one.

Activation

• Log in to your Akeneo instance

• Go to Connect - App store, search by name: "Scaleflex", App name: "Cloudimage by Scaleflex"

• Click Connect: You will grant all permissions for the Akeneo App

• When activation is done, you will be redirected to the "Scaleflex DMO Success Connected"

Configurations

In the "Scaleflex DMO Success Connected", follow the steps in the guide:

• Step 1: Copy the Access Token

• Step 2: Open the Cloudimage Admin

  • Click on the button "Open Cloudimage Admin Config"

  • Go to the "Headers" block and fill in the value. Name: Authorization | Value:

When all the configuration is correct, the result will be like this.

How to use Cloudimage in Akeneo

To use Cloudimage when all are connected, you need to get the product media download link

Use in HTML:

Installation

Prerequisites

To use the plugin, you need to have a Cloudimage account. You can create one on the Cloudimage registration page.

Step 1. Download and install the module

Installation from Github

• Step 1: Download the latest version

• Step 2: Zip the file with the name "cloudimage.zip"

• Step 3: In Admin go to Extensions -> My extensions -> Upload extension

Or Installation from Store

• Step 1: In Admin go to Extensions -> Store -> Catalog and search for "Cloudimage by Scaleflex"

• Step 2: Click on extension and after that "Add extension"

• Step 3: Go to Extensions -> My extensions -> Cloudimage by Scaleflex -> Click on Configuration

• Step 4: Update configuration and activate the Module, then your site is ready to go.

Step 2. Configure the module

• Activation: Enable/Disable the module

• Standard Mode: Replace image URLs not using any Javascript or Javascript library.

• Token or CNAME: Please enter your cloudimage token here (eg: abcdefgh), or your complete CNAME (eg. media.company.com) if the configuration is already validated in your Cloudimage Admin.

Advanced User's options

• Custom JS Function: The valid js function starting with { and finishing with }

• Custom Library Options: Modifies the library URL (to add transformations)

This simple and fast implementation in Prestashop leverages JPEG optimisation, WebP compression and CDN delivery of your images. Contact us if you want to use Cloudimage at its full extend and also resize, watermark, transform and leverage responsive images on your Prestashop store.

Please note that to use your Cloudimage account with Prestashop, you need to use the Origin URL prefix function. This means that you will be able to use your Cloudimage token for delivering images only from your Prestashop site.

Installation

Prerequisites

To use the plugin, you need to have a Cloudimage account. You can create one on the .

Step 2. Configure the Cloudimage for use with Prestashop

There are two basic configuration steps:

1. First, you need to contact us at [email protected] and let us know that you would like to use your Cloudimage token with Prestashop. We will lock your account to the v7 API of Cloudimage. Note: This step is required only for tokens created before November 1, 2021.

2. Then, you need to set up the Origin URL prefix in your Cloudimage admin to your Prestashop domain. By doing this, your token will fetch images only from your Prestashop site.

Step 3. Log in to your Prestashop website admin

Step 4. On the Admin sidebar, go to Advanced Parameters > Performance.

Add in Media Server #1, the Cloudimage domain and click to Save.

Step 5. Clear the cache.

Verify your HTML page source

Please ensure that you are properly delivering static content via the CDN.

You can modify your template to resize your images with us

This simple and fast implementation in Prestashop leverages JPEG optimisation, WebP compression and CDN delivery of your images. Contact us if you want to use Cloudimage at its full extent and also resize, watermark, transform and leverage responsive images on your Prestashop store.

Cloudimage Presets are reusable templates of assets transformations that you can apply to any image or video for consistent results with a single click.

If you wish to apply the same transformations on many assets, you can define Presets (p) and apply transformations only using the Preset name (X).

p=X

All and can be included in a Preset, as well as and parameters.

You can find all your Presets in the admin panel, Settings / Image Settings / Presets.

The Cloudimage Opencart Plugin will automatically adapt the image URLs in your Opencart site to deliver your images rocket fast over the Cloudimage multi-CDN infrastructure. You only need to register with Cloudimage and install the plugin in your Opencart Admin.

Installation

To prevent your customer from removing certain parameters, you can seal them. For example, if you don't want your users to get the image without a watermark or a certain filter, you can use the URL sealing feature. This system is similar to the feature but it is only sealing the ci_eqs parameters and allows you to add more filters and operations to the URL without re-generating the signature. This method is compatible with the .

Please be aware that when URL sealing is activated for your token, all Cloudimage URLs that are not signed properly will cease to work.

The signature is calculated as follows:

Signature = sha1('URI' + 'ci_eqs' + 'Salt') where URI = original_image_url and ci_eqs = value of the content of ci_eqs query string

Responsive images libraries adapt the image size according to the screen or container size of the end user, thereby allowing websites and mobile apps to load faster across various screen sizes.

For example, on an iPhone, Cloudimage will deliver smaller images than it would on a 24" desktop computer screen, thus accelerating the page loading time.

Managing a responsive site manually can be tedious, especially for a site with more than a handful of images needing to be displayed on the ever-growing number of different devices & various screen-sizes. Therefore, the Cloudimage team has developed a JS plugin to automate everything for you. Check it out as well as a .

Performs either or depending on the origin image and the desired transformation dimensions.

If the desired image is smaller than the original, the result is cropped to achieve the desired dimensions.

func=cropfit

Examples

Installation

Prerequisites

You need to have a Kontent CMS setup.

Cloudimage lets you define transformation rules based on image path and filename pattern matching.

All and can be included in a rule, as well as and parameters.

Defining rules

You can define your presets in the admin panel, Image Settings / Rules.

Cloudimage leverages Content Delivery Networks to accelerate the delivery of your images worldwide. We work with multiple CDN providers to optimise the delivery of your images and provide superb reliability.

In addition to accelerating your images, the CDN provides DDoS (Distributed Denial of Service) protection, which will act as a shield to your servers and avoid any downtime.

CDNs cache images for faster delivery. They usually keep assets cached as long as it is stated in . When the original image changes, the CDN won’t automatically detect that, so you need to either change the image URL or invalidate the cached version.

Invalidation

To refresh your images, you can either update the Cloudimage URL or invalidate them to flush them from the resizing servers and the CDN.