URL Structure

The PixelBin CDN URL that is used to transform or deliver assets has the following structures.

https://cdn.pixelbin.io/v2/{CLOUD_NAME}/{PATTERN}/{FILE_PATH}

https://cdn.pixelbin.io/v2/{CLOUD_NAME}/wrkr/{FILE_PATH}

https://cdn.pixelbin.io/v2/{CLOUD_NAME}/{ZONE_SLUG}/{PATTERN}/{FILE_PATH}

https://cdn.pixelbin.io/v2/{CLOUD_NAME}/{ZONE_SLUG}/wrkr/{FILE_PATH}

Zone

Each PixelBin CDN URL is a Zone URL. If a PixelBin CDN URL does not have the ZONE_SLUG parameter, that means that it is a Default Zone URL.

Parameters

{CLOUD_NAME}

Unique ID of an organization. It is created when a user creates an organization. To learn more about the organization and the associated cloud name, click here.

{PATTERN}

The pattern parameter corresponds to the transformations that need to be applied to the input file. You can apply a single transformation or a combination of transformations, add-ons and presets. Learn more.

If the original keyword is used in place of the pattern, the returned file will be the original asset without any modifications.

{FILE_PATH}

The relative path of the file from the root folder of the storage along with the extension.

{ZONE_SLUG}

Unique ID of a zone if using external storage to deliver a file.

wrkr

PixelBin CDN URLs with wrkr parameter are Zone URLs that have their URL Translation Worker set.

Optional Parameters

A user can add additional query parameters at the end of the CDN URL to customize the returned output. These are optional and not mandatory.

f_auto - automatic delivery of the best file option supported by the browser and available at the time of the request, based on the Accept header and other parameters, if any. Go to Format optimization to learn more about how to use it.
dpr - Acronym for Device Pixel Ratio. DPR is used to provide the best image resolutions possible to a user's device. It is based on the density of pixels in the viewing device. Go to Device Pixel Ratio to learn more about it.
preview - Use this to only view the image on the browser.
download - Use this to directly download the output image. It has more priority over the preview optional parameter.

CDN Response

A user will get a 200 response status code with the output file in the response body if no error occurs and the transformation is over if any is applied.
A user will get a 202 response status code with a JSON message as shown below if no error occurs but the applied transformation is still not over.
```
{"message": "Your transformation request is still being processed. It will finish soon and be made available on the same URL."}
```
The user can again refresh the CDN URL to check the results. If the applied transformation is complete, then the URL will return the image otherwise it will still return 202 status until the transformation is over.
A user will get a TransformationJobError JSON object if any occurs in the applied transformations. The JSON object will have the appropriate error message to debug the issue.

Transformation Pattern

Single Transformation

A single transformation pattern can be either a basic/ml transformation, an add-on or a preset used in a CDN URL.

Each transformation has a name, an identifier and params to configure the applied transformation.

info

For a preset, the identifier will be p and the name will be the name of the preset. A preset will have no params.

Let's take a look at the URL of this image uploaded to PixelBin: The same image is resized to a height of 200px and a width of 200px.

Resize with height 100px and width 100px
Original

https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg

<PixelBinImage
    url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg"
/>

import Pixelbin from "@pixelbin/core";

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]}],
    filePath: "images/transformation/basic-default.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.default.utils.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg

const Pixelbin = require("@pixelbin/admin");

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]}],
    filePath: "images/transformation/basic-default.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.url.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg

from pixelbin.utils.url import obj_to_url

obj = {
    "cloudName": "dummy-cloudname",
    "zone": "FIDrmb",
    "version": "v2",
    "transformations": [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]}],
    "filePath": "images/transformation/basic-default.jpeg",
    "baseUrl": "https://cdn.pixelbin.io",
}

url = obj_to_url(obj)

# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg

package main

import (
 "fmt"
 "github.com/pixelbin-dev/pixelbin-go/v2/sdk/utils/url"
)

