Resize Images in Cloud Storage With Firebase Extension

Things to know about Resize Images Firebase Extension (Version 0.1.1)

  • Still in Beta (Oct 2019)
  • It doesn't work with webp images
  • It doesn't support crop image (e.g. center crop it to 100x100 square image)
  • This extension is written in NodeJs and uses ImageMagick to perform resize operation
  • Each extension has a version number, I am not sure will be the extension be updated automatically when a new version is available.
  • I don't think it's possible to edit/customized the code beyond the configuration parameters provided; the source code is provided, so you could manually upload the customized version (though you might loose some advantage of using a firebase extension).
  • Whenever you upload a file to the cloud storage bucket, a resized version will be created.

Setup

Prerequisite: Setup cloud storage

Install Resize Images extension

I install the extension via Firebase Console

  • Review APIs enabled and resources created
  • Cloud Storage
  • Cloud Function: generateResizedImage
  • Review access granted to this extension
  • Storage Admin

Installation of this extension generates a new service account that has the following access to your project and resources:

  • Configure extension
  • Deployment location: Iowa (us-central1) (I use my project/bucket location)
  • Cloud Storage bucket for images: BUCKET_NAME.appspot.com (this feature will be applied to the entire bucket, so you probably need to create a special bucket for images which require resize)
  • Sizes of resized images: 280x280,1600x1600
  • Cloud Storage path for resized images: thumbs
  • Cache-Control header for resized images: max-age=86400 (1d)

To configure this extension, you specify a maximum width and a maximum height (in pixels, px). This extension keeps the aspect ratio of uploaded images constant and shrinks the image until the resized image's dimensions are at or under your specified max width and height.

For example, say that you specify a max width of 200px and a max height of 100px. You upload an image that is 480px wide by 640px high, which means a 0.75 aspect ratio. The final resized image will be 75px wide by 100px high to maintain the aspect ratio while also being at or under both of your maximum specified dimensions.

Upload file /images/original.jpg will create resized image as /images/thumbs/original_200x200.jpg

If you prefer to store resized images at the root of your bucket, leave this field empty

Click Install extension, wait and click Get Started.

  • The cloud function will triggered whenever an image is uploaded to the bucket.
  • By default the extension assign 1GB memory to the cloud functions.
  • Extension configuration can be changed at Firebase Console -> Extensions.
  • Extension can be uninstalled (the cloud functions and service account shall be deleted)
  • There seems to be a bug with the code if my uploaded file doesn't have a file extension (e.g. /images/filename), where the resized file shall be /images/thumbs/_1600x1600 instead.
  • The extension is free, so you shall only be charged for Cloud Functions and Cloud Storage usage.

NOTE: Refer Android Upload File to Cloud Storage for Firebase.

NOTE: I believe a better solution at the moment is to use Image Processing Service/API.

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.