How to show high-quality GIFs?

Hi everyone,

Hopefully a quick one. One of my pages has a handful of high resolution GIFs, each between 10-40s. I don’t want to compromise on their quality nor the length. I have successfully uploaded each GIF within an image element which shows in the editor however, it now takes far too long for the page to fully load. I’m not sure but, a solution I have in mind is to potentially upload the GIFs to my own Amazon S3 and integrate them via an API?

Would really appreciate some guidance.

How large are they?

2mb, 4mb, and 16mb

That does not seem to be overhelming, except, maybe, the last one…

Anyway, it more depends on connection of a client than on a server’s capacity. Id suggest to display some thumbnails in place of GIFs before they are fully loaded…

I’m not sure if there is (a free) image plugin available with thumbnail functionality, you need to search plugins repository.
If there is no such plugins available, you can use my Element Monitors plugin. There is Component utility element that has Download action that can download resource in the background and generate Blob URL that you can use to replace thumbnail URL in image source upon its Download Complete event.

1 Like

Thanks, will first try to reduce the file size of the third GIF, and if that fails to work, will try the above.

I suppose the Amazon S3 route won’t make a difference?

I don’t think so, but maybe others who are more experienced in this can advise. Bubble stores our files on AWS S3, so I wouldn’t expect it.
Finally, you can just test it manually uploading these GIFs to AWS and see if there’s a difference. That’s probably would get an aswer even faster that typing here :slight_smile:.

This topic was automatically closed after 70 days. New replies are no longer allowed.