Integrate Azure Blob Storage with ImageKit.io

You can add your existing Azure blob 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. You will also be able to deliver non-media files like JS, CSS, and more with this integration.

The following instructions are for generating a Shared Access Signature (SAS) token for your Azure storage account. This token will allow ImageKit to access the files in your Azure storage container. This allows you to restrict ImageKit to only reading objects from your container. i.e. ImageKit will not be able to create/delete/update objects in your container.

If something doesn't work as expected, you can refer to Azure's official, albeit more verbose, instructions on this page.

1. Sign in to your Azure Account through the Azure portal.
2. Select Storage Accounts.
3. Select the corresponding storage account.
4. Search for the Shared Access Signature setting in the settings pane on the left.
5. Now, select the options as shown in the following image. This ensures that ImageKit is allowed to only read files from your Azure container.
6. Enter an End expiry time that is practically infinite. Preferably, enter a time 10 years from the start time (which should be right now)
7. Click on 'Generate SAS and connection string'
8. Note down the SAS token generated. It should be of the format ?sv=2019-12-12&ss=bfqt.........

We have now created a SAS token for ImageKit and granted it the Read permission for your container, which means that ImageKit can do nothing more than just read objects in your container. At this point, you should have the following values with you:

• Azure storage account name: The name of your storage account.
• Azure storage container name: Name of the container that you want to integrate.
• SAS Token: As generated in step 1. Do note that the SAS token should begin with a ? when adding it to the origin in ImageKit. For example - ?sv=2019-12-12&ss=bfqt.........

Now, go to the External Storage section in the dashboard. Click on the "Add new" button, select "Azure Storage" in the Origin Type dropdown, enter the corresponding values, and click Save.

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 internally accesses the object at path rest-of-the-path.jpg in your Azure container.

            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 to fetch an image file. The same would work for other file types as well.

• Original image through Azure blog storage (old URL)
  https://storagesamples.blob.core.windows.net/rest-of-the-path.jpg
• The same master image using ImageKit.io URL endpoint
  https://ik.imagekit.io/your_imagekit_id/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/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.