How is an ImageKit URL constructed?

It is essential to understand the construction of an ImageKit URL to correctly migrate existing and new images.

Variations of ImageKit URL

1. With the default ImageKit CNAME

https://ik.imagekit.io/{imagekit_ID}/{pattern}/{transformation}/{URL}

 

2. With your custom ImageKit CNAME

https://{imagekit_ID}.imagekit.io/{pattern}/{transformation}/{URL}

 

3. With a custom domain name

https://images.example.com/{pattern}/{transformation}/{URL}

 

Understanding different parts of ImageKit URL

a. imagekit_ID

ImageKit ID is the unique identifier for your account that you select at the time of registration. You can find your ImageKit ID in the top-right corner of your ImageKit dashboard. This is the first thing that appears in your URL after the hostname.

However, if you are using your own CNAME for ImageKit.io, the CNAME itself acts as an identifier for your account and then ImageKit ID is not needed in the URL.

 

b. pattern

The URL pattern acts as a map to identify the image sources for fetching an image. You can create new URL patterns in the migration section of your ImageKit dashboard.

By default, your account has a pattern without a URL prefix i.e. “/” which maps to all the image sources that you add to your account.

 

c. transformation

This part of the URL is used to specify the transformations and optimizations that you want to perform on an image. The transformation string always begins with the prefix ‘tr:’. For example – ‘tr:h-100’.

If you do not want any transformation on your image, except for the default ones, then you can omit this in the URL.

You can read about available transformations here.

d. URL

The image is fetched using this URL. This URL will be searched on all the image sources that are available for the URL pattern specified in the URL.

Examples

Let us look at a few examples to understand how URLs are parsed by ImageKit. In these examples, will use ‘demo’ as the ImageKit ID.

1. Default pattern without transformation

https://ik.imagekit.io/demo/default-image.jpg

The effective URL here is ‘default-image.jpg’.

2. Default pattern with transformation

https://ik.imagekit.io/demo/tr:w-100,h-100/default-image.jpg

The transformation string is ‘tr:w-100,h-100’ and the effective URL is ‘default-image.jpg’

3. ‘img’ pattern with transformation

https://ik.imagekit.io/demo/img/tr:w-150,h-150/files/sample-file.jpg

The pattern is ‘img’, the transformation string is ‘tr:w-150,h-150’ and the effective URL is ‘files/sample-file.jpg’.

 

If you have any questions on how to use ImageKit, please reach out to us on developer@imagekit.io