A very cool image tip!

I came across this tip by chance, and I share, in the hope that it interests other members of the forum.

If your app have to work with a lot of images, notably via image pickers, you will have noticed that the stored images are sometimes very heavy. They receive almost no treatment.

So instead of using the call to the image of the database, I use the url of the image stored in the database.

And I realized that the images were stored in reality on https://www.imgix.com which offers a lot of cool parameters, notably to considerably reduce the weight of the image (and suddenly the loading time of the apps) and a lot of other cool stuffs. You just have to past parameters after your URL image in Adalo.

You can test parameters here:
https://sandbox.imgix.com/create

For example, without visible loss of quality on one of my images, the weight went from 1.5MB to 60KB …

26 Likes

Excellent tip Patrice. Thanks a ton for this. I have craeted about 150 test users all with images. For different screens showing filtered users, I am having to call image from the db. I’ll use this tip to save some space.

Patrice, can I check something. Do I need to create an imgix account to do the weight reduction? or can I do it through Adalo itself?

No account is needed, you juste have to paste parameters after your Adalo URLs

1 Like

By default the URL structure is something like this :

https://adalo-uploads.imgix.net/f79b38e4469130bc309e593d89333d4a26d611b3489fd692b0d46f9ab9cd890d.png?orient

If you want to compress it you have to add for example “&w=600&auto=compress” just after the current URL

https://adalo-uploads.imgix.net/f79b38e4469130bc309e593d89333d4a26d611b3489fd692b0d46f9ab9cd890d.png?orient&w=600&auto=compress

8 Likes

Thanks a loooot man!!
so, i only have to add that &w600&auto=compress at the end of the URL and thats it?

Salut Patrice,

dis moi je viens de commencer sur Adalo et je ne sais pas pourquoi mais quand j’appelle une image de ma base wp il me met une image cassée. Est-ce qu’il est possible d’appeler des images depuis la base ou adalo doit les copier sur son répertoire obligatoirement ?

ça me parait bizarre que l’on ne puisse pas appeler dynaliquement des images du bdd…

Encore merci !

Sangana

Hey Patrice, thanks so much for this. Game changer!

I was going to use Cloudinary to resize and compress images + some other transformations…

:arrow_right: Many thanks @Patrice ! :+1:t2:

Frenchies are in da place! :smile:

@KenanDada actually thats &w=600 (you need an “=” between w and 600). Easy to leave off and then it doesn’t work. :slight_smile:

Hello guys, coming back to this topic, do you please know if you can use this even if image is coming from collection rather than from URL?

You can refer to images in an adalo collection either by the image directly or by selecting image url and then selecting the url as the image url from adalo. Using the second option you have the possibility to use the the trick above.

So:
insert image
image source=url
url=collection>image>url

I’ll do a video later when I’m back at my computer

4 Likes

Does this work for multiple images in the DB that are being called into a list from a collection?

Also, is there a way to have images compress upon upload? I am building a couple of apps that will allow the user to upload images from their phone camera and would like for the image size to be reduced upon upload to keep the overall DB size small.

1 Like

I am currently trying to figure that out too, good point!

@ctboita

Yes- it works for wherever you are displaying an image from a collection in Adalo. In my case, I display a list of products and each image is displayed optimised as appropriate to the size. So in the general catalogue, they are small, whereas when you display the detailed view of the item, the image is large (but still optimised).

Re your second question- as far as I know, there is no way to compress images on upload.

Great info thanks. Just a note that if you do it this way you’re adding an extra potential future failure point so you should be careful. If Imgix went out of business, or Adalo decided to migrate away from them to a better/cheaper/different/more modern solution years from now, you could lose all your images.

Maybe should also save them in your adalo database as a fallback so if the worst happens you’d have options.

1 Like

Or at least save to an airtable. They’re not going anywhere.

1 Like

Can’t ever be too sure. Parse was a great backend service for a while, got big, got bought out by Facebook, and then Facebook shuttered it.

Obviously better than nothing though!

1 Like

Dear friends, is there a way to use this tip as the user posts a photo? I tried to update the newly created table value by adding “&w600&auto=compress” to the URL magic text but that does not work…
I mean, as the user uploads a photo, the size of the photo is immediately reduced.
Is there a way to do that?..
Thank you!

There is currently no way to do that.

1 Like