Right, so playing with images, I have discovered that the size or the image served to the webpages is changed automatically (using Imgix) depending on the size of the image in the repeating group or wherever and it saves / creates a copy on Bubble.imgix.net. Who knew??
- It would be good to know if this is done “on the fly” or “as served”, and if a version of the image is saved or not. If not, then it seems to me that processing images every time for a RG will take a lot of resources.
However, this process doesn’t change the format of the image file. Converting to jpg and lowering the quality would cut down images size further for thumbnails which would then be served faster. At Imgix that would be the FM and Q controls.
- Would that be a sensible way to go with thumbnails? If not, why not?
-
@georgeciobanu Could it be added as an option in “process with Imgix” in Bubble?
No one using photos for anything???
I’m using, but I don’t know the answer 
. I think Imgix will create the thumbnail first time it’s served, so it will save their processing power. But it’s just a guess.
I use photos and have the same challenge. How to reduce image sizes once and use these as source for faster loading across multiple users over multiple sessions
Currently we adjust image sizes based on the elements’ size. Imgix caches things, and then the browser caches them locally. Not sure changing the format is better, my understanding is that png is fine no?
Changing format isnt but saving image in different sizes should be useful to avoid processing with imgix every time.
For instance I pull images from pexels (which are large size) and then show it in different sizes e.g. facebook post size thumbnail, profile photo size card, and full size image upon clicking. In a repeating group that pulls many images from pexels, processes each with imgix even for thumbnail, the loading time is long and affects quality of user experience.
Maybe there could be a way to rescale the image on api pull (or even user uploads) and saving it in different sizes on bubble rather than just relying on imgix for repeated use. That should improve load times right?
But “cache” is not the same as “save” is it? If we could save the image in three different formats then a RG of thumbnails with 1000, 10000, 1000000 images would load much more quickly than an RG where the thumbnails have to be “adjusted, cached, served and cached” on the fly. At least, I think so, but I am not a coder.
Ah, But reading a little more on Imgix, it seems that they only create images on the fly. There is a purpose to this, in terms of responsive design, and not having to get involved in the processing and storage of thumbnails.
And it can work. On Unsplash.com one full screen image I looked at https://unsplash.com/photos/yEOCA6oiVqg is 269kb Jpeg, but the version that the user downloads is 4.6Mb jpeg. That makes a huge difference to the speed of serving, doesn’t it?
Imgix caches images as well, so once it’s created, it is there and ready for other usage, if the size is the same.
Cached by Imgix = great!
But it seems to me (and I’m not a coder, so I don’t know anything) that having a smaller file size will also make the delivery quicker. Hence, is it possible to keep the original photo size and format and to ALSO create a jpeg format (for example, but other formats might be possible) for the thumbnails in repeating groups?
All I can say is that from a user perspective, image serving on my Bubble page seems slower compared to other websites.
1 Like
I’ve been looking at the code for images (I know, it’s just not right for Bubblers!)
Using the existing Bubble/Imgix integration I can see that Imgix creates a couple of words of code to create the sepia image: sepia=80
Is it possible therefore to add https://docs.imgix.com/apis/url/format/fm JPG and https://docs.imgix.com/apis/url/format/q Q ?? This would work really well with thumbnails, I think.
1 Like
It seems pexels api has three options of image size - tiny, medium and large. But the bubble plugin auto pulls only the large one. Can the option be added to select which one of three is received.
I’ll look into it, but in the meantime, why don’t you go to their website and pick what you want?
I actually built something where user puts in a word of text, bubble calls pexels and returns 5-6 suggestions for cover images using pexels
Okay i’ll add small and medium URLs as well in my next deploy
Awesome ! Thanks for the super quick response @emmanuel
1 Like
Thanks for the add… there seems to be a little bug:
When the File Format option jpg is chosen the output stretches to a square image:
Whereas without jpg selected the output is how we want it:
That’s a question for imgix I think. Right click on the image and make sure the URL is right.
