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.
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:
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).|
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.
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!
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
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!
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?
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:
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.
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?
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.
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.
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 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.
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?
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.
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.)
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.
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.