Integrate Cloudinary Backup Bucket with ImageKit.io

You can add your existing Cloudinary backup bucket as an origin in ImageKit.io. This lets you use ImageKit.io's real-time optimization, transformation, and streaming features on your backup bucket's existing images and videos.

Because of how content is stored in the Cloudinary backup bucket, with the filename being a timestamp, ImageKit.io needs List and Get Object access to your storage bucket. The policy for this using AWS IAM is given below.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::backup-bucketname"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::backup-bucketname",
                "arn:aws:s3:::backup-bucketname/*"
            ]
        }
    ]
}

1. Go to the External storage section in your ImageKit.io dashboard, and click on the "Add new" button.
2. Choose Cloudinary Backup Bucket from the origin type dropdown.
3. Give your origin a name. It will appear in the list of origins you have added. For example - Product images bucket.
4. Fill out the bucket name.
5. Specify the bucket folder in which your files are present. Specifying /res/<cloud_id>/ here would work for most integrations. However, read the section on the other possible options to change how your URL looks.
6. Fill out the access and secret keys. These keys should provide read-only access to ImageKit.io as explained below.
7. Leave the advanced options as it is for now.
8. Click on the Submit button.

When you add your first external source (origin) in the dashboard, the origin is, by default, made accessible through the default URL endpoint of your ImageKit.io account. For subsequent origins, you can either create a separate URL endpoint or edit the existing URL endpoint (including default) and make this newly added origin accessible by editing the origin preference list.

Let's look at a few examples of how to fetch an image file. The same would work for other file types as well.

• Original image through Cloudinary bucket (old URL)
  https://res.cloudinary.com/cloud_id/image/upload/v1711540947/rest-of-the-path.jpg
• The same master image using ImageKit.io URL endpoint
  https://ik.imagekit.io/your_imagekit_id/image/upload/v1711540947/rest-of-the-path.jpg
• Resized 300x300 image with transformation as path parameter
  https://ik.imagekit.io/your_imagekit_id/tr:w-300,h-300/image/upload/v1711540947/rest-of-the-path.jpg
• Resized to 300x300px with transformation as query parameter
  https://ik.imagekit.io/your_imagekit_id/image/upload/v1711540947/rest-of-the-path.jpg?tr=w-300,h-300

To avoid changing the URL transformations, you can also use Cloudinary transformations like w_300,h_300 with ImageKit using the Cloudinary URL rewriter.

Start using ImageKit.io URLs in your application to deliver perfect images and videos.

• Checkout quick start guides for different technologies.
• Apply transformations to deliver the perfect visual experience.
• Learn how to optimize images & videos for web delivery.
• Refer to production checklist before going live.

While fetching files from your Cloudinary bucket with special characters in the name, you may get a 404 NOT FOUND response. For example, let's assume there is a key image%2Bexample.jpg in your Cloudinary bucket, and the request is made using image+example.jpg in the URL. In this case, ImageKit.io tries to fetch image+example.jpg object from the Cloudinary bucket, resulting in a 404 error as this object does not exist.

To overcome this, add your Cloudinary origin as a Web Server origin with the Base URL as https://res.cloudinary.com/cloud_id. Map this origin to the same endpoint where you've already added the Cloudinary backup bucket as an origin after the Cloudinary backup bucket.

After doing this, your endpoint mapping should contain the Cloudinary backup bucket with the native integration, followed by the Cloudinary Base URL added as a Web Server.

Alternatively, you can upload a correctly named file to the ImageKit Media Library as well so that ImageKit can pick it up from there instead of looking it up in the Cloudinary backup bucket.

When enabled, the response contains a Link header with the appropriate URL and rel=canonical. You will have to specify the base URL for the canonical header.

For example, if you set https://www.example.com as the base URL for the canonical header, then the response for URL https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg will have a Link header like this:

Link: <https://www.example.com/rest-of-the-path.jpg>; rel="canonical"

In the documentation above, we added /res/<cloud_id> as the Bucket Folder when adding our Cloudinary backup bucket to ImageKit. With this done, our URLs with ImageKit look like this.

<!-- Image URL with ImageKit -->
https://ik.imagekit.io/your_imagekit_id/image/upload/rest-of-the-path.jpg

<!-- Video URL with ImageKit -->
https://ik.imagekit.io/your_imagekit_id/video/upload/rest-of-the-path.mp4

<!-- Raw URL with ImageKit -->
https://ik.imagekit.io/your_imagekit_id/raw/upload/rest-of-the-path.pdf

However, in your ImageKit URLs, you might not want the Cloudinary-specific /image/upload or /video/upload to appear in the URL. You might also want to remove them because of how some of your other connected origins store the objects instead of having a Cloudinary-specific path.

To do this, you should use res/<cloud_id>/image/upload as the Bucket Folder when connecting the Cloudinary backup bucket. This change removes the image/upload part from the URL and puts it in the bucket config.

Since this restricts the asset type to image, if you also want to deliver video and raw files in the Cloudinary backup bucket via ImageKit, you will have to add the same backup bucket multiple times with the Bucket folder as res/<cloud_id>/video/upload or res/<cloud_id>/raw/upload. Now, you would have three origins with the same bucket but with different bucket folders, one each for images, videos, and raw files.

Map all these origins in sequence, one after the other, against the same URL endpoint. ImageKit will then be able to look up images, videos and raw files on the same URL endpoint. Your URLs will finally look like this

<!-- Image URL with ImageKit -->
https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg

<!-- Video URL with ImageKit -->
https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.mp4

<!-- Raw URL with ImageKit -->
https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.pdf