Imgix Image Processing - During Upload? Or During Display

Need help Responsiveness
1

Hello Bubblers,

Newbie here - read through most of the threads around image processing.
We are building an e-commerce product which obviously has tons of images. It is taking a LONG time to load.

Here is the strategy we are using:

  • We have a separate Index data type which stores only 1 image per Product (to avoid loading all the products per image). This is what we use to display as a RG, for browse page.
  • This object is created (via a database trigger) when ever a corresponding Product is created. It creates an image by picking an appropriate URL (text) from the corresponding Product, and does a “text:as Image: saved to S3” to save it in its Image-type field. This image is displayed in a Group,

I have a few basic questions, if you please:

  1. An image uploaded using image uploader is always uploaded to S3 storage. We don’t need to invote “uploaded to S3” again?
    “:uploaded to S3” is only useful if I have a url to an image from an external file host, and I want to store that as an Image within Bubble - is that correct?

  2. Will it result in subsequent reduced load times if I process an image using “processed with imgix” feature during file upload? Am I correct in understanding that “processed with imgix” during uploading to bubble really has no meaning, because the image is already uploaded to S3?
    In other words, if I process a file:
    “url link to a large 5MB image :use_as_Image : saved_to_S3 :processed_with_imgix(q=75)”
    does this upload a smaller version of the image to S3 again?

  3. Is my understanding correct that - Irrespective of whether I use “processed with imgix” or not, Bubble uses imgix while displaying Image-type fields, so that an optimal image that can fit the displayed Image element’s dimensions, is fetched.
    2.b It makes no difference from page response point of view: whether I use an Image element
    or a Group (with background = image)?

  4. Is it possible to use another dedicated CDN by passing Bubble’s CDN entirely. Is there any performance benefit to such an approach.
    If yes, how do I do this please?

Thanks in advance, for any helpful pointers.

1 Like