# 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' )
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cloudimage.io/implementation/url-api-implementation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.