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, Magenta, ...) 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:
<src="http://sample.li/flat.jpg" />
Then you need to adapt it to be:
<src="https://token.cloudimg.io/operation/size/filter/http://sample.li/flat.jpg" />
Where:
- token: your Cloudimage token you obtain after registering for a Cloudimage account
- operation: the resizing operation as listed under Operations
- size: the target size of the image
- filter: the filter transformation as listed under Filters
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/operation/size1/filter/sample.li/flat.jpg">
<source media="(min-width: 465px)" srcset="token.cloudimg.io/operation/size2/filter/sample.li/flat.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
You need to define the size1
and size2
to deliver the lightest possible image. If you wand 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)
Javascript lib
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.
A demo is available here and full documentation here.
React plugin
Supported with React 16.3+
Supported with Angular 4+