func main() {
    obj := map[string]interface{}{
        "cloudName": "dummy-cloudname",
        "zoneSlug": "FIDrmb",
        "version": "v2",
        "transformations": []map[string]interface{}{
            {"plugin": "t", "name": "resize", "values": []map[string]interface{}{ {"key": "h", "value": "200"},{"key": "w", "value": "200"},}},
        },
        "filePath": "images/transformation/basic-default.jpeg",
        "baseUrl": "https://cdn.pixelbin.io",
        "options": map[string]interface{}{},
    }

    urlstring, err := url.ObjToUrl(obj)

    if err != nil {
        fmt.Println(err)
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg

import com.pixelbin.url.UrlObj
import com.pixelbin.Utils
import com.pixelbin.transformation.TransformationObj

fun main(){
    val obj = UrlObj(
        cloudName = "dummy-cloudname",
        zone = "FIDrmb",
        version = "v2",
        transformation = arrayListOf(
            TransformationObj( plugin = "t", name = "resize", values = hashMapOf( "h" to "200","w" to "200"), )
        ),
        filePath = "images/transformation/basic-default.jpeg",
        baseUrl = "https://cdn.pixelbin.io"
    )

    val url = Utils.objToUrl(obj)
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg

using System;
using System.Collections.Generic;
using System.IO;
using Pixelbin.Utils;

namespace ExampleNamespace
{
    class ExampleClass
    {
        static void Main(string[] args)
        {
            UrlObj obj = new UrlObj(
                version: "v2",
                cloudName: "dummy-cloudname",
                filePath: "images/transformation/basic-default.jpeg",
                zone: "FIDrmb",
                baseUrl: "https://cdn.pixelbin.io",
                transformations: new List<UrlTransformation>() {
                    new UrlTransformation(plugin: "t", name: "resize", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "h" }, { "value", "200" } }, new Dictionary<string, string>() { { "key", "w" }, { "value", "200" } }} )
                }
            );

            string url = Url.ObjToUrl(obj);
        }
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg

<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;

$obj = [
    "cloudName" => "dummy-cloudname",
    "zone" => "FIDrmb",
    "version" => "v2",
    "options" => [],
    "transformations" => [
        ["plugin" => "t", "name" => "resize", "values" => [ [ "key" => "h", "value" => "200" ], [ "key" => "w", "value" => "200" ], ], ],
    ],
    "filePath" => "images/transformation/basic-default.jpeg",
    "baseUrl" => "https://cdn.pixelbin.io",
];

$url = Url::obj_to_url($obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg
?>

https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

<PixelBinImage
    url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg"
/>

import Pixelbin from "@pixelbin/core";

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [],
    filePath: "images/transformation/basic-default.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.default.utils.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

const Pixelbin = require("@pixelbin/admin");

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [],
    filePath: "images/transformation/basic-default.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.url.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

from pixelbin.utils.url import obj_to_url

obj = {
    "cloudName": "dummy-cloudname",
    "zone": "FIDrmb",
    "version": "v2",
    "transformations": [],
    "filePath": "images/transformation/basic-default.jpeg",
    "baseUrl": "https://cdn.pixelbin.io",
}

url = obj_to_url(obj)

# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

package main

import (
 "fmt"
 "github.com/pixelbin-dev/pixelbin-go/v2/sdk/utils/url"
)

func main() {
    obj := map[string]interface{}{
        "cloudName": "dummy-cloudname",
        "zoneSlug": "FIDrmb",
        "version": "v2",
        "transformations": []map[string]interface{}{
            
        },
        "filePath": "images/transformation/basic-default.jpeg",
        "baseUrl": "https://cdn.pixelbin.io",
        "options": map[string]interface{}{},
    }

    urlstring, err := url.ObjToUrl(obj)

    if err != nil {
        fmt.Println(err)
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

import com.pixelbin.url.UrlObj
import com.pixelbin.Utils
import com.pixelbin.transformation.TransformationObj

fun main(){
    val obj = UrlObj(
        cloudName = "dummy-cloudname",
        zone = "FIDrmb",
        version = "v2",
        transformation = arrayListOf(
            
        ),
        filePath = "images/transformation/basic-default.jpeg",
        baseUrl = "https://cdn.pixelbin.io"
    )

    val url = Utils.objToUrl(obj)
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

using System;
using System.Collections.Generic;
using System.IO;
using Pixelbin.Utils;

namespace ExampleNamespace
{
    class ExampleClass
    {
        static void Main(string[] args)
        {
            UrlObj obj = new UrlObj(
                version: "v2",
                cloudName: "dummy-cloudname",
                filePath: "images/transformation/basic-default.jpeg",
                zone: "FIDrmb",
                baseUrl: "https://cdn.pixelbin.io",
                transformations: new List<UrlTransformation>() {
                    
                }
            );

            string url = Url.ObjToUrl(obj);
        }
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;

$obj = [
    "cloudName" => "dummy-cloudname",
    "zone" => "FIDrmb",
    "version" => "v2",
    "options" => [],
    "transformations" => [
        
    ],
    "filePath" => "images/transformation/basic-default.jpeg",
    "baseUrl" => "https://cdn.pixelbin.io",
];

$url = Url::obj_to_url($obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg
?>

Notice how the pattern changes from original to t.resize(h:200,w:200) indicating that the resize transformation has been applied and the image has been resized to 200x200 pixels.

The transformation t.resize(h:200,w:200) can be separated as follows:

t - Identifier
resize - Name
h:200 - Param h with value 200
w:200 - Param w with value 200

Chained Transformations

You can perform a series of transformations sequentially on an image by combining multiple basic/ml transformations, add-ons, and presets. Some transformations are dependent on the sequence they're carried out in.

Each transformation is separated by using a tilde(~) symbol.

Let us see some examples.

Resize and Extend
Resize, Blur and Extend
Original

https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg

<PixelBinImage
    url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg"
/>

import Pixelbin from "@pixelbin/core";

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"300"},{"key":"w","value":"200"}]},{"name":"extend","plugin":"t","values":[{"key":"t","value":"20"},{"key":"r","value":"20"},{"key":"b","value":"20"},{"key":"l","value":"20"},{"key":"bc","value":"deb887"}]}],
    filePath: "images/transformation/basic-default.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.default.utils.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg

const Pixelbin = require("@pixelbin/admin");

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"300"},{"key":"w","value":"200"}]},{"name":"extend","plugin":"t","values":[{"key":"t","value":"20"},{"key":"r","value":"20"},{"key":"b","value":"20"},{"key":"l","value":"20"},{"key":"bc","value":"deb887"}]}],
    filePath: "images/transformation/basic-default.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.url.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg

from pixelbin.utils.url import obj_to_url

obj = {
    "cloudName": "dummy-cloudname",
    "zone": "FIDrmb",
    "version": "v2",
    "transformations": [{"name":"resize","plugin":"t","values":[{"key":"h","value":"300"},{"key":"w","value":"200"}]},{"name":"extend","plugin":"t","values":[{"key":"t","value":"20"},{"key":"r","value":"20"},{"key":"b","value":"20"},{"key":"l","value":"20"},{"key":"bc","value":"deb887"}]}],
    "filePath": "images/transformation/basic-default.jpeg",
    "baseUrl": "https://cdn.pixelbin.io",
}

url = obj_to_url(obj)

# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg

package main

import (
 "fmt"
 "github.com/pixelbin-dev/pixelbin-go/v2/sdk/utils/url"
)

func main() {
    obj := map[string]interface{}{
        "cloudName": "dummy-cloudname",
        "zoneSlug": "FIDrmb",
        "version": "v2",
        "transformations": []map[string]interface{}{
            {"plugin": "t", "name": "resize", "values": []map[string]interface{}{ {"key": "h", "value": "300"},{"key": "w", "value": "200"},}},,
{"plugin": "t", "name": "extend", "values": []map[string]interface{}{ {"key": "t", "value": "20"},{"key": "r", "value": "20"},{"key": "b", "value": "20"},{"key": "l", "value": "20"},{"key": "bc", "value": "deb887"},}},
        },
        "filePath": "images/transformation/basic-default.jpeg",
        "baseUrl": "https://cdn.pixelbin.io",
        "options": map[string]interface{}{},
    }

    urlstring, err := url.ObjToUrl(obj)

    if err != nil {
        fmt.Println(err)
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg

import com.pixelbin.url.UrlObj
import com.pixelbin.Utils
import com.pixelbin.transformation.TransformationObj

fun main(){
    val obj = UrlObj(
        cloudName = "dummy-cloudname",
        zone = "FIDrmb",
        version = "v2",
        transformation = arrayListOf(
            TransformationObj( plugin = "t", name = "resize", values = hashMapOf( "h" to "300","w" to "200"), ),
TransformationObj( plugin = "t", name = "extend", values = hashMapOf( "t" to "20","r" to "20","b" to "20","l" to "20","bc" to "deb887"), )
        ),
        filePath = "images/transformation/basic-default.jpeg",
        baseUrl = "https://cdn.pixelbin.io"
    )

    val url = Utils.objToUrl(obj)
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg

using System;
using System.Collections.Generic;
using System.IO;
using Pixelbin.Utils;

namespace ExampleNamespace
{
    class ExampleClass
    {
        static void Main(string[] args)
        {
            UrlObj obj = new UrlObj(
                version: "v2",
                cloudName: "dummy-cloudname",
                filePath: "images/transformation/basic-default.jpeg",
                zone: "FIDrmb",
                baseUrl: "https://cdn.pixelbin.io",
                transformations: new List<UrlTransformation>() {
                    new UrlTransformation(plugin: "t", name: "resize", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "h" }, { "value", "300" } }, new Dictionary<string, string>() { { "key", "w" }, { "value", "200" } }} ),
new UrlTransformation(plugin: "t", name: "extend", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "t" }, { "value", "20" } }, new Dictionary<string, string>() { { "key", "r" }, { "value", "20" } }, new Dictionary<string, string>() { { "key", "b" }, { "value", "20" } }, new Dictionary<string, string>() { { "key", "l" }, { "value", "20" } }, new Dictionary<string, string>() { { "key", "bc" }, { "value", "deb887" } }} )
                }
            );

            string url = Url.ObjToUrl(obj);
        }
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg

