Image Optimization Help

What I’m trying to do:
My site has various tests on them, however, the images are extremely slow to load, taking few seconds to load, which is detrimental to the test, as it is timed by item and losing out on time will mess up test standardization.

I am wondering if anyone has any ideas to what I am doing wrong here, as I don’t think simple images should be so slow. What I have is the source address of the image object is being changed from question #1’s image to question #2’s image as a user goes to the next question.

Clone link:
The site can be viewed at https://bbbtest.anvil.app/
Here is the clone link:
Anvil | Login

I don’t find the images to be loading slow. Most of your images already appear to be well optimized in the size at least

However, in general, images on Anvil do load up a bit slow (depending on your geographical location). Maybe use an image CDN (like Cloudinary or Imagekit) to host your image.

The images load almost instantly for me either (1 GBit connection) and they seem not large when checking some of them (~ 1 MB). And an external page speed test of your link shows a good score. I hope this feedback helps you a bit.

1 Like

If you want consistent loading times for all images during the timed test, you can try preloading images. I see this with media objects used to draw on a canvas, where if I draw the media objects on an off-screen canvas prior to using them on the main canvas, they draw instantly on the main canvas.

I don’t know exactly the strategy to use for doing this in image components, but you might be able to do something similar so the browser cache already has the images in place. That would make loading the test slower, but insulate the timed portion from network delays.

1 Like