Hello
I have built a marketplace on Bubble and I’m struggling with my images to optimize speed.
In every marketplaces, there is a small image of the product in the catalogue and then, when you click on it and you are on the page product, there is the same image but bigger.
Let’s take the example of www.reverb.com :
- the small image on the page result is 210 × 210 px (intrinsic: 400 × 400 px)
(here is the link of the image : https://images.reverb.com/image/upload/s--8A1b-zqs--/a_90/t_card-square/v1622020385/zpgjaceujvouh70mwndx.jpg) - the big picture on the product page is 563 × 750 px (intrinsic: 600 × 800 px)
(here is the link of the image : https://images.reverb.com/image/upload/s---uIaO919--/a_90/f_auto,t_large/v1622020385/zpgjaceujvouh70mwndx.jpg)
=> it’s the same image in their DB ! They use Cloudinary to change the dimension apparently.
I thought I could do the same with :proceed with Imgix. But on my website, here is the result :
- the small image on the page result is 198 × 264 px (intrinsic: 433 × 577 px)
(here is the link of the image : https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Ff1621967578790x876033702729703200%2F0.png?w=384&h=362&auto=compress&dpr=2&q=100&fit=max) - the big picture on the product page is 326 × 434 px (intrinsic: 433 × 577 px)
(here is the link of the image : https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Ff1621967578790x876033702729703200%2F0.png?w=768&h=652&auto=compress&dpr=2&fit=max)
=> it’s exactly the same image, and so the load is really long for the small image, it’s not optimize.
Is there a possibility to do like Reverb on Bubble ? Or do I have to create 2 different images with different dimensions ?
Thanks
Thomas