<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;

$obj = [
    "cloudName" => "dummy-cloudname",
    "zone" => "FIDrmb",
    "version" => "v2",
    "options" => [],
    "transformations" => [
        ["plugin" => "t", "name" => "resize", "values" => [ [ "key" => "h", "value" => "300" ], [ "key" => "w", "value" => "200" ], ], ],
["plugin" => "t", "name" => "extend", "values" => [ [ "key" => "t", "value" => "20" ], [ "key" => "r", "value" => "20" ], [ "key" => "b", "value" => "20" ], [ "key" => "l", "value" => "20" ], [ "key" => "bc", "value" => "deb887" ], ], ],
    ],
    "filePath" => "images/transformation/basic-default.jpeg",
    "baseUrl" => "https://cdn.pixelbin.io",
];

$url = Url::obj_to_url($obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg
?>

https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg

<PixelBinImage
    url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg"
/>

import Pixelbin from "@pixelbin/core";

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"extend","plugin":"t","values":[{"key":"bt","value":"replicate"}]}],
    filePath: "images/transformation/basic-default.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.default.utils.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg

const Pixelbin = require("@pixelbin/admin");

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"extend","plugin":"t","values":[{"key":"bt","value":"replicate"}]}],
    filePath: "images/transformation/basic-default.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.url.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg

