Retool storage images load slow

I’m using retool storage with the file upload / image upload component. I already enabled the checkbox for optimizing images so they are reduced in size. However, loading those images as a thumbnail or as normal size takes a long time. There’s no loading icon or placeholder until the image is loaded. There’s only a white space.

  1. Is there a way to optimize uploads even further if the camera is used?
  2. Is there an option to load them as a thumbnail from retool storage?
  3. Does anyone have another solution for this? Caching? Workflow? Cdn? Loading svg placeholder?
1 Like

@Steven_W I've had success using imgix.com in the past. Not an official Retool recommendation, just something I've used at past companies.

You input a public web URL like https://<org>.retool.com/api/file/16260720-39d2-41d2-b2dc-7f3f1fea3be3 and it makes it available at a URL like https://<foo>.imgix.net/16260720-39d2-41d2-b2dc-7f3f1fea3be3, and then you can add query params like ?w=100 to resize it to 100px, etc. Everything is cached under the hood so you only pay the resize cost once.

2 Likes

Thanks. That sounds interesting. I’ll look into it.

One more thing:

When the image is loaded from retool storage, I display it in a custom collection list. As a small thumbnail. When press it, the detail screen is opened. That same image {{item.image}} is used but then bigger. It looks like it loads it all over again. Which is weird because there isn’t another query triggered. I’m using the file ID and not the url.

  1. Would url make a difference in case of retool storage?
  2. Is there a better way to make sure the image doesn’t have to be loaded again if it is already loaded in the list screen?
1 Like

It looks like Retool Storage images are served with a cache-control header so subsequent fetches should be cached even if you are fetching by file ID and not url.

Without knowing more about your code, I suspect there is some other async processing being done that looks like network fetch but is not -- e.g. under the hood the Image component needs to load the bitmap data for the image, resize it, etc. All that work takes time.

1 Like

As source of the thumbnail I have this:

{{item.image ? item.image : '5e9cf38b-6b7a-44f0-86e0-5f5b7d714fa7'}}

For the source of the detail view and the image component in it I have this:

{{selected_ticket.value.image}}

On the button in the custom collection list I have the click event handler set to “set variable” to set selected_ticket to this:

{{item}}

Here’s a screenrecording:
image

As you can see, the thumbnail is already loaded.
The only thing I can think of is that I shouldn’t use a variable. But how do I use selected item with a custom collection and a button with event handler? Is there another way to set the selected item?

1 Like

Yeah, sadly I don't think that performance issue is network-bound. How large is that image?

617 kb. :joy:

1 Like

Is that really it? How to remedy this? Or show a loading placeholder for the detail screen image :thinking:

@Steven_W one idea is to hard-code the image as a base64 string. That way you know the image isn't being served over the network. That'll give you more insight into whether it's a network caching issue or a local rendering issue.

You can use base64 like this:
Screenshot 2024-05-16 at 3.59.44 PM