Cloudimage - Documentation

Implementing Cloudimage on your Web application

There are multiple ways to implement Cloudimage easily into your Web application.

Manual implementation

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.

For example, if your origin image is available at http://sample.li/flat.jpg and referenced in your code as:

<img src="http://sample.li/flat.jpg" />

Then you need to adapt it to be:

<img src="https://token.cloudimg.io/http://sample.li/flat.jpg?operations&filters" />

Where:

  • token: your Cloudimage token you obtain after registering for a Cloudimage account
  • operations: the resizing operation as listed under Operations
  • filters: the filter transformation as listed under Filters

For resources which include query strings (query string versioning or dynamically-generated images like maps), you can url-encode the path and add ci_url_encoded=1 to the Cloudimage operations.

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

<picture>
  <source media="(min-width: 650px)" srcset="/sample.li/flat.jpg">
  <source media="(min-width: 465px)" srcset="/sample.li/flat.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Becomes:

<picture>
  <source media="(min-width: 650px)" srcset="token.cloudimg.io/sample.li/flat.jpg?operations1&filters">
  <source media="(min-width: 465px)" srcset="token.cloudimg.io/sample.li/flat.jpg?operations2&filters">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

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 JS lib below.

Scripted implementation (plugins)

The Cloudimage JS lib will adapt all your URLs automatically and offers built-in Responsive Design, Lazyloading and many more features to make your website responsive, fast and add nice loading effects to your images.

React plugin

Supported with React 16.3+

github

demo

code sandbox

documentation

Angular plugin

Supported with Angular 4+

github

demo

code sandbox

documentation

CMS plugins

The Cloudimage WordPress plugin will automatically adapt the image URLs in your WordPress site to deliver your images rocket fast over Cloudimage. You can also easily setup your Magento shop to use our services.