from pixelbin.utils.url import obj_to_url

obj = {
    "cloudName": "dummy-cloudname",
    "zone": "FIDrmb",
    "version": "v2",
    "transformations": [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"extend","plugin":"t","values":[{"key":"bt","value":"replicate"}]}],
    "filePath": "images/transformation/basic-default.jpeg",
    "baseUrl": "https://cdn.pixelbin.io",
}

url = obj_to_url(obj)

# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg

package main

import (
 "fmt"
 "github.com/pixelbin-dev/pixelbin-go/v2/sdk/utils/url"
)

func main() {
    obj := map[string]interface{}{
        "cloudName": "dummy-cloudname",
        "zoneSlug": "FIDrmb",
        "version": "v2",
        "transformations": []map[string]interface{}{
            {"plugin": "t", "name": "resize", "values": []map[string]interface{}{ {"key": "h", "value": "200"},{"key": "w", "value": "200"},}},,
{"plugin": "t", "name": "blur", "values": []map[string]interface{}{ {"key": "s", "value": "2"},}},,
{"plugin": "t", "name": "extend", "values": []map[string]interface{}{ {"key": "bt", "value": "replicate"},}},
        },
        "filePath": "images/transformation/basic-default.jpeg",
        "baseUrl": "https://cdn.pixelbin.io",
        "options": map[string]interface{}{},
    }

    urlstring, err := url.ObjToUrl(obj)

    if err != nil {
        fmt.Println(err)
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg

import com.pixelbin.url.UrlObj
import com.pixelbin.Utils
import com.pixelbin.transformation.TransformationObj

fun main(){
    val obj = UrlObj(
        cloudName = "dummy-cloudname",
        zone = "FIDrmb",
        version = "v2",
        transformation = arrayListOf(
            TransformationObj( plugin = "t", name = "resize", values = hashMapOf( "h" to "200","w" to "200"), ),
TransformationObj( plugin = "t", name = "blur", values = hashMapOf( "s" to "2"), ),
TransformationObj( plugin = "t", name = "extend", values = hashMapOf( "bt" to "replicate"), )
        ),
        filePath = "images/transformation/basic-default.jpeg",
        baseUrl = "https://cdn.pixelbin.io"
    )

    val url = Utils.objToUrl(obj)
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg

using System;
using System.Collections.Generic;
using System.IO;
using Pixelbin.Utils;

namespace ExampleNamespace
{
    class ExampleClass
    {
        static void Main(string[] args)
        {
            UrlObj obj = new UrlObj(
                version: "v2",
                cloudName: "dummy-cloudname",
                filePath: "images/transformation/basic-default.jpeg",
                zone: "FIDrmb",
                baseUrl: "https://cdn.pixelbin.io",
                transformations: new List<UrlTransformation>() {
                    new UrlTransformation(plugin: "t", name: "resize", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "h" }, { "value", "200" } }, new Dictionary<string, string>() { { "key", "w" }, { "value", "200" } }} ),
new UrlTransformation(plugin: "t", name: "blur", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "s" }, { "value", "2" } }} ),
new UrlTransformation(plugin: "t", name: "extend", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "bt" }, { "value", "replicate" } }} )
                }
            );

            string url = Url.ObjToUrl(obj);
        }
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg

