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(s) as listed under Operations

• filters: the filter transformation(s) 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/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, React and Angular 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 character, you can url-encode the URL of the resource. In this case, you have 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:

//sample.li/gen.php?w=22

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

//doc.cloudimg.io/sample.li%2Fgen.php%3Fw%3D22?w=400&ci_url_encoded=1

Space in the file names:

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 first (space to be escaped in the format of):

https://freeaccessdemo.blob.core.windows.net/myfiles/Image%20with%20space%20in%20the%20name.jpg

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

http://doc.cloudimg.io/https%3A%2F%2Ffreeaccessdemo.blob.core.windows.net%2Fmyfiles%2FImage%2520with%2520space%2520in%2520the%2520name.jpg%3Fv%3D13?w=600&ci_url_encoded=1

Can be used the method:

encodeURIComponent( path ).replace( /%20/g, '%2520' )