# URL API 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.

## Basic usage

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

<mark style="color:red;">**<https://samples.scaleflex.com/flat.jpg>**</mark>

Then you need to adapt it to be:

//<mark style="color:blue;">**token**</mark>.cloudimg.io/<mark style="color:red;">**<https://samples.scaleflex.com/flat.jpg>**</mark>**?**<mark style="color:orange;">**operations**</mark>**&**<mark style="color:green;">**filters**</mark>**&**<mark style="color:purple;">**watermarks**</mark>

Where:

* **token**: your Cloudimage token you obtain after registering for a Cloudimage account;
* **operations**: the resizing operation(s) as listed under [image-operations](https://docs.cloudimage.io/transformations/image-operations "mention");
* **filters**: the filter transformation(s) as listed under [image-filters](https://docs.cloudimage.io/transformations/image-filters "mention");
* **watermarks**: any image or text overlay(s) as listed under [image-watermarking](https://docs.cloudimage.io/transformations/image-watermarking "mention").

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

{% code overflow="wrap" %}

```html
<img src="https://token.cloudimg.io/https://samples.scaleflex.com/flat.jpg?operations&filters&watermarks" />
```

{% endcode %}

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

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

Becomes:

```html
<picture>
  <source media="(min-width: 650px)" srcset="token.cloudimg.io/samples.scaleflex.com/flat.jpg?operations1&filters">
  <source media="(min-width: 465px)" srcset="token.cloudimg.io/samples.scaleflex..com/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](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/dev-implementation/javascript-lib), [React, ](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/dev-implementation/react-lib)and [Angular ](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/dev-implementation/angular-lib)plugins.

## Url-encoding resource URL <a href="#od_3b44635d" id="od_3b44635d"></a>

<mark style="color:orange;">**ci\_url\_encoded=1**</mark>

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):

[//<mark style="color:red;">samples.scaleflex.com/gen.php?</mark><mark style="color:red;">**w=22**</mark>](https://samples.scaleflex.com/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/<mark style="color:red;">**samples.scaleflex.com%2Fgen.php%3Fw%3D22**</mark>?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**ci\_url\_encoded=1**</mark>](http://doc.cloudimg.io/https%3A%2F%2Fsamples.scaleflex.com%2Fgen.php%3Fw%3D22?w=400\&ci_url_encoded=1&)

### **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):

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

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

```none
nonehttp://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
```

The following approach can be used in this case:

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