Using Png Crush/TinyPNG service to reduce image files automatically

It might be a good idea to integrate image reducing services like https://tinypng.com or https://wordpress.org/plugins/wp-smushit/, so image files uploaded to Bubble can use less storage, bandwidth and loading time.

1 Like

We use imgix which does this already

2 Likes

Cool. I see in their site that Imgix support some features on the fly (cropping, blur, watermark etc). Is it possible to use in Bubble now?

there is a few image processing tools in blockspring as well.

1 Like

yes! search for processed with imgix in the dropdown after an image field in the expression composer.

1 Like

Great!

1 Like

I don’t see an option to do a watermark in the :processed with Imgix. How can I go about doing that?

at the end of the source image (whixh is a dynamic url) in the editor panel you can add your own parameters like :
?markalpha=100&markalign=center,middle.
Have a look bellow :

1 Like

I’m confused. Can you please show me more screenshots?

I don’t see any options to have a watermark for each image in this screenshot and don’t understand how to use the Imgix watermark documentation in Bubble. @emmanuel is this possible?

1 Like

I’ve added watermarks to pictures before, it’s very easy.
You can simply put another image that has your watermark on top of the dynamic or static image.

You can create your watermark in photoshop, apply some transparency if you want and save it as .png
You can even add it to an image in a repeatinggroup and there you have watermarks on all the images in the group.

1 Like

Thank you for your help @cho

1 Like

Hi,
I don’t see the processed with imgix field ?
Is it because the pictures are uploaded using the multi file uploader ?
Thanks
Capture d’écran 2021-05-18 à 15.45.32

Hey @marie :wave:

I know it’s not super clear here. Let me try to clarify for you.

When uploading the image you can limit the file size, I recommend doing this, makes for faster page load speeds when showing images. You are trying to use imgix in a workflow, that’s why it is not showing up.

When you are displaying the image, then you can see the imgix options. Check it out:

Editor: Test805421 | Bubble Editor
Preview: https://test805421.bubbleapps.io/version-test/imgix?debug_mode=true

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
1 Like

Hi @J805
Call me crazy but I don’t see it :face_with_thermometer:

This is the multi file uploader
Thanks a looot

I am not sure if the multi file uploader actually has that option since it’s possibly other files, besides images, being uploaded. Uploading files and uploading images are pretty different. :thinking: Hmmm. You should still be able to display it using imgix features. Maybe that could help?

My problem is that users upload pictures taken by their phones, so they can be quite big; and the upload time is long, it can take several seconds. So I want to tackle the problem at its core :)))

If you check the box with the image uploader to limit the size before upload, the upload time significantly improves. I would check it out, it made a huge difference for me. :blush:

Bu you can’t upload several images at a time, can you ?

Not with the image uploader one, nope. Hmm :thinking:. Does the multi-file uploader work faster for you?