<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;

$obj = [
    "cloudName" => "dummy-cloudname",
    "zone" => "FIDrmb",
    "version" => "v2",
    "options" => [],
    "transformations" => [
        ["plugin" => "t", "name" => "resize", "values" => [ [ "key" => "h", "value" => "200" ], [ "key" => "w", "value" => "200" ], ], ],
["plugin" => "t", "name" => "blur", "values" => [ [ "key" => "s", "value" => "2" ], ], ],
["plugin" => "t", "name" => "extend", "values" => [ [ "key" => "bt", "value" => "replicate" ], ], ],
    ],
    "filePath" => "images/transformation/basic-default.jpeg",
    "baseUrl" => "https://cdn.pixelbin.io",
];

$url = Url::obj_to_url($obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg
?>

https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

<PixelBinImage
    url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg"
/>

import Pixelbin from "@pixelbin/core";

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [],
    filePath: "images/transformation/basic-default.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.default.utils.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

const Pixelbin = require("@pixelbin/admin");

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [],
    filePath: "images/transformation/basic-default.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.url.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

from pixelbin.utils.url import obj_to_url

obj = {
    "cloudName": "dummy-cloudname",
    "zone": "FIDrmb",
    "version": "v2",
    "transformations": [],
    "filePath": "images/transformation/basic-default.jpeg",
    "baseUrl": "https://cdn.pixelbin.io",
}

url = obj_to_url(obj)

# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

package main

import (
 "fmt"
 "github.com/pixelbin-dev/pixelbin-go/v2/sdk/utils/url"
)

func main() {
    obj := map[string]interface{}{
        "cloudName": "dummy-cloudname",
        "zoneSlug": "FIDrmb",
        "version": "v2",
        "transformations": []map[string]interface{}{
            
        },
        "filePath": "images/transformation/basic-default.jpeg",
        "baseUrl": "https://cdn.pixelbin.io",
        "options": map[string]interface{}{},
    }

    urlstring, err := url.ObjToUrl(obj)

    if err != nil {
        fmt.Println(err)
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

import com.pixelbin.url.UrlObj
import com.pixelbin.Utils
import com.pixelbin.transformation.TransformationObj

fun main(){
    val obj = UrlObj(
        cloudName = "dummy-cloudname",
        zone = "FIDrmb",
        version = "v2",
        transformation = arrayListOf(
            
        ),
        filePath = "images/transformation/basic-default.jpeg",
        baseUrl = "https://cdn.pixelbin.io"
    )

    val url = Utils.objToUrl(obj)
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

using System;
using System.Collections.Generic;
using System.IO;
using Pixelbin.Utils;

namespace ExampleNamespace
{
    class ExampleClass
    {
        static void Main(string[] args)
        {
            UrlObj obj = new UrlObj(
                version: "v2",
                cloudName: "dummy-cloudname",
                filePath: "images/transformation/basic-default.jpeg",
                zone: "FIDrmb",
                baseUrl: "https://cdn.pixelbin.io",
                transformations: new List<UrlTransformation>() {
                    
                }
            );

            string url = Url.ObjToUrl(obj);
        }
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg

<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;

$obj = [
    "cloudName" => "dummy-cloudname",
    "zone" => "FIDrmb",
    "version" => "v2",
    "options" => [],
    "transformations" => [
        
    ],
    "filePath" => "images/transformation/basic-default.jpeg",
    "baseUrl" => "https://cdn.pixelbin.io",
];

$url = Url::obj_to_url($obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg
?>

Example

Imagine that we want to produce an optimized placeholder image for a thumbnail. To do that, we will first resize the image to 100x100 pixels, then blur it, and lastly convert the output to webp format.

Let us go over each step.

Set the dimensions to 100px to resize the picture.
```
t.resize(h:100,w:100)
```
Apply blur using a 2 sigma value.
```
t.blur(s:2)
```
Change format to webp. The image size can be reduced while retaining visual quality by switching the format to webp.
```
t.toFormat(f:webp)
```

These three steps are combined by PixelBin into a chain, with a tilde ~ sign separating each step.

t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)

Placeholder Thumbnail
Original

https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg

<PixelBinImage
    url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg"
/>

import Pixelbin from "@pixelbin/core";

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"100"},{"key":"w","value":"100"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"toFormat","plugin":"t","values":[{"key":"f","value":"webp"}]}],
    filePath: "images/transformation/seaplane.jpg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.default.utils.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg

const Pixelbin = require("@pixelbin/admin");

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"100"},{"key":"w","value":"100"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"toFormat","plugin":"t","values":[{"key":"f","value":"webp"}]}],
    filePath: "images/transformation/seaplane.jpg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.url.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg

from pixelbin.utils.url import obj_to_url

obj = {
    "cloudName": "dummy-cloudname",
    "zone": "FIDrmb",
    "version": "v2",
    "transformations": [{"name":"resize","plugin":"t","values":[{"key":"h","value":"100"},{"key":"w","value":"100"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"toFormat","plugin":"t","values":[{"key":"f","value":"webp"}]}],
    "filePath": "images/transformation/seaplane.jpg",
    "baseUrl": "https://cdn.pixelbin.io",
}

url = obj_to_url(obj)

# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg

package main

import (
 "fmt"
 "github.com/pixelbin-dev/pixelbin-go/v2/sdk/utils/url"
)

func main() {
    obj := map[string]interface{}{
        "cloudName": "dummy-cloudname",
        "zoneSlug": "FIDrmb",
        "version": "v2",
        "transformations": []map[string]interface{}{
            {"plugin": "t", "name": "resize", "values": []map[string]interface{}{ {"key": "h", "value": "100"},{"key": "w", "value": "100"},}},,
{"plugin": "t", "name": "blur", "values": []map[string]interface{}{ {"key": "s", "value": "2"},}},,
{"plugin": "t", "name": "toFormat", "values": []map[string]interface{}{ {"key": "f", "value": "webp"},}},
        },
        "filePath": "images/transformation/seaplane.jpg",
        "baseUrl": "https://cdn.pixelbin.io",
        "options": map[string]interface{}{},
    }

    urlstring, err := url.ObjToUrl(obj)

    if err != nil {
        fmt.Println(err)
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg

import com.pixelbin.url.UrlObj
import com.pixelbin.Utils
import com.pixelbin.transformation.TransformationObj

fun main(){
    val obj = UrlObj(
        cloudName = "dummy-cloudname",
        zone = "FIDrmb",
        version = "v2",
        transformation = arrayListOf(
            TransformationObj( plugin = "t", name = "resize", values = hashMapOf( "h" to "100","w" to "100"), ),
TransformationObj( plugin = "t", name = "blur", values = hashMapOf( "s" to "2"), ),
TransformationObj( plugin = "t", name = "toFormat", values = hashMapOf( "f" to "webp"), )
        ),
        filePath = "images/transformation/seaplane.jpg",
        baseUrl = "https://cdn.pixelbin.io"
    )

    val url = Utils.objToUrl(obj)
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg

using System;
using System.Collections.Generic;
using System.IO;
using Pixelbin.Utils;

namespace ExampleNamespace
{
    class ExampleClass
    {
        static void Main(string[] args)
        {
            UrlObj obj = new UrlObj(
                version: "v2",
                cloudName: "dummy-cloudname",
                filePath: "images/transformation/seaplane.jpg",
                zone: "FIDrmb",
                baseUrl: "https://cdn.pixelbin.io",
                transformations: new List<UrlTransformation>() {
                    new UrlTransformation(plugin: "t", name: "resize", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "h" }, { "value", "100" } }, new Dictionary<string, string>() { { "key", "w" }, { "value", "100" } }} ),
new UrlTransformation(plugin: "t", name: "blur", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "s" }, { "value", "2" } }} ),
new UrlTransformation(plugin: "t", name: "toFormat", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "f" }, { "value", "webp" } }} )
                }
            );

            string url = Url.ObjToUrl(obj);
        }
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg

