[Tip] Compress Images on the Backend Using TinyPNG API - No Plugins Needed

andreluizschaffer18 · 2024-08-15T15:21:14.921Z

Hello there!
For those of you looking to compress images directly on the backend without relying on (often paid) plugins, TinyPNG’s API is an excellent solution. The process is straightforward, but there are a few small steps that can trip you up. Here’s a step-by-step guide to help you set it up and save you some time:

Steps:

1) Create a TinyPNG Account
• Go to TinyPNG and sign up for an account.

2) Generate Your API Key
• Once logged in, navigate to the API page and generate your API Key. Make sure it’s active, then copy it for later use.

Screenshot 2024-08-15 at 21.03.501811×785 112 KB

3) Set Up the API in Bubble
• Open Bubble’s API Connector and create a new API call using your TinyPNG API Key, like this:

Screenshot 2024-08-15 at 21.00.14862×846 53 KB

• For more details, you can refer to TinyPNG’s documentation (recommended).

4) Create a Backend Workflow
• In your backend workflows, create a new API Workflow, name it something like Image_Compress, and add an action to call the TinyPNG-Compress_URL API you just set up.
• Important: Make sure to prepend “https:” to your URL, like this:

Screenshot 2024-08-15 at 21.16.24932×276 20.1 KB

5) Save the Compressed Image
• After the API call, add an action to save the response, which is your new compressed image. Use the operator “:use as” image, and then choose the operator “:saved to Bubble Storage” (formerly known as S3).|

Screenshot 2024-08-15 at 21.17.411434×826 65.2 KB

And that’s it—you’re done! Congratulations on setting up image compression on the backend without the need for plugins.

laurieannismorgan · 2024-08-17T20:46:38.694Z

This sounds like just what I was looking for, and I feel dumb, but I can’t figure out how to sign up. The “Login” link is all I see, and it says my email is not found.

autom8 · 2024-08-19T00:51:53.531Z

@laurieannismorgan you can submit your email on this page TinyPNG – Developer API and you will be sent an email with a link to go to the dashboard. Wait 5-10 minutes and you will be able to generate an API key at API - Dashboard

laurieannismorgan · 2024-08-19T03:26:32.782Z

Thank you!

andreluizschaffer18 · 2024-08-20T02:53:30.481Z

That’s correct Autom8!
Did you make it Laurie?

laurieannismorgan · 2024-08-20T04:12:18.006Z

I did! Thank you so much! Now I’m trying to figure out how to post and get, since I’m very new to this whole API thing, but your tutorial helped a lot!

laurieannismorgan · 2024-08-23T01:59:05.738Z

@andreluizschaffer18 I wonder if you could help me figure out what I’m missing.

I was able to set up the API and successfully initialize the call by copying what you showed.

Then I set up a backend workflow as shown. I set up the workflow like this

chrome_ZCfnTp0fqh806×685 26.3 KB

Did I get all those settings, including the key named “url” and its type “text”, correct?

And then I set up the action as shown, like this

chrome_bThV3IpB7n810×304 12.9 KB

I didn’t set up a next step to make changes to a thing on the back end, because I want to change it on the front end, where I’m triggering the back end workflow to compress the Thumbnail image (Result of step 2), like this
chrome_rxAbjb2DzM
however, all I’m getting back from those steps is a one pixel image.

Note that my “Make changes” action expression doesn’t read url used as an image, because that’s not available. I suspect that might be my issue, but I don’t know how to troubleshoot it.

I also need help figuring out how to configure the result I want to get, including a specific height, width, file type, and compression amount. Thank you in advance for any help you can provide!

laurieannismorgan · 2024-08-23T03:31:28.681Z

Regarding my request for help figuring out how to configure the result I want to get, I think I need these

{
“source”: {
“url”: “<image_url>”
}
}
and
{
“resize”: {
“method”: “thumb”,
“width”: 512,
“height”: 512
}
}
and
{
“convert”: { “type”: “image/webp” }
}
but I don’t know the proper syntax to combine them, along with the code to indicate the source. Should I stack the scripts like that, or nest them somehow?

andreluizschaffer18 · 2024-08-23T05:16:32.959Z

laurieannismorgan Did you tried to set the next action on the backend workflow to change the item like I explained?

If you are showing the item’s image on the frontend, it will be uptaded as soon as the API returns your compressed image. So I’d try it first (do it all on the backend).

Also, try to check the boxes on your backend workflow like this:

image340×700 33.8 KB

