How can I speed up the image loading or enhance perceived performance?

I have a site where a user can scroll through a series of frames of a particular anime scene. So each frame is a single image. Atmost 500 images can make up the scene. That means I download atmost 500 images prior to showcasing a particular scene and in-place show a custom loader.

Things I have done to reduce the download time :-

• Used s3 bucket with CDN Edge servers (from DigitalOcean) to get the assets faster.
• Used an Image Optimisation service by ImageKit to help me with Image Transformation on the fly. So I have few metrics on the basis of which, I dynamically request for the image of certain width and height. My front-end app connects to this service which internally gets stuff from the s3 bucket.
• The same service provided me with a service-worker which factors in network speed and can reduce the quality of images being requested for slow network conditions. (This sometimes work and sometimes doesn't. Needs a better implementation by me I think)
• Stuff like link rel="preconnect" in index.html to reduce DNS resolution time and subsequent TLS negotiation and handshake time for the Imagekit service url (This seems mostly like a initial load optimisation but correct me if I am wrong)

My implementation :-

• I am not using standard img src='...' way of loading all those images.
• I am using fetch to get the image content and create a blob url and on formation of atmost 500 blob urls, I pass them one by one to a image created using new Image() and set the src to the blob url.
• All those images are stored in a single React ref and by looping over that ref array, I draw the images one by one on a canvas. Chose a React ref because it could very well handle that much memory content and help me achieve smooth scroll on the images.

Bottleneck - Most browsers can really just fetch 6 assets from the same domain in parallel. That means for an awesome network connection too , loading of my single anime scene can take 5-10s, for a little less ones 10-30s and so on. I am still okay with the 5-10s mark but more than that will get too much for the end user. Also I didn't chose to load a certain images at once and certain later because it's totally possible for the user to scroll so fast that the later images haven't loaded by that time giving a discontinuous experience.

What performance optimisation options I have for this app ?

Here is the live site - https://animeccha.com/home

Here is the source code - https://github.com/lapstjup/animeccha

Note - Subsequent requests for the same scene are fast since they get fetched from disk-cache. The ImageKit service responds with Cache-control : certain max-age and I think that's why disk-cache works. Correct me I am wrong but I think the browser will free up disk space time to time so those cached images might not remain cached for long. So it's really that initial non-cached loading I want to speed up.