<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;

$obj = [
    "cloudName" => "dummy-cloudname",
    "zone" => "FIDrmb",
    "version" => "v2",
    "options" => [],
    "transformations" => [
        ["plugin" => "t", "name" => "resize", "values" => [ [ "key" => "h", "value" => "100" ], [ "key" => "w", "value" => "100" ], ], ],
["plugin" => "t", "name" => "blur", "values" => [ [ "key" => "s", "value" => "2" ], ], ],
["plugin" => "t", "name" => "toFormat", "values" => [ [ "key" => "f", "value" => "webp" ], ], ],
    ],
    "filePath" => "images/transformation/seaplane.jpg",
    "baseUrl" => "https://cdn.pixelbin.io",
];

$url = Url::obj_to_url($obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg
?>

https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg

<PixelBinImage
    url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg"
/>

import Pixelbin from "@pixelbin/core";

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [],
    filePath: "images/transformation/seaplane.jpg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.default.utils.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg

const Pixelbin = require("@pixelbin/admin");

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [],
    filePath: "images/transformation/seaplane.jpg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.url.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg

from pixelbin.utils.url import obj_to_url

obj = {
    "cloudName": "dummy-cloudname",
    "zone": "FIDrmb",
    "version": "v2",
    "transformations": [],
    "filePath": "images/transformation/seaplane.jpg",
    "baseUrl": "https://cdn.pixelbin.io",
}

url = obj_to_url(obj)

# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg

package main

import (
 "fmt"
 "github.com/pixelbin-dev/pixelbin-go/v2/sdk/utils/url"
)

func main() {
    obj := map[string]interface{}{
        "cloudName": "dummy-cloudname",
        "zoneSlug": "FIDrmb",
        "version": "v2",
        "transformations": []map[string]interface{}{
            
        },
        "filePath": "images/transformation/seaplane.jpg",
        "baseUrl": "https://cdn.pixelbin.io",
        "options": map[string]interface{}{},
    }

    urlstring, err := url.ObjToUrl(obj)

    if err != nil {
        fmt.Println(err)
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg

import com.pixelbin.url.UrlObj
import com.pixelbin.Utils
import com.pixelbin.transformation.TransformationObj

fun main(){
    val obj = UrlObj(
        cloudName = "dummy-cloudname",
        zone = "FIDrmb",
        version = "v2",
        transformation = arrayListOf(
            
        ),
        filePath = "images/transformation/seaplane.jpg",
        baseUrl = "https://cdn.pixelbin.io"
    )

    val url = Utils.objToUrl(obj)
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg

using System;
using System.Collections.Generic;
using System.IO;
using Pixelbin.Utils;

namespace ExampleNamespace
{
    class ExampleClass
    {
        static void Main(string[] args)
        {
            UrlObj obj = new UrlObj(
                version: "v2",
                cloudName: "dummy-cloudname",
                filePath: "images/transformation/seaplane.jpg",
                zone: "FIDrmb",
                baseUrl: "https://cdn.pixelbin.io",
                transformations: new List<UrlTransformation>() {
                    
                }
            );

            string url = Url.ObjToUrl(obj);
        }
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg

<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;

$obj = [
    "cloudName" => "dummy-cloudname",
    "zone" => "FIDrmb",
    "version" => "v2",
    "options" => [],
    "transformations" => [
        
    ],
    "filePath" => "images/transformation/seaplane.jpg",
    "baseUrl" => "https://cdn.pixelbin.io",
];

$url = Url::obj_to_url($obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg
?>

tip

Using presets, you can save your often-used chained transformations with a user-friendly name.

Click here to know more.

Transforming Images using URL

The following video demonstrates how to transform your images on the go using PixelBin's URL parameters.