1920x1080 GIFs Animated Background Images Performance

Hey Guys,

In our project, we would like to add animated background images to our pages, it came to our mind to create a high resolution GIFs that are 1920x1080px and use them as the background image. My question is, the size that we are expecting for such a file is around 25mb, would that affect the page loading times and app performance much ? I have never tried and would like to see if anyone has an idea about this before we start designing the GIFs.

Open to hear If anyone is having any other better solution (ie. Lottie Files, etc.) towards implementing animated background images without causing much of performance and load time delays and specially responsiveness issues.

Note: We are using the new responsive engine in our pages.

Thanks in Advance!

25 MB is way too much even for a vanilla html css page, leave alone Bubble. You can test the impact by placing the image in a blank webpage and use tools like GTmetrix or Pingdom to get an idea of the page load times. Ideally a webpage should be around 1 to 3 mb for a fast loading time, that including all the images, CSS and JS that are required to render the initial display. Deferred images may not have much impact on the page loading time if they are of decent size.

Lottie files are a good option since they are vector based and lightweight. Another technique that websites use is to show a video as the background only when the user is browsing on a computer. On mobile screens the video is usually replaced with an image, or removed altogether.

If all you need is animations in the background (like floating circles, squares, stars, etc), that can be done using CSS and JS while staying under 1mb.

Thanks @deejay.shani, can we use a Lottie as a background image in Bubble. If yes do you know the plugin name which perfectly works for backs ?

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