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
2. With your custom ImageKit CNAME
3. With a custom domain name
Understanding different parts of ImageKit URL
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.
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.
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.
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.
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
The effective URL here is ‘default-image.jpg’.
2. Default pattern with transformation
The transformation string is ‘tr:w-100,h-100’ and the effective URL is ‘default-image.jpg’
3. ‘img’ pattern with transformation
The pattern is ‘img’, the transformation string is ‘tr:w-150,h-150’ and the effective URL is ‘files/sample-file.jpg’.