Integrate Firebase Storage with ImageKit.io

You can add your existing Firebase 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.

1. Go to the External storage section in your ImageKit.io dashboard, and click on the "Add new" button.
2. Choose Web server from the origin type dropdown.
3. Give your origin a name. It will appear in the list of origins you have added. For example - My Firebase Storage.
4. Enter https://firebasestorage.googleapis.com in the base URL field.
5. Leave the advanced options as it is for now.
6. Click on the Save 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.

So when you request

https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg?alt=media&token={TOKEN},

ImageKit.io internally fetches the file from

https://firebasestorage.googleapis.com/rest-of-the-path.jpg?alt=media&token={TOKEN}

            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 Firebase storage (old URL)
  https://firebasestorage.googleapis.com/rest-of-the-path.jpg?alt=media&token={TOKEN}
• The same file using ImageKit.io URL endpoint
  https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg?alt=media&token={TOKEN}
• 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?alt=media&token={TOKEN}
• 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&alt=media&token={TOKEN}

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

To start using the ImageKit.io URL endpoint in your application, you must replace the base URL of files in your application code. Here are the steps and code samples:

1. Get the Firebase URL for the asset by calling .getDownloadURL() method on the storage reference.
2. In the above download URL, replace https://firebasestorage.googleapis.com with your ImageKit.io URL endpoint.

storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
  // `url` is the download URL for 'images/stars.jpg'
  
  // Replace the firebase URL with ImageKit.io URL endpoint
  url = url.replace("https://firebasestorage.googleapis.com","https://ik.imagekit.io/your_imagekit_id");

  // This can be downloaded directly:
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function(event) {
    var blob = xhr.response;
  };
  xhr.open('GET', url);
  xhr.send();

  // Or inserted into an <img> element:
  var img = document.getElementById('myimg');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});

// Create a reference to the file you want to download
let starsRef = storageRef.child("images/stars.jpg")

// Fetch the download URL
starsRef.downloadURL { url, error in
  if let error = error {
    // Handle any errors
  } else {
    /*
       Replace https://firebasestorage.googleapis.com 
       with your ImageKit.io URL endpoint.
    */
    let imageKitURL = url.replacingOccurrences(of: "https://firebasestorage.googleapis.com", with: "https://ik.imagekit.io/your_imagekit_id")
    // Use imageKitURL in your application
  }
}

storageRef.child("users/me/profile.png").getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
    @Override
    public void onSuccess(Uri uri) {
        // Got the download URL for 'users/me/profile.png'
        
        /*
           Replace https://firebasestorage.googleapis.com 
           with your ImageKit.io URL endpoint.
        */
    }
}).addOnFailureListener(new OnFailureListener() {
    @Override
    public void onFailure(@NonNull Exception exception) {
        // Handle any errors
    }
});

Helpful links:

• 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.