Integrate Google Cloud Storage with ImageKit.io

You can add your existing Google Cloud storage as an origin in ImageKit.io. This allows you to use ImageKit.io's real-time optimization, transformation, and streaming features on all existing images and videos in your storage. With this integration, you will also be able to deliver non-media files like JS, CSS, and more.

Steps 1 to 3 will help you create a new Google Service Account and assign it the Storage Object Viewer role for the bucket that you wish to integrate with ImageKit. This allows you to restrict ImageKit to only reading objects from your bucket, i.e., It will not be able to create, delete, or update objects in your bucket.

If something doesn't work as expected, you can refer to Google's official, albeit more verbose, instructions on these pages, Creating and managing service accounts, Creating and managing service account keys, and Assign the bucket reader role to the service account.

Let's create a new service account:

1. In the Cloud Console, go to the Service Accounts.
2. Click Select a project, choose your project, and click Open.
3. Click Create a Service Account.
4. Enter a service account name (e.g. for-imagekit-access), an optional description, and then click Save.

We need to create access keys that ImageKit will use to authenticate to the Google Cloud Storage APIs.

1. In the Cloud Console, go to the Service Accounts.
2. Click Select a project, choose a project, and click Open.
3. Click on the service account that we created in Step 1.
4. On the page for the service account, click on the Add key button in the Keys section.
5. Select JSON as the key type and click Create. This will download a JSON file.
6. You will upload this file to the ImageKit dashboard in step 4.

Store this file securely, as it cannot be downloaded again.

1. In the Cloud Console, navigate to the bucket you wish to integrate with ImageKit.
2. Click on the Permissions tab.
3. Click on Add members button.
4. Enter the name of the service account we created in Step 1, and select the Cloud Storage -> Storage Object Viewer role in the Select a role option.
5. Click Save.

We have now created a virtual identity for ImageKit and granted it the Reader role for your bucket, which means that ImageKit can do nothing more than just read objects from your bucket. At this point, you should have the following with you:

• Google Storage Bucket Name: Name of the bucket that you want to integrate with ImageKit
• Google Service Account key JSON file: The JSON file you downloaded in step 2

Now, go to the External Storage section in the dashboard and click on the "Add new" button. Select Google Cloud Storage in the Origin Type field, enter the corresponding values, upload the JSON key file in the file field, and click submit.

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.

When you request

https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg,

ImageKit.io uses the credentials you provided to fetch the original file from the path rest-of-the-path.jpg in the Google Storage bucket using the official Google Storage SDK.

            URL endpoint                transformation      file path      
┌─────────────────────────────────────┐┌─────────────┐┌───────────────────┐
https://ik.imagekit.io/your_imagekit_id/tr:w-300,h-300/rest-of-the-path.jpg

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 Google Cloud Storage (old URL)
  https://storage.cloud.google.com/bucket-name/rest-of-the-path.jpg
• The same file using ImageKit.io URL endpoint
  https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg
• Resized to 300x300px with transformation as path parameter
  https://ik.imagekit.io/your_imagekit_id/tr:w-300,h-300/rest-of-the-path.jpg
• Resized to 300x300px with transformation as query parameter
  https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg?tr=w-300,h-300

If you get a "Not found" error while accessing the file, check out this troubleshooting guide.

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.