Obs: in this example I am just saving the URL of the compress image as a TEXT type on Bubble’s database, maybe you can give it a try with this type of setting too.

laurieannismorgan · 2024-08-24T15:59:22.053Z

I am not sure how to change the thing on the backend the way you explained, because I am trying to compress an image before saving it. So I was hoping to save the compressed image on the front end after the user has confirmed that they want to create the thing at all, basically providing the user a preview.

Edited: I figured this part out, but would still like help with configuring the returned image.

Thank you for the screenshot for how to set up the workflow! I will use those values.

Can you also advise on how to combine calls, so that I can properly provide the source url, and get back a resized, “thumb” (intelligently cropped) 512x512 image converted to webp?

laurieannismorgan · 2024-08-24T16:07:32.967Z

Thank you for your help, too! I think I understand now that what you’re showing here:

image1035×595 37.8 KB

is changing the item referenced in this key here:

image340×700 33.8 KB

but I’m not sure how your Fotos_Arquivos relates to my data. Do I need to create a whole new data type for these images? Right now the thumbnail image I am saving is a Thumbnail field of my Post data type, so I can’t access that through the Type dropdown as you have done.

Editing to update, I figured it out! I do need to change the Post and access the Thumbnail field through the parameters (thank you Bubble tooltips!)

If you’re able, I’d still like help figuring how to combine calls, so that I can properly provide the source url, and get back a resized, “thumb” (intelligently cropped), 512x512, converted to webp.

laurieannismorgan · 2024-08-26T02:31:25.207Z

I actually figured out how to add a second call by creating a key for the ID and then using a second workflow to pass the result of the first workflow in to that. It all works nicely.

andreluizschaffer18 · 2024-08-26T08:41:58.527Z

Alright @laurieannismorgan congratulations!

clement4 · 2024-08-27T08:49:00.664Z

Hi @andreluizschaffer18 thanks for the tuto mate! I feel like I’m missing something.

Down in “Key : Image_URL”, where do you get the “Value” from?

If the images are going to be different each time a photo is uploaded, this value is dynamical no?

Cheers!

andreluizschaffer18 · 2024-08-27T10:09:04.179Z

Hey @clement4, I am glad you like the tutorial.
And don’t know if I understood properly, but yes, the URLs are related to the images you want to compress, so they are dynamic.
You need to save the original image on your database first, then you reference the URL of that image on your Tinify API call (parameter Image_URL). Just do not forget to add the https: like I mentioned on set 4.

clement4 · 2024-08-27T18:02:37.584Z

@andreluizschaffer18 thanks for you reply, I am talking about this value that you have put in the 2nd image

52b33171aa3708094684f3e8a0feec20f53569f1862×846 53.5 KB

And then sorry again for my amateurness but when you define your API call in the backend workflows, what value do you choose?

None of these things seem to give me the results that you show in the tuto, feeling a bit dumb there

Cheers mate!

andreluizschaffer18 · 2024-08-28T11:37:08.193Z

@clement4 this value is used just to initialize the call. You can delete it after that.
On your backend, choose Schedule an API Workflow. So when you do that, you will be able to call this Tinify API (like on Step 4) and you will be able to put a dynamic image URL on this Image_URL variable that you’ve just pointed out.

james1295 · 2024-09-23T18:36:30.319Z

Hi, could you please share how you set this up? I’ve set up a new call for compression, and it works, I get the compressed image.

I know I need to make another call for resizing, but I’m not sure how to pass the compressed image from the first call. Could you please share how you handled the calls?

Thanks in advance!

laurieannismorgan · 2024-09-24T01:07:20.465Z

I hope I can help, but I have to admit I am a total newbie at working with API calls.

What I wound up doing was setting up the first call as one workflow action run on an image input (I named the call TinyPNG_Shrink as shown here, and then the second call as a second workflow action (I named TinyPNG_Resize) to run on the result of the previous action.

chrome_DcgLny0ujT929×787 34.8 KB

I used the TinyPNG documentation to construct the JSON Body (and I think I had to make the second call a Data type of Image rather than JSON for some reason.)

chrome_1ZkjQWPtzl

I can’t remember where I got the initial value for the ID in the call, but IIRC that goes into the ID field of the second call in the workflows here.

chrome_MhmSwwJJMM

bookycar.dev · 2024-09-24T23:44:44.014Z

Hi! I am having the same problem where I cannot reference the API that I have just built. Did you manage to do it? I need help here, if I type the “TinyPNG - Compress_URL” in the action in the workflow, I can’t reference it.