Compress images to save space

Does anyone have a solution to this please? Images taken from a phone are over 9mb and space will get taken up pretty quickly

Tried ‘Image Compression’ plugin but couldn’t understand how to save the images to DB

Any help greatly appreciated

PS, have selected limit image size

Hi @lisaalger

I also tried the Image Compressor plugin but it’s difficult to get a hang of, so I switched up to using APIs to manage. Currently, I use TinyPNG API.

Here’s how I do it.

  1. Go to TinyPNG – Developer API. Fill out the form there to get your API key.

  2. You should get an email, with a button(link) to Visit your Dashboard

  3. On your dashboard, scroll to the API section and grab the API

  4. Head to We need to take a brief tour to convert the API key to base64. Create an account on (if you don’t have one), and then create a PHP CLI Reply

Once it has been created, you should have this;

Then write this code;

$apiKey = "YOUR_API_KEY";
$new_value = base64_encode("api:" . $apiKey);
echo $new_value;

Don’t forget to put your API key in place of the YOUR_API_KEY. Then hit the run code button. Then you should have your API key in a base64 format.

5. Install the API Connector Plugin
6. Add a New API and give it a nice name.

  • Set the Authentication type to be None of self-handled
  • Add a shared header with key Content-type and value application/json
  • Add another shared header with key Authorization and value Basic YOUR_NEW_API_KEY (Yes, there should be a Basic before the API key that you just generated from Replit.
  1. Now, create an API Call.
  • Ensure to set Use as as Action, instead of Data (so that it will show up as a workflow action)
  • The API Call type should be POST (as we’re sending an image to be compressed)
  • The API Endpoint is

And then in the Body, paste this code;

  "source": {
    "url": "https:<image>"        

Now, when you initialize your API call, there shouldn’t be an issue.

8. Setup a quick form with a picture uploader and a button to go with it.

  1. Setup a workflow for the button
    Event: When Button is clicked
    Action; Navigare to Plugins, and select the Tinifiny link

Bu default you should have this;

But then set it to the dynamic value of your uploader Value’s URL

And then set up an action to save it to your DB. For me, I have a data type of test thing, with an image field type. So feed the Result of Step 1 (the compression) output URL into your DB

With that, once an image is uploaded to your uploader, TinyPNG takes charge of it and then compresses it. The result is what is now fed into your Bubble DB.

While your form loads up and uploads + compresses the image, you can keep your users engaged with some Lottie animations. Follow my pal’s easy walkthrough on how to implement it.
I hope this helps.

Foluso. Let’s chat on Twitter.


Thanks @ayfolut , I’ll certainly give this a try. Thank you for your time

1 Like

@ayfolut I’m receiving this message, any ideas please?

Please send a screenshot of the code in the body object.

The error is coming from there.

Thanks for your time with this

@ayfolut was this what you needed?

1 Like

I see a red warning that you need to initialize the call before it will work, have you done it?

@lisaalger You can use my free plugin for this: TinyPNG - Compress images Plugin | Bubble

TinyPNG only temporarily saves the output on their severs, therefore, remember to add ‘:saved to s3’ when saving your image to the database.

This topic was automatically closed after 70 days. New replies are no longer allowed.