You can configure ImageKit.io to fetch images from your Google Cloud bucket. This allows you to start leveraging ImageKit.io real-time image resizing, optimization, and fast CDN delivery for thousands or millions of existing images within minutes.
Note: We do not start copying images from your bucket as soon as you add it. Instead, we will fetch the particular image when you request it through ImageKit.io URL-endpoint. Learn more to understand how this works. The images accessed from this origin will not appear in your Media library.
The following tutorial will help you create a virtual identity for ImageKit to access your Google Cloud Storage bucket. This allows you to restrict ImageKit to only reading objects from your bucket. i.e. ImageKit will not be able to create/delete/update objects in your bucket.
In order for ImageKit to be able to access your Google Cloud Storage bucket, you will need to 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 tutorial will help you do that. Learn more about Google Cloud Storage's Identity and Access Management.
The service account is a separate virtual identity that will be used by ImageKit to access the objects in your bucket.
In the Cloud Console, go to the Service Accounts page. Go to the Service Accounts page.
Click Select a project, choose your project, and click Open.
Click Create a Service Account.
Enter a service account name (e.g. for-imagekit-access), an optional description, and then click Save.
We need to create access keys that will be used by ImageKit to authenticate itself to the Google Cloud Storage APIs.
In the Cloud Console, go to the Service Accounts page.
Click Select a project, choose a project, and click Open.
Click on the service account that we created in Step 1.
On the page for the service account, click on the Add key button in the Keys section.
Select JSON as the key type and click Create. This will download a JSON file.
You will upload this file to the ImageKit dashboard in step 4.
Make sure to store this file securely, as it cannot be downloaded again.
In the Cloud Console, navigate to the bucket that you wish to integrate with ImageKit
Click on the Permissions tab
Click on Add members button
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
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, click on the Add New Origin button, select Google Cloud Storage in the Origin Type field, and enter the corresponding values, upload the JSON key file in the file field, and click submit.
When you add your first 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 to fetch the images:
Original image through Google Cloud Storage (old URL)
The same master image using ImageKit.io URL-endpoint
Resized 300x300 image
So when you request
ImageKit.io uses the credentials provided by you to fetch the original image from the path
rest-of-the-path.jpg in the Google Storage bucket using the official Google Storage SDK.
URL-endpoint transformation image path┌─────────────────────────────────────┐┌─────────────┐┌───────────────────┐https://ik.imagekit.io/your_imagekit_id/tr:w-300,h-300/rest-of-the-path.jpg
If you get a "Not found" error while accessing the image, check out this troubleshooting guide.
Now start using ImageKit.io URL endpoint in your application to accelerate image loading.
Get started with our quick start guides and SDKs:
Learn about real-time image resizing: