By request in the community, here is a quick tutorial of how easy it is to implement TwicPics with Flutterflow to optimize images.
First, TwicPics was the easiest option I could find to massively optimize how much bandwidth is used in an image-heavy project like mine where there are a lot of user image uploads. I wanted a solution that met this criteria:
1) Very easy to implement (I didn't want the complexity of all the storage buckets like AWS, CloudFront, etc.. You can set this up in 10minutes with very minimal code changes
2) Affordable - I compared the pricing options and TwicPics was very affordable and the free tier will get you up and running for a while
3) Reversible - I wanted something that didn't change all my source images in Google Firebase storage. Just to be clear, this option keeps all the original image uploads in Google Storage, so you still need the same storage space. However storage is cheap, bandwidth is where google gets expensive.
The biggest benefit of all is of course, your users won't have to download anywhere nears as much data. In my app I save as much as 40-70% bandwidth.
First, watch this tutorial from TwicPics - it explains everything you need to know...
STEP 1 - Setup TwicPics
Create an account, then create a workspace.
You will get a sub-domain on twicpics in this format:
CUSTOMNAME.twic.pics
This will be the URL you use to call your firebase images.
STEP 2 - Map your firebase image URLs to the root of your new twicpics domain
Now in your domain settings, map your firebase path to the root of your new domain.
This will now allow you to call a firebase image like this:
https://firebasestorage.googleapis.com/v0/b/XXXXXX.appspot.com/o/image1.jpgYou can call that same time like this, and it will pass the image through TwicPics and optimize it on the fly!
https://CUSTOMNAME.twic.pics/image1.jpg
Using the API features:
Now that's setup you can do all types of resizing and cropping by simply changing the URL.
Read the docs, but it's super simple. For example this URL would resize your image to 400px wide and crop it square
https://CUSTOMNAME.twic.pics/image1.jpg&twic=v1/resize=400/cover=1:1Step 3 - A custom function to rename the image paths
I made a simple custom function so I can pass the imagepaths from Firebase to the new URL format.
Step 4 - Map your images in FlutterFlow
Now the beauty of this system is you can define the exact parameters anywhere in your app. Here are my thumbnails and I set them to 400px wide and square. On the details page when I want a full-size image I just change the params to resize=800 and remove the square cropping option. They have some VERY cool features like automatically cropping around peoples faces or objects.
That's it! These thumbnails are on average about 20-40K. They were as big as 200K to 1MB each stored in firebase. The system has options of converting to .webp and basically any option you want.
TwicPics automatically handles caching, and if images get old that nobody accesses it deletes them from their system and re-creates them if someone calls that images again so it's extremely efficient.
If I ever want to stop using TwicPics, all I have to do is change the paths in my app and I'm done, everything will revert to calling the Firebase images.
As you can see, my past month it's deliver 2.7GB of data from 77.7K image calls, with very low latency saving 87.8% bandwidth. So basically without Twicpics, Google would be delivering about 22